json-render-react
Convert JSON specifications into type-safe React component trees with state management and dynamic expressions.
- Supports declarative UI specs with element trees, two-way data binding via
$bindState, conditional rendering, and computed expressions - Built-in state management through
StateProviderwith optional external store integration (Redux, Zustand, XState) and JSON Pointer-based state paths - Event system with action dispatching, state watchers, and four built-in actions:
setState,pushState,removeState, andvalidateForm - Type-safe catalog definition using Zod schemas for component props, with
useBoundProphook for form components and visibility helpers for conditional UI
@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>,
},
});
function App({ spec }) {
return <Renderer spec={spec} registry={registry} />;
}
More from vercel-labs/json-render
react
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 component catalogs, or rendering AI-generated specs.
1.9Kcore
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.
1.3Kshadcn
Pre-built shadcn/ui components for json-render. Use when working with @json-render/shadcn, adding standard UI components to a catalog, or building web UIs with Radix UI + Tailwind CSS components.
1.0Kreact-pdf
React PDF renderer for json-render. Use when generating PDF documents from JSON specs, working with @json-render/react-pdf, or rendering specs to PDF buffers/streams/files.
888react-three-fiber
React Three Fiber 3D renderer for json-render. Use when working with @json-render/react-three-fiber, building 3D scenes from JSON specs, rendering meshes/lights/models/environments, or integrating Three.js with json-render catalogs.
858zustand
Zustand adapter for json-render's StateStore interface. Use when integrating json-render with Zustand for state management via @json-render/zustand.
855