json-render-react

SKILL.md

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 StateProvider with 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, and validateForm

Type-safe catalog definition using Zod schemas for component props, with useBoundProp hook 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>,
  },
});