vercel-labs/json-render▌

Ink terminal renderer that converts JSON specs into interactive terminal component trees with standard components, data binding, visibility, actions, and dynamic props.

Jotai adapter for json-render's StateStore interface. Wire a Jotai atom as the state backend for json-render.

React Email renderer that converts JSON specs into HTML or plain-text email output.

React PDF renderer that generates PDF documents from JSON specs using @react-pdf/renderer.

MCP Apps integration that serves json-render UIs as interactive MCP Apps inside Claude, ChatGPT, Cursor, VS Code, and other MCP-capable clients.

Vue 3 renderer that converts JSON specs into Vue component trees with data binding, visibility, and actions.

Schema definition, catalog creation, and spec streaming for AI-driven JSON rendering. \n \n Define schemas with typed specs and component catalogs using defineSchema and defineCatalog ; generate AI prompts automatically or with custom rules \n Support dynamic prop expressions including state binding ( $state , $bindState ), conditionals ( $cond ), templates, and computed functions \n Stream AI responses as JSONL patches using createSpecStreamCompiler for progressive spec building \n Built-in val

React Native renderer that converts JSON specs into native mobile component trees with standard components, data binding, visibility, actions, and dynamic props.

Remotion renderer that converts JSON timeline specs into video compositions.

Svelte 5 renderer that converts json-render specs into Svelte component trees.

React Three Fiber renderer for json-render. 19 built-in 3D components.

Framework-agnostic utilities for generating code from json-render UI trees. Use these to build custom code exporters for Next.js, Remix, or other frameworks.

Image renderer that converts JSON specs into SVG and PNG images using Satori.

Remotion renderer that converts JSON timeline specs into video compositions.

This skill provides guidance for creating effective skills.

React Native renderer that converts JSON specs into native mobile component trees with standard components, data binding, visibility, actions, and dynamic props.

Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.

Convert JSON specifications into type-safe React component trees with state management and dynamic expressions. \n \n Supports declarative UI specs with element trees, two-way data binding via $bindState , conditional rendering, and computed expressions \n Built-in state management through StateProvider with optional external store integration (Redux, Zustand, XState) and JSON Pointer-based state paths \n Event system with action dispatching, state watchers, and four built-in actions: setState ,

Schema definition, catalog creation, and AI prompt generation for json-render specs. \n \n Define schemas with typed specs and catalogs using defineSchema , then create catalogs mapping component names to their props and descriptions \n Generate AI system prompts from catalogs with optional custom rules; supports spec streaming via JSONL patches with createSpecStreamCompiler \n Dynamic prop expressions enable state binding ( $state , $bindState ), conditionals ( $cond ), templating ( $template )

Convert JSON specs into React component trees with type-safe props and state management. \n \n Define catalogs with Zod schemas for component props, then implement components with automatic type safety and validation \n Built-in state management via StateProvider with two-way binding ( $bindState ), conditional rendering, and external store integration (Redux, Zustand, XState) \n Event system with action dispatching, state watchers, and four built-in actions (setState, pushState, removeState, va

XState Store adapter for json-render's StateStore interface. Wire an @xstate/store atom as the state backend for json-render.

Pre-built shadcn/ui component definitions and implementations for json-render. Provides 36 components built on Radix UI + Tailwind CSS.

Redux adapter for json-render's StateStore interface. Wire a Redux store (or Redux Toolkit slice) as the state backend for json-render.

Zustand adapter for json-render's StateStore interface. Wire a Zustand vanilla store as the state backend for json-render.

Pre-built shadcn/ui component definitions and implementations for json-render. Provides 36 components built on Radix UI + Tailwind CSS.

@json-render/solid renders json-render specs into Solid component trees with fine-grained reactivity.