Create an extension

Create a client module in your host application:

'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 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.