core
Schema definition, catalog creation, and AI prompt generation for json-render specs.
- Define schemas with typed specs and catalogs using
defineSchema, then create catalogs mapping component names to their props and descriptions - Generate AI system prompts from catalogs with optional custom rules; supports spec streaming via JSONL patches with
createSpecStreamCompiler - Dynamic prop expressions enable state binding (
$state,$bindState), conditionals ($cond), templating ($template), and computed functions ($computed) - Built-in validation helpers, visibility conditions, state watchers, and spec validation/auto-fix utilities for runtime prop resolution and spec refinement
- Framework-agnostic
StateStoreinterface for plugging in Redux, Zustand, XState, or other state management libraries
@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
import { defineSchema } from "@json-render/core";
export const schema = defineSchema((s) => ({
spec: s.object({
// Define spec structure
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.9Kshadcn
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.
890react-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.
860zustand
Zustand adapter for json-render's StateStore interface. Use when integrating json-render with Zustand for state management via @json-render/zustand.
858react-native
React Native renderer for json-render that turns JSON specs into native mobile UIs. Use when working with @json-render/react-native, building React Native UIs from JSON, creating mobile component catalogs, or rendering AI-generated specs on mobile.
809