# Data binding A React block (a whole screen) in [Beamline](https://beamline.io/)'s [AI workspace](https://beamline.io/components/apps/ai-workspace) app. Live demo: https://beamline.io/components/data-binding Bind an object's properties to a view model. Each property says whether it is bound, incomplete or mismatched. A binding takes its source from the model's typed tree, a direction (source to property, back, or both with which side wins when both change) and can bind once. Converters run in order, each taking the last one's output, with every step's types and value shown, so reordering visibly changes the result; a formula reads value, numbers and + − × ÷, and a step that gets the wrong type, has no value set or divides by zero says so; a random step is marked. The chain must end in the property's type, or it says what's missing. A list property lists its items, each with its model and its own or a shared instance; a bare number can't fill a list without Number to list. With renderPreview, the object is drawn with its bound values above the result; each step's actions sit in one menu. The preview with data can be off. ## Use it for - An editor where a designer binds visual properties to app data, with conversions in between. - Any ordered transform chain whose intermediate values and types must be visible. ## Not for - Mapping imported columns to fields ([import-mapping](https://beamline.io/components/import-mapping)). - Number rules that colour a metric ([metric-rules](https://beamline.io/components/metric-rules)). ## Anatomy - header: the product's mark, the title and object, preview on or off - properties: name, type, binding state - binding: source from the typed model tree, direction, which side wins, bind once - converters: the source and its value, then each step with its types, fields, value or problem; reorder, remove, add - list items: name, model, own or shared instance; shared count said - result: the property's value or the problem; bind, update, unbind ## States - property: not bound, bound (success), incomplete (warning), type mismatch (danger) - step: value (info) or problem (danger: wrong type, no value, divide by zero, unreadable formula); random marked - end: the chain's type against the property's, said when wrong; a number for a list said - preview off: values not shown, said - saved, unbound, refused (kept) - phone: one column - right to left: the layout mirrors - reduced motion: nothing animates ## Keyboard - Tab through properties, the source tree, direction and each step's fields and actions; Enter opens the source tree and presses buttons ## Motion Nothing moves. Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `object` (required) | `string` | — | The selected object ("Checkout button"). | | `properties` (required) | `BindableProperty[]` | — | | | `model` (required) | `ModelValue[]` | — | | | `defaultBindings` (required) | `Record` | — | | | `defaultProperty` | `string` | — | | | `itemModels` | `string[]` | — | Item models a list can hold, and shared instances by name. | | `sharedInstances` | `string[]` | — | | | `onSave` | `((propertyId: string, binding: Binding \| null) => Promise)` | — | Save a property's binding (null to unbind); reject with the reason to keep the edit. | | `product` | `string` | — | Your product's name, shown as its mark. | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | | `renderPreview` | `((values: Record) => ReactNode)` | — | Draws the object with its bound values (each property's id → the value its chain gives now, drafts included), as the focal preview beside the binding; values follow every edit while Preview with data is on. | ## Built from - [Avatar](https://beamline.io/components/avatar.md) - [Button](https://beamline.io/components/button.md) - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) - [Empty state](https://beamline.io/components/empty-state.md) - [Input](https://beamline.io/components/input.md) - [Label](https://beamline.io/components/label.md) - [Number field](https://beamline.io/components/number-field.md) - [Segmented control](https://beamline.io/components/segmented-control.md) - [Select](https://beamline.io/components/select.md) - [Skeleton](https://beamline.io/components/skeleton.md) - [Spinner](https://beamline.io/components/spinner.md) - [Switch](https://beamline.io/components/switch.md) - [Text morph](https://beamline.io/components/text-morph.md) - [Tooltip](https://beamline.io/components/tooltip.md) - [Tree select](https://beamline.io/components/tree-select.md) ## Import ```tsx import { DataBinding } from "@beamline/data-binding"; ``` ## Get it Data binding is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in AI workspace - [AI agent workspace](https://beamline.io/components/agent-workspace): Threads, a conversation that opens on the thread's earlier turns (each with its trace, the tools the agent called, a cited answer and any table it… - [Agent runs monitor](https://beamline.io/components/agent-runs): Every run of your agents in one place: success rate, run time, tokens and spend; the last runs as a strip of status blocks; a live table where running… - [Agent monitor](https://beamline.io/components/agent-monitor): Agents in production and on test. Monitor shows every agent or one over 24 hours, 7 or 14 days: runs, tokens, estimated cost and average run time counted… - [Conversation history](https://beamline.io/components/conversation-history): Past conversations with an assistant, ready to pick up again: the list by day with bookmarks and unsent drafts, a search through every message that… - [Knowledge base manager](https://beamline.io/components/knowledge-base): What your assistant knows and whether it is fresh: sources with live sync status (syncing with progress, out of date, failed with the reason and Retry)… - [Reading library](https://beamline.io/components/reading-library): A read-it-later library: saved views that are live filters (a query with every unreadable part named, the number that matches now, saved with a name; a… - [Artifact workbench](https://beamline.io/components/artifact-workbench): Where the things an assistant makes are checked before they leave: every document, piece of code, small app and data result from a conversation, each… - [AI image studio](https://beamline.io/components/image-studio): Write a prompt, pick a shape, a style and how many, and watch the variations generate side by side; each one opens full screen and can be upscaled or… - [Voice agent](https://beamline.io/components/voice-agent): A voice agent in three layouts on one session: a workspace with the agent's orb large on a stage (the line being said shows under it, questions to ask… - [Model playground](https://beamline.io/components/model-playground): Try one prompt on up to three models side by side: pick each model with its price and speed in view, set the system prompt, temperature and length once… - [Model inspector](https://beamline.io/components/model-inspector): A design model's objects without needing the 3D view: the model tree, where objects with the same name are told apart by id and path; the selected… - [Model issues](https://beamline.io/components/model-issues): Issues pinned to the objects of a design model. The queue says the scope beside every count (open in the project, on the loaded models, on this version)… - [Agent builder](https://beamline.io/components/agent-builder): An agent's configuration beside an assistant that proposes tools. Ask for what the agent should do and the assistant's proposal lists each tool with why… - [Workflow composer](https://beamline.io/components/workflow-composer): A workflow drafted from a sentence and finished by hand. The prompt drafts steps that arrive one by one on the graph (a draft cut short keeps what came… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).