React JSONR

Transform JSON into React components with a powerful, extensible library for building dynamic UI from declarative definitions.

Get Started GitHubReact JSONR Diagram

Key Features

JSON-to-React Conversion

Transform a JSON description of a UI into a fully-rendered React element tree.

Plugin-Based Transformation

Insert plugins to mutate, enrich, or validate the JSON tree before rendering.

Flexible & Optimized

Configurable traversal orders with support for caching and skipping unnecessary nodes.

Quick Example

import { renderNode, transformJsonTree, createRegistry } from 'react-jsonr';
 
// Define component registry with your custom components
const registry = createRegistry({
  Form: MyFormComponent,
  Input: MyInputComponent,
  Button: MyButtonComponent,
});
 
// JSON definition
const jsonDefinition = {
  type: 'Form',
  props: { title: 'Contact Us' },
  children: [
    {
      id: 'email-input',
      type: 'Input',
      props: { name: 'email', label: 'Email' }
    },
    { 
      id: 'submit-button',
      type: 'Button',
      props: { label: 'Submit', onClick: 'submitForm' }
    }
  ]
};
 
// Render component
const element = renderNode(jsonDefinition, registry, { 
  eventHandlers: { submitForm: () => console.log('Submitted!') }
});
Read the full documentation

How It Works

{
  "type": "div",
  "props": {
    "className": "bg-fd-card text-fd-card-foreground p-6 rounded-lg border border-fd-border"
  },
  "children": [
    {
      "type": "div",
      "props": {
        "id": "user-profile",
        "className": "flex items-center gap-4",
        "key": "user-profile"
      },
      "children": [
        {
          "type": "Avatar",
          "props": {
            "id": "avatar",
            "src": "/avatar.png",
            "size": "large",
            "key": "avatar"
          }
        },
        {
          "type": "ProfileInfo",
          "props": {
            "id": "profile-info",
            "name": "Jane Doe",
            "role": "Developer",
            "key": "profile-info"
          }
        }
      ]
    }
  ]
}

Jane Doe

Developer