json-render
Vercel Labs' generative UI framework with an experimental compose path where Jev picks which catalog components and actions to render.
Overview
json-render is Vercel Labs' generative UI framework. You define a catalog of components and actions with Zod-typed props, and AI generates interfaces from natural-language prompts constrained to that catalog, producing JSON that matches your schema and streams progressively. Renderers exist for React, shadcn/ui (36 prebuilt components), React Native, Vue, Svelte, Solid, Next.js apps, Remotion video, PDF, email, terminal UIs and 3D scenes.
Its connection to Jev, per list sources, is an experimental composition path: instead of an LLM writing the UI spec, Jev selects from predefined component and property options and chooses which components and actions the interface should contain, which json-render turns into the same spec. The core APIs for this are marked experimental. The README excerpt documents the general framework rather than the Jev path, so details of the Jev evaluator are drawn from the listing and from the related json-renderer playground. It suits teams building guardrailed generative interfaces.
What the decision model decides
| Type | Question | Answers |
|---|---|---|
| Choice | Which catalog components and actions should this interface contain, and in what arrangement? | — |
How it works
- Define a catalog of components, props and actions
- User prompt describes the desired interface
- In the Jev path, Jev picks among prepared component candidates
- json-render assembles the choices into a spec
- Renderer displays the UI on the chosen platform
Strengths
- Output is limited to your catalog
- Many renderers from one catalog
- Jev path generates no output tokens
Caveats
- Jev integration is experimental
- Main docs focus on LLM generation
- Jev path chooses among prepared candidates, so content flexibility is limited
Getting started
npm install @json-render/core @json-render/react, then define a catalog with defineCatalog.At a glance
- Type
- Service
- Status
- beta
- Language
- TypeScript
- Runtime
- React and other UI frameworks
- Has code
- yes
- License
- Apache-2.0
Use cases and integrations
How curated lists describe it
Generative UI: Vercel Labs' UI framework uses Jev in its compose path to pick which components and actions a rendered interface should contain.
yibie/awesome-jevA Jev UI-composition experiment inside the json-render website that selects from predefined component and property options.
logicrw/awesome-jev-projects
Frequently asked questions
How does json-render use Jev?
In an experimental compose path, Jev chooses components and actions from prepared candidates instead of an LLM writing the spec.
Can the AI use components outside my catalog?
No, output is constrained to the components you define.
Which platforms are supported?
Web frameworks, React Native, video, PDF, email, terminal and 3D, among others.
Related projects
React components that use Jev judgments to choose which component renders, how lists are ordered and whether affordances show.
ProjectbetaTypeScriptCommunity shadcn-style React components and interactive lab for building TypeSafe AI interfaces.
ProjectbetaTypeScriptVideo demo app showing Jev use cases with the AI SDK and shadcn/ui, from intent search and model picking to chat moderation.
LibraryprototypeTypeScriptPlayground comparing generative UI via an LLM writing json-render specs with Jev choosing and arranging prepared components.
LibraryprototypeTypeScriptLibrary that composes typed Jev judgments like reactive state in React and backend programs, with automatic batching and reuse.
HookbetaTypeScriptPrompt-first music studio where Jev makes every compositional choice, from plan to each bar pattern, rendered as editable MIDI.
ProjectbetaTypeScript