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.