React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.

@json render/react React renderer that converts JSON specs into React component trees. Quick Start Creating a Catalog Spec Structure (Element Tree) The React schema uses an element tree format: Named Slots Use children for the "default" slot. Use the element's top level slots object for other slot names declared by the catalog: Registry components receive named content as slots?.header , slots?.footer , and so on. Do not use slots.default . Visibility Conditions Use visible on elements to show/hide based on state. New syntax: { "$state": "/path" } , { "$state": "/path", "eq": value } , { "$state": "/path", "not": true } , { "$and": [cond1, cond2] } for AND, { "$or": [cond1, cond2] } for OR. Helpers: visibility.when("/path") , visibility.unless("/path") , visibility.eq("/path", val) , visibility.and(cond1, cond2) , visibility.or(cond1, cond2) . Providers Provider Purpose StateProvider Share state across components (JSON Pointer paths). Accepts optional store prop for controlled mode. ActionProvider Handle actions dispatched via the event system VisibilityProvider Enable conditional rendering based on state ValidationProvider Form field validation External Store (Controlled Mode) Pass a StateStore to StateProvider (or JSONUIProvider / createRenderer ) to use external state management (Redux, Zustand, XState, etc.): When store is provided, initialState and onStateChange are ignored. Dynamic Prop Expressions Any prop value can be a data driven expression resolved by the renderer before components receive props: { "$state": "/state/key" } reads from state model (one way read) { "$bindState": "/path" } two way binding: reads from state and enables write back. Use on the natural value prop (value, checked, pressed, etc.) of form components. { "$bindItem": "field" } two way binding to a repeat item field. Use inside repeat scopes. Filtered lists : repeat plus an $item visible condition on the same container renders only matching items: { "repeat": { "statePath": "/tasks", "key": "id" }, "visible": { "$item": "status", "eq": "todo" }, "children": ["task card"] } . AND composed $state conjuncts gate the container shell; $item / $index conjuncts filter items. Nested lists : inside a repeat, use { "repeat": { "statePath": { "$item": "comments" }, "key": "id" } } to iterate an array on the enclosing item. { "$cond": <condition , "$then": <value , "$else": <value } conditional value { "$template": "Hello, ${/name}!" } interpolates state values into strings { "$computed": "fn", "args": { ... } } calls registered functions with resolved args Components do not use a statePath prop for two way binding. Use { "$bindState": "/path" } on the natural value prop instead. Components receive already resolved props. For two way bound props, use the useBoundProp hook with the bindings map the renderer provides. Register $computed functions via the functions prop on JSONUIProvider or createRenderer : Event System Components use emit to fire named events, or on() to get an event handle with metadata. The element's on field maps events to action bindings: The EventHandle returned by on() has: emit() , shouldPreventDefault (boolean), and bound (boolean). State Watchers Elements can declare a watch field (top level, sibling of type/props/children) to trigger actions when state values change: Built in Actions The setState , pushState , removeState , and validateForm actions are built into the React schema and handled automatically by ActionProvider . They are injected into AI prompts without needing to be declared in catalog actions : validateForm validates all registered fields and writes { valid, errors } to state. Note: statePath in action params (e.g. setState.statePath ) targets the mutation path. Two way binding in component props uses { "$bindState": "/path" } on the value prop, not statePath . useBoundProp For form components that need two way binding, use useBoundProp with the bindings map the renderer provides when a prop uses { "$bindState": "/path" } or { "$bindItem": "field" } : useBoundProp(propValue, bindingPath) returns [value, setValue] . The value is the resolved prop; setValue writes back to the bound state path (no op if not bound). BaseComponentProps For building reusable component libraries not tied to a specific catalog (e.g. @json render/shadcn ): defineRegistry defineRegistry conditionally requires the actions field only when the catalog declares actions. Catalogs with actions: {} can omit it. Key Exports Export Purpose defineRegistry Create a type safe component registry from a catalog Renderer Render a spec using a registry schema Element tree schema (includes built in state actions: setState, pushState, removeState, validateForm) useStateStore Access state context useStateValue Get single value from state useBoundProp Two way binding for $bindState / $bindItem expressions useActions Access actions context useAction Get a single action dispatch function useOptionalValidation Non throwing variant of useValidation (returns null if no provider) useUIStream Stream specs from an API endpoint createStateStore Create a framework agnostic in memory StateStore StateStore Interface for plugging in external state management BaseComponentProps Catalog agnostic base type for reusable component libraries EventHandle Event handle type ( emit , shouldPreventDefault , bound ) ComponentContext Typed component context (catalog aware)