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

@json render/svelte Svelte 5 renderer that converts json render specs into Svelte component trees. Quick Start Creating a Catalog Defining Components Components should accept BaseComponentProps<TProps : Creating a Registry Spec Structure (Element Tree) The Svelte schema uses the element tree format: Visibility Conditions Use visible on elements to show/hide based on state: { "$state": "/path" } truthy check { "$state": "/path", "eq": value } equality check { "$state": "/path", "not": true } falsy check { "$and": [cond1, cond2] } AND conditions { "$or": [cond1, cond2] } OR conditions Providers (via JsonUIProvider) JsonUIProvider composes all contexts. Individual contexts: Context Purpose StateContext Share state across components (JSON Pointer paths) ActionContext Handle actions dispatched via the event system VisibilityContext Enable conditional rendering based on state ValidationContext Form field validation Event System Components use emit to fire named events. The element's on field maps events to action bindings: Built in Actions The setState action is handled automatically and updates the state model: Other built in actions: pushState , removeState , push , pop . Dynamic Props and Two Way Binding Nested lists can set repeat.statePath to { "$item": "field" } inside an enclosing repeat. Expression forms resolved before your component receives props: {"$state": "/state/key"} read from state {"$bindState": "/form/email"} read + write back to state {"$bindItem": "field"} read + write back for repeat items {"$cond": <condition , "$then": <value , "$else": <value } conditional value For writable bindings inside components, use getBoundProp : Context Helpers Preferred helpers: getStateValue(path) returns { current } (read/write) getBoundProp(() = value, () = bindingPath) returns { current } (read/write when bound) isVisible(condition) returns { current } (boolean) getAction(name) returns { current } (registered handler) Advanced context access: getStateContext() getActionContext() getVisibilityContext() getValidationContext() getOptionalValidationContext() getFieldValidation(ctx, path, config?) Streaming UI Use createUIStream for spec streaming: Use createChatUI for chat + UI responses: