Predictable. Guardrailed. Fast.
Let users generate dashboards, widgets, apps, and data visualizations from prompts — safely constrained to components you define.
Try: "Create a login form" or "Build a feedback form with rating"
waiting...
render
waiting...
npm install @json-render/core @json-render/react01
Define Your Catalog
Set the guardrails. Define which components, actions, and data bindings AI can use.
02
Users Prompt
End users describe what they want. AI generates JSON constrained to your catalog.
03
Render Instantly
Stream the response. Your components render progressively as JSON arrives.
Define your catalog
Components, actions, and validation functions.
import { createCatalog } from '@json-render/core';
import { z } from 'zod';
export const catalog = createCatalog({
components: {
Card: {
props: z.object({
title: z.string(),
description: z.string().nullable(),
}),
hasChildren: true,
},
Metric: {
props: z.object({
label: z.string(),
valuePath: z.string(),
format: z.enum(['currency', 'percent']),
}),
},
},
actions: {
export: { params: z.object({ format: z.string() }) },
},
});AI generates JSON
Constrained output that your components render natively.
{
"key": "dashboard",
"type": "Card",
"props": {
"title": "Revenue Dashboard",
"description": null
},
"children": [
{
"key": "revenue",
"type": "Metric",
"props": {
"label": "Total Revenue",
"valuePath": "/metrics/revenue",
"format": "currency"
}
}
]
}Features
Guardrails
AI can only use components you define in the catalog
Streaming
Progressive rendering as JSON streams from the model
Data Binding
Two-way binding with JSON Pointer paths
Actions
Named actions handled by your application
Visibility
Conditional show/hide based on data or auth
Validation
Built-in and custom validation functions