Render Mode 2

Build-time Mode

All plugin code is imported at build time and bundled into your app. The renderer accepts either a widgetId (a widget built in Studio, fetched at runtime) or a builderState object (a static schema or one generated via ComposeKitServer). When both are provided, widgetId takes priority. Because the widget composition is unknown at build time, all plugins must be included in your bundle. Note: an internet connection is required when using widgetId to fetch the layout from Studio.

Best for — apps that load Studio-built widgets via widgetId and want no CDN dependency for plugin code, or environments with strict controls over external script execution.

Pros

No CDN dependency — plugin code ships with your bundle
Everything ships in your bundle — no external script execution
Predictable performance — no dynamic script injection at runtime

Cons

Larger app bundle — all plugins are included regardless of which ones the widget uses
Still requires internet to fetch widget layouts from Studio when using widgetId
Plugin updates require upgrading the package and redeploying your app

Initialise

main.tsx

import { ComposeKitClient } from '@brainpiper/composekit';
import '@brainpiper/composekit/dist/style.css';

// Required only when using widgetId — fetches the layout from Studio at runtime.
// Skip this if you are passing builderState directly to ComposeKitRenderer.
ComposeKitClient.init({
    clientId: 'YOUR_CLIENT_ID',
    disableCdn: true,  // ← tells the renderer not to fetch plugin code from CDN
});

Usage

MyPage.tsx

// Option A — Studio widget (fetched at runtime by widgetId)
<ComposeKitRenderer
    widgetId="YOUR_WIDGET_ID"
    data={{ name: 'Jane' }}
    onUpdate={(dataPath, value) => console.log(dataPath, value)}
/>

MyPage.tsx

// Option B — builderState (static schema or generated via ComposeKitServer)
// No ComposeKitClient.init() required — builderState is provided directly.
const rows = [
    {
        "columns": [
            {
                "widgets": [
                    { "name": "@bplcp/input", "pluginProps": { "defaultConfig": { "label": "Name", "dataPath": "name" } } },
                    { "name": "@bplcp/button", "pluginProps": { "defaultConfig": { "label": "Submit", "variant": "default" } } }
                ]
            }
        ]
    }
];

<ComposeKitRenderer
    builderState={{ rows }}
    data={{ name: 'Jane' }}
    onUpdate={(dataPath, value) => console.log(dataPath, value)}
/>