Getting Started

Data Binding

Widgets built in BrainPiper Studio can read initial values from your app's state and report changes back via a callback — without any two-way binding or direct mutation. Pass data to pre-fill fields, and handle onUpdate to merge changes back into your state.

How it works

Each field in a widget has a Data Path set in BrainPiper Studio — e.g. "user.name"
data is read on mount to pre-fill the field at that path
When the user changes a field, onUpdate(dataPath, value) fires
ComposeKitRenderer never mutates data — your handler decides what to do with the update

Usage

MyPage.tsx

const [data, setData] = useState({
    name: '',
    email: '',
    plan: '',
    newsletter: false,
});

<ComposeKitRenderer
    widgetId="your-widget-id"
    data={data}
    onUpdate={(dataPath, value) => {
        setData(prev => ({ ...prev, [dataPath]: value }));
    }}
/>

Flow

notes

// Fields configured in BrainPiper Studio with dataPath "name"
// automatically read their initial value from data.name.
//
// When the user types, onUpdate fires:
//   onUpdate("name", "Jane")
//
// Your handler merges it back into state:
//   setData(prev => ({ ...prev, name: "Jane" }))
//
// ComposeKitRenderer never mutates data directly.
// You decide whether and how to apply updates.

Live demo

The form below simulates the exact contract between data and onUpdate. Each field reads from shared state and writes back through onUpdate — the same way ComposeKitRenderer works internally.