ComposeKit

ComposeKit is a React SDK by BrainPiper. It renders UI layouts designed visually in BrainPiper Studio directly inside your React app — without writing layout code by hand. It also ships every component as a standalone import, so you can use individual pieces without the ComposeKitRenderer for rendering widgets.

React 18 or 19. A Client ID from BrainPiper Studio.

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

// Call once at your app entry point
ComposeKitClient.init({
    clientId: 'YOUR_CLIENT_ID',
});

import { ComposeKitRenderer } from '@brainpiper/composekit';

function MyPage() {
    return (
        <ComposeKitRenderer
            widgetId="your-widget-id"
            data={{ userId: 'u_001', name: 'Jane' }}
            onUpdate={(dataPath, value) => {
                console.log('Field updated:', dataPath, value);
            }}
        />
    );
}

Depending on your deployment needs, ComposeKit supports three distinct render modes. Use the sidebar to explore each one — every section shows the approach, the tradeoffs, and a live demo you can interact with directly.