@json-render-plugins/antd

Pre-built Ant Design components for json-render. Drop-in catalog definitions and React implementations for 59 components built on Ant Design.

Installation

npm install @json-render-plugins/antd @json-render/core @json-render/react antd zod

Quick Start

1. Create a Catalog

Import standard definitions from @json-render-plugins/antd/catalog and pass them to defineCatalog:

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { antdComponentDefinitions } from "@json-render-plugins/antd/catalog";

const catalog = defineCatalog(schema, {
  components: {
    // Pick the components you need
    Card: antdComponentDefinitions.Card,
    Stack: antdComponentDefinitions.Stack,
    Text: antdComponentDefinitions.Text,
    Button: antdComponentDefinitions.Button,
    Input: antdComponentDefinitions.Input,
  },
  actions: {},
});

Note: State actions (setState, pushState, removeState) are built into the React schema and handled automatically by ActionProvider. You don't need to declare them in your catalog.

2. Create a Registry

Import standard implementations from @json-render-plugins/antd and pass them to defineRegistry:

import { defineRegistry } from "@json-render/react";
import { antdComponents } from "@json-render-plugins/antd";

const { registry } = defineRegistry(catalog, {
  components: {
    Card: antdComponents.Card,
    Stack: antdComponents.Stack,
    Text: antdComponents.Text,
    Button: antdComponents.Button,
    Input: antdComponents.Input,
  },
});

3. Render

import { Renderer } from "@json-render/react";

function App({ spec }) {
  return <Renderer spec={spec} registry={registry} />;
}

Extending with Custom Components

Pick standard components as a base and add your own alongside them:

import { z } from "zod";

// Catalog
const catalog = defineCatalog(schema, {
  components: {
    // Standard
    Card: antdComponentDefinitions.Card,
    Stack: antdComponentDefinitions.Stack,
    Button: antdComponentDefinitions.Button,

    // Custom
    Metric: {
      props: z.object({
        label: z.string(),
        value: z.string(),
        trend: z.enum(["up", "down", "neutral"]).nullable(),
      }),
      description: "KPI metric display",
    },
  },
  actions: {},
});

// Registry
const { registry } = defineRegistry(catalog, {
  components: {
    // Standard
    Card: antdComponents.Card,
    Stack: antdComponents.Stack,
    Button: antdComponents.Button,

    // Custom
    Metric: ({ props }) => (
      <div>
        <span>{props.label}</span>
        <span>{props.value}</span>
      </div>
    ),
  },
});

Standard Components

Layout

| Component | Description | |-----------|-------------| | Card | Container card with optional title and description | | Flex | Flex layout container with gap, alignment, justify | | Stack | Stack layout container (alias for Flex) | | Grid | CSS Grid layout with configurable columns and gap | | Row | Grid row (24-column system) | | Col | Grid column with span, offset | | Divider | Visual separator line | | Space | Spacing component |

Navigation

| Component | Description | |-----------|-------------| | Tabs | Tabbed navigation | | Collapse | Collapsible accordion sections | | Menu | Navigation menu | | Affix | Pin content to fixed position when scrolling | | Anchor | Anchor navigation for page sections | | Breadcrumb | Breadcrumb navigation path |

Overlay

| Component | Description | |-----------|-------------| | Modal | Modal dialog | | Drawer | Drawer panel | | Popover | Click-triggered popover | | Tooltip | Hover tooltip | | Dropdown | Dropdown menu |

Data Display

| Component | Description | |-----------|-------------| | Table | Data table with columns and rows | | Text | Text content | | Paragraph | Paragraph text | | Image | Image display | | Avatar | User avatar with fallback | | Badge | Status badge | | Tag | Tag component | | Alert | Alert banner | | Progress | Progress bar | | Skeleton | Loading placeholder | | Spin | Loading spinner | | Empty | Empty state | | Statistic | Statistic display | | Descriptions | Description list | | Timeline | Timeline display | | Carousel | Horizontally scrollable carousel | | Calendar | Calendar for date display/selection | | List | List component with pagination and grid | | Tree | Tree structure display and selection |

Data Entry

| Component | Description | |-----------|-------------| | Input | Text input with label, validation, and validateOn timing | | TextArea | Multi-line text input with validation | | InputNumber | Number input | | Select | Dropdown select with validation | | Checkbox | Checkbox input with validation | | CheckboxGroup | Group of checkboxes | | Radio | Radio button group with validation | | Switch | Toggle switch with validation | | Slider | Range slider | | Rate | Star rating | | DatePicker | Date picker | | TimePicker | Time picker | | AutoComplete | Input with suggestions | | Cascader | Cascader selection for hierarchical data | | Mentions | Mentions input for @-tagging |

Action

| Component | Description | |-----------|-------------| | Button | Clickable button with variants | | Link | Anchor link | | ButtonGroup | Group of buttons | | Segmented | Segmented control | | Steps | Steps component | | Result | Result page |

Built-in Actions

State actions (setState, pushState, removeState, validateForm) are built into the @json-render/react schema and handled automatically by ActionProvider. They are included in prompts without needing to be declared in your catalog.

| Action | Description | |--------|-------------| | setState | Set a value at a state path | | pushState | Push a value onto an array in state | | removeState | Remove an item from an array in state | | validateForm | Validate all fields and write result to state |

Validation Timing (validateOn)

All form components support the validateOn prop to control when validation runs:

| Value | Description | Default For | |-------|-------------|-------------| | "change" | Validate on every input change | Select, Checkbox, Radio, Switch | | "blur" | Validate when field loses focus | Input, Textarea | | "submit" | Validate only on form submission | — |

Exports

| Entry Point | Exports | |-------------|---------| | @json-render-plugins/antd | antdComponents | | @json-render-plugins/antd/catalog | antdComponentDefinitions |

The /catalog entry point contains only Zod schemas (no React dependency), so it can be used in server-side code for prompt generation.