core
Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core, defining schemas, creating catalogs, or building JSON specs for UI/video generation.
By vercel-labs · 7,974 installs
npx skills add vercel-labs/json-render --skill core
Source repository · Upstream listing
@json render/core
Core package for schema definition, catalog creation, and spec streaming.
Key Concepts
Schema : Defines the structure of specs and catalogs (use defineSchema )
Catalog : Maps component/action names to their definitions (use defineCatalog )
Spec : JSON output from AI that conforms to the schema
SpecStream : JSONL streaming format for progressive spec building
Defining a Schema
Creating a Catalog
Generating AI Prompts
SpecStream Utilities
For streaming AI responses (JSONL patches):
Dynamic Prop Expressions
Any prop value can be a dynamic expression resolved at render time:
{ "$state": "/state/key" } reads a value from the 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.
{ "$cond": <condition , "$then": <value , "$else": <value } evaluates a visibility condition and picks a branch
{ "$template": "Hello, ${/user/name}!" } interpolates ${/path} references with state values
{ "$computed": "fnName", "args": { "key": <expression } } calls a registered function with resolved args
$cond uses the same syntax as visibility conditions ( $state , eq , neq , not , arrays for AND). $then and $else can themselves be expressions (recursive).
Components do not use a statePath prop for two way binding. Instead, use { "$bindState": "/path" } on the natural value prop (e.g. value , checked , pressed ).
State Watchers
Elements can declare a watch field (top level, sibling of type/props/children) to trigger actions when state values change:
Watchers only fire on value changes, not on initial render.
Validation
Built in validation functions: required , email , url , numeric , minLength , maxLength , min , max , pattern , matches , equalTo , lessThan , greaterThan , requiredIf .
Cross field validation uses $state expressions in args:
User Prompt Builder
Build structured user prompts with optional spec refinement and state context:
Available edit modes: "patch" (RFC 6902 JSON Patch), "merge" (RFC 7396 Merge Patch), "diff" (unified diff).
Spec Validation
Validate spec structure and auto fix common issues:
Visibility Conditions
Control element visibility with state based conditions. VisibilityContext is { stateModel: StateModel } .
Built in Actions in Schema
Schemas can declare builtInActions actions that are always available at runtime and auto injected into prompts:
These appear in prompts as [built in] and don't require handlers in defineRegistry .
StateStore
The StateStore interface allows external state management libraries (Redux, Zustand, XState, etc.) to be plugged into json render renderers. The createStateStore factory creates a simple in memory implementation:
The StateStore interface: get(path) , set(path, value) , update(updates) , getSnapshot() , subscribe(listener) .
Key Exports
Export Purpose
defineSchema Create a new schema
defineCatalog Create a catalog from schema
createStateStore Create a framework agnostic in memory StateStore
resolvePropValue Resolve a single prop expression against data
resolveElementProps Resolve all prop expressions in an element
buildUserPrompt Build user prompts with refinement and state context
buildEditUserPrompt Build user prompt for editing existing specs
buildEditInstructions Generate prompt section for available edit modes
isNonEmptySpec Check if spec has root and at least one element
deepMergeSpec RFC 7396 deep merge (null deletes, arrays replace, objects recurse)
diffToPatches Generate RFC 6902 JSON Patch operations from object diff
EditMode Type: "patch" \ "merge" \ "diff"
validateSpec Validate spec structure
autoFixSpec Auto fix common spec issues; classifies fixes lossy/lossless, { lossy: false } withholds pruning
createSpecStreamCompiler Stream JSONL patches into spec
createJsonRenderTransform TransformStream separating text from JSONL in mixed streams
parseSpecStreamLine Parse single JSONL line
applySpecStreamPatch Apply patch to object
StateStore Interface for plugging in external state management
ComputedFunction Function signature for $computed expressions
check TypeScript helpers for creating validation checks
BuiltInAction Type for built in action definitions ( name + description )
ActionBinding Action binding type (includes preventDefault field)