---
title: 'Create an extension'
description: 'Add a small custom app through the public extension contract.'
---

# Create an extension

Create a client module in your host application:

```tsx filename="catalog-help.tsx"
'use client';

import type { StudioExtension } from '@flexkit/studio';

export function CatalogHelp(): StudioExtension {
  return {
    id: 'catalog-help',
    name: 'Catalog help',
    contributes: {
      apps: [
        {
          name: 'catalog-help',
          title: 'Catalog help',
          component: <p>Review product names and category links before publication.</p>,
        },
      ],
    },
  };
}
```

Import `CatalogHelp` in `flexkit.studio.tsx` and add `CatalogHelp()` to the intended project's `extensions` array. Start Studio, select that project, and open the new app from the app rail.



## Routes and composition

An app contribution has `name`, `title`, optional `icon`, `component`, and optional `routes`. Routes have `path`, `component`, and optional `children`. A parent with nested route content uses the exported `Outlet` in its component. Keep route paths relative to the app's contributed routing context; the project and Studio base path are configured separately.

Extensions can contain nested `extensions`. Avoid duplicate app names and unintended component overrides. Keep extensions project-local when different projects need different behavior.

## Add data access

Use Studio's contexts and [public data hooks](/docs/reference/studio) inside the mounted app. Respect loading, role, space, and project restriction states. Do not include server secrets in an extension. Deploy the application to share the extension with teammates.


---

[View full sitemap](/docs/sitemap.md)