519a538]
bf3a7ec]
43b7515]
a8afd8b]
5b32de8]
54a1ecf]
63c339b]
3f1e71e]
9cef4e9: Dynamic forms, Vue renderer, XState Store adapter, and computed values.### New: @json-render/vue Package
Vue 3 renderer for json-render. Full feature parity with @json-render/react including data binding, visibility conditions, actions, validation, repeat scopes, and streaming.
defineRegistry — create type-safe component registries from catalogsRenderer — render specs as Vue component treesStateProvider, ActionProvider, VisibilityProvider, ValidationProvideruseStateStore, useStateValue, useStateBinding, useActions, useAction, useIsVisible, useFieldValidationuseUIStream, useChatUIStateStore interface### New: @json-render/xstate Package
XState Store (atom) adapter for json-render's StateStore interface. Wire an @xstate/store atom as the state backend.
xstateStoreStateStore({ atom }) — creates a StateStore from an @xstate/store atom@xstate/store v3+### New: $computed Expressions
Call registered functions from prop expressions:
{ "$computed": "functionName", "args": { "key": <expression> } } — calls a named function with resolved argsfunctions prop on JSONUIProvider / createRendererComputedFunction type exported from @json-render/core### New: $template Expressions
Interpolate state values into strings:
{ "$template": "Hello, ${/user/name}!" } — replaces ${/path} references with state values### New: State Watchers
React to state changes by triggering actions:
watch field on elements maps state paths to action bindingswatch is a top-level field on elements (sibling of type/props/children), not inside propswatch placed inside props### New: Cross-Field Validation Functions
New built-in validation functions for cross-field comparisons:
equalTo — alias for matches with clearer semanticslessThan — value must be less than another field (numbers, strings, coerced)greaterThan — value must be greater than another fieldrequiredIf — required only when a condition field is truthyresolvePropValue for consistent $state expression handling### New: validateForm Action (React)
Built-in action that validates all registered form fields at once:
validateAll() synchronously and writes { valid, errors } to state/formValidation (configurable via statePath param)### Improved: shadcn/ui Validation
All form components now support validation:
checks and validateOn propsvalidateOn prop (controls timing: change/blur/submit)### Improved: React Provider Tree
Reordered provider nesting so ValidationProvider wraps ActionProvider, enabling validateForm to access validation state. Added useOptionalValidation hook for non-throwing access.
9cef4e9]
b103676]
1d755c1: External state store, store adapters, and bug fixes.### New: External State Store
The StateStore interface lets you plug in your own state management (Redux, Zustand, Jotai, XState, etc.) instead of the built-in internal store. Pass a store prop to StateProvider, JSONUIProvider, or createRenderer for controlled mode.
StateStore interface and createStateStore() factory to @json-render/coreStateProvider, JSONUIProvider, and createRenderer now accept an optional store prop for controlled modestore is provided, it becomes the single source of truth (initialState/onStateChange are ignored)store is omitted, everything works exactly as before (fully backward compatible)createStoreAdapter, immutableSetByPath, flattenToPointers) available via @json-render/core/store-utils for building custom adapters### New: Store Adapter Packages
@json-render/zustand — Zustand adapter for StateStore@json-render/redux — Redux / Redux Toolkit adapter for StateStore@json-render/jotai — Jotai adapter for StateStore### Changed: onStateChange signature updated (breaking)
The onStateChange callback now receives a single array of changed entries instead of being called once per path:
// Before
onStateChange?: (path: string, value: unknown) => void
// After
onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void
### Fixed
@json-render/react/schema subpath, avoiding createContext crashes in Next.js App Router API routes@json-render/react, @json-render/react-native, and @json-render/react-pdf1d755c1]
09376db]
2d70fab: New @json-render/shadcn package, event handles, built-in actions, and stream improvements.### New: @json-render/shadcn Package
Pre-built shadcn/ui component library for json-render. 30+ components built on Radix UI + Tailwind CSS, ready to use with defineCatalog and defineRegistry.
shadcnComponentDefinitions — Zod-based catalog definitions for all components (server-safe, no React dependency via @json-render/shadcn/catalog)shadcnComponents — React implementations for all components### New: Event Handles (on())
Components now receive an on(event) function in addition to emit(event). The on() function returns an EventHandle with metadata:
emit() — fire the eventshouldPreventDefault — whether any action binding requested preventDefaultbound — whether any handler is bound to this event### New: BaseComponentProps
Catalog-agnostic base type for component render functions. Use when building reusable component libraries (like @json-render/shadcn) that are not tied to a specific catalog.
### New: Built-in Actions in Schema
Schemas can now declare builtInActions — actions that are always available at runtime and automatically injected into prompts. The React schema declares setState, pushState, and removeState as built-in, so they appear in prompts without needing to be listed in catalog actions.
### New: preventDefault on ActionBinding
Action bindings now support a preventDefault boolean field, allowing the LLM to request that default browser behavior (e.g. navigation on links) be prevented.
### Improved: Stream Transform Text Block Splitting
createJsonRenderTransform() now properly splits text blocks around spec data by emitting text-end/text-start pairs. This ensures the AI SDK creates separate text parts, preserving correct interleaving of prose and UI in message.parts.
### Improved: defineRegistry Actions Requirement
defineRegistry now conditionally requires the actions field only when the catalog declares actions. Catalogs with no actions (e.g. actions: {}) no longer need to pass an empty actions object.
2d70fab]