solid

SolidJS renderer for json-render. Use when building @json-render/solid catalogs/registries, wiring Renderer providers, implementing bindings/actions, or troubleshooting Solid-specific reactivity patterns.

By vercel-labs · 904 installs

npx skills add vercel-labs/json-render --skill solid

Source repository · Upstream listing

@json render/solid @json render/solid renders json render specs into Solid component trees with fine grained reactivity. Quick Start Create a Catalog Define Components Components receive ComponentRenderProps from the renderer: Example: Create a Registry Spec Structure Providers StateProvider : state model read/write and controlled mode via store VisibilityProvider : evaluates visible conditions ValidationProvider : field validation + validateForm integration ActionProvider : runs built in and custom actions JSONUIProvider : combined provider wrapper Hooks useStateStore , useStateValue , useStateBinding useVisibility , useIsVisible useActions , useAction useValidation , useOptionalValidation , useFieldValidation useBoundProp useUIStream , useChatUI Built in Actions Handled automatically by ActionProvider : setState pushState removeState validateForm Dynamic Props and Bindings Nested lists can set repeat.statePath to { "$item": "field" } inside an enclosing repeat. Supported expression forms include: {"$state": "/path"} {"$bindState": "/path"} {"$bindItem": "field"} {"$template": "Hi ${/user/name}"} {"$computed": "fn", "args": {...}} {"$cond": <condition , "$then": <value , "$else": <value } Use useBoundProp in components for writable bound values: useStateValue , useStateBinding , and the state / errors / isValid fields from useFieldValidation are reactive accessors in Solid. Call them as functions inside JSX, createMemo , or createEffect . Solid Reactivity Rules Do not destructure component props in function signatures when values need to stay reactive. Keep changing reads inside JSX expressions, createMemo , or createEffect . Context values are exposed through getter based objects so consumers always observe live signals. Streaming UI Use useChatUI for chat + UI generation flows.