React

Turns JSON specifications into live React component trees with full type safety via Zod schemas and TypeScript. You define a catalog of components with their prop schemas, then feed it JSON specs that get rendered as actual React elements. Handles two-way data binding through `$bindState` expressions, conditional visibility, state management via JSON Pointers, and an event system that maps component events to actions. The controlled mode lets you plug in external stores like Redux or Zustand. Honestly most useful when you're building tools that generate UIs programmatically or need to let non-developers configure interfaces through JSON. The developer experience is solid once you understand the binding model, though the mix of declarative JSON and imperative React can feel odd at first.

skills.sh installs: 18.5K
GitHub stars: 19.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/json-render --skill react --agent claude-code

Installs into .claude/skills of the current project.

Files

@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} />;
}

Creating a Catalog

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { defineRegistry } from "@json-render/react";
import { z } from "zod";

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly