back
loading skill details...
React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating…
Convert JSON specs into React component trees with type-safe props and state management.
Define catalogs with Zod schemas for component props, then implement components with automatic type safety and validation
Built-in state management via StateProvider with two-way binding ($bindState), conditional rendering, and external store integration (Redux, Zustand, XState)
Event system with action dispatching, state watchers, and four built-in actions (setState, pushState, removeState, validateForm)
Dynamic prop expressions support state reads, computed functions, templates, and conditionals; form components use useBoundProp hook for two-way binding
@json-render/react
React renderer that converts JSON specs into React component trees.
Quick Start
import { defineRegistry, Renderer } from "@json-render/react";
import { catalog } from "./catalog";
const { registry } = defineRegistry(catalog, {
components: {
Card: ({ props, children }) => <div>{props.title}{children}</div>,
},
});don't have the plugin yet? install it then click "run inline in claude" again.