react

SKILL.md

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>,
  },
});