Compare commits

...
Author SHA1 Message Date
Chris Tate 1a51cddf3b update docs 2026-02-11 14:50:03 -06:00
5 changed files with 26 additions and 26 deletions
+4 -4
View File
@@ -1,8 +1,8 @@
# json-render
**The framework for User-Generated Interfaces (UGI).**
**The Generative UI framework.**
Dynamic, personalized UIs per user without sacrificing reliability. Predefined components and actions for safe, predictable output.
Generate dynamic, personalized UIs from prompts without sacrificing reliability. Predefined components and actions for safe, predictable output.
```bash
npm install @json-render/core @json-render/react
@@ -14,7 +14,7 @@ npm install @json-render/core @json-render/remotion
## Why json-render?
json-render enables **User-Generated Interfaces**: dynamic UIs that end users create through natural language prompts, powered by Generative UI. You define the guardrails, AI generates within them:
json-render is a **Generative UI** framework: AI generates interfaces from natural language prompts, constrained to components you define. You set the guardrails, AI generates within them:
- **Guardrailed** - AI can only use components in your catalog
- **Predictable** - JSON output matches your schema, every time
@@ -285,7 +285,7 @@ flowchart LR
```
1. **Define the guardrails** - what components, actions, and data bindings AI can use
2. **Users generate** - end users describe what they want in natural language
2. **Prompt** - describe what you want in natural language
3. **AI generates JSON** - output is always predictable, constrained to your catalog
4. **Render fast** - stream and render progressively as the model responds
+4 -4
View File
@@ -2,13 +2,13 @@ export const metadata = { title: "Introduction" }
# Introduction
The framework for User-Generated Interfaces (UGI). Dynamic, personalized UIs per user without sacrificing reliability.
The Generative UI framework. Generate dynamic, personalized UIs from prompts without sacrificing reliability.
## What is json-render?
json-render is the framework for **User-Generated Interfaces**: dynamic UIs that end users generate through natural language prompts, powered by Generative UI. You define the guardrails: what components exist, what props they take, what actions are available. AI generates JSON that matches your schema, and your components render it natively on web or mobile.
json-render is a **Generative UI** framework: AI generates interfaces from natural language prompts, constrained to components you define. You set the guardrails -- what components exist, what props they take, what actions are available. AI generates JSON that matches your schema, and your components render it natively on web or mobile.
Every interface is unique to the user, but every interface is safe and predictable.
Every generated interface is safe and predictable.
## Why json-render?
@@ -31,6 +31,6 @@ Render on web with React and on mobile with React Native from the same catalog a
## How it works
1. Define the guardrails - what components, actions, and data bindings AI can use
2. Users generate - end users describe what they want in natural language
2. Prompt - describe what you want in natural language
3. AI generates JSON - output is always predictable, constrained to your catalog
4. Render fast - stream and render progressively as the model responds
+9 -8
View File
@@ -10,14 +10,15 @@ export default function Home() {
{/* Hero */}
<section className="max-w-5xl mx-auto px-6 pt-24 pb-16 text-center">
<p className="text-xs sm:text-sm font-medium text-muted-foreground tracking-widest uppercase mb-4">
The framework for User-Generated Interfaces
The Generative UI Framework
</p>
<h1 className="text-4xl sm:text-6xl md:text-7xl font-bold tracking-tighter mb-6">
AI → json-render → UI
</h1>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto mb-12 leading-relaxed">
Dynamic, personalized UIs per user without sacrificing reliability.
Predefined components and actions for safe, predictable output.
Generate dynamic, personalized UIs from prompts without sacrificing
reliability. Predefined components and actions for safe, predictable
output.
</p>
<Demo />
@@ -68,10 +69,10 @@ export default function Home() {
<div className="text-xs text-muted-foreground font-mono mb-3">
02
</div>
<h3 className="text-lg font-semibold mb-2">Users Generate</h3>
<h3 className="text-lg font-semibold mb-2">AI Generates</h3>
<p className="text-sm text-muted-foreground leading-relaxed">
End users describe what they want. AI generates JSON constrained
to your catalog. Every interface is unique to the user.
Describe what you want. AI generates JSON constrained to your
catalog. Every interface is unique.
</p>
</div>
<div>
@@ -248,8 +249,8 @@ export default function Page() {
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
{[
{
title: "User-Generated Interfaces",
desc: "Dynamic, personalized UIs per user powered by Generative UI",
title: "Generative UI",
desc: "Generate dynamic, personalized interfaces from prompts with AI",
},
{
title: "Guardrails",
+8 -9
View File
@@ -24,13 +24,12 @@ export const metadata: Metadata = {
template: "%s | json-render",
},
description:
"The framework for User-Generated Interfaces (UGI). Let users generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
"The Generative UI framework. Generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
keywords: [
"json-render",
"UGI",
"User-Generated Interfaces",
"AI UI generation",
"generative UI",
"AI UI generation",
"user-generated interfaces",
"React components",
"React Native",
"guardrails",
@@ -44,23 +43,23 @@ export const metadata: Metadata = {
locale: "en_US",
url: "https://json-render.dev",
siteName: "json-render",
title: "json-render | The framework for User-Generated Interfaces",
title: "json-render | The Generative UI Framework",
description:
"The framework for User-Generated Interfaces (UGI). Let users generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
"The Generative UI framework. Generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
images: [
{
url: "/og",
width: 1200,
height: 630,
alt: "json-render - The framework for User-Generated Interfaces",
alt: "json-render - The Generative UI Framework",
},
],
},
twitter: {
card: "summary_large_image",
title: "json-render | The framework for User-Generated Interfaces",
title: "json-render | The Generative UI Framework",
description:
"The framework for User-Generated Interfaces (UGI). Let users generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
"The Generative UI framework. Generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
images: ["/og"],
creator: "@verabornnot",
},
+1 -1
View File
@@ -7,7 +7,7 @@
*/
export const PAGE_TITLES: Record<string, string> = {
// Home (no slug)
"": "The framework for\nUser-Generated Interfaces",
"": "The Generative UI\nFramework",
// Top-level
playground: "Playground",