# json-render

> Generative UI framework rendering LLM JSON streams into predefined components safely

json-render is an open-source framework from Vercel Labs for building generative user interfaces. Instead of returning raw markdown or arbitrary code, LLMs output structured JSON constrained to a predefined catalog of components, actions, and data bindings. The client progressively streams and renders the interface across React or React Native, with support for exporting the output as standalone Next.js code.

Website: https://json-render.dev/

Also at: https://github.com/vercel-labs/json-render

## What it is for

- Render AI tool results and chat responses into structured, interactive dashboards and forms
- Constrain LLM interface generation to an approved set of design system components
- Stream dynamic user interfaces progressively as JSON arrives from language models
- Export AI-generated UI prototypes as standalone Next.js and Tailwind source code

## Features

- Catalog guardrails defining allowed components, props schemas, and actions
- Progressive streaming renderer for React and React Native
- catalog.prompt() utility to generate AI system prompts directly from component schemas
- Two-way state management and data binding ($state, $item, $index, $bindState)
- Standalone code export via @json-render/codegen into Next.js and Tailwind projects
- Comprehensive UI catalog including metrics, graphs, tables, forms, and dialogs

## Pricing

Open source. Free and open source

## Details

- Type: Web app
- Category: [Development](https://xiry.app/topics/development.md)
- Open source: yes
- Platforms: Code library, Web, iOS, Android
- For: React and React Native developers building AI chat, agent, or prompt-driven interfaces
- Alternative to: Vercel AI SDK Generative UI
- Tags: generative ui, react, react native, llm, ai sdk, structured outputs, ui components

## Why it was saved

- [@rauchg, 15 January 2026](https://x.com/rauchg/status/2011605996561649720): Building block for LLM-driven UI: instead of free-form output, the model emits a guardrailed component schema (Card, Badge, Heading, Select, Textarea, Button, Stack, Text, etc.) that renders predictably and fast.
- [@ctatedev, 21 January 2026](https://x.com/ctatedev/status/2013772881981784091): Pairs the predictability and guardrails of Generative UI with traditional code generation: you can prompt a dashboard, form or widget, watch it render from a safe component set, then export editable Next.js + Tailwind source instead of being locked into runtime JSON.
- [@meabed, 23 February 2026](https://x.com/meabed/status/2025728065691881603): Shows a concrete pattern for turning AI tool results into structured, interactive UI instead of plain markdown text.
- [@ctatedev, 7 February 2026](https://x.com/ctatedev/status/2020178207786336473): Lets a builder constrain generative AI UI to a custom component catalog with minimal prompt engineering — the AI gets a complete, up-to-date system prompt straight from the schema.
- [@ctatedev, 9 February 2026](https://x.com/ctatedev/status/2020767354108453020): Enables dynamic, personalized per-user UIs (UGI) without sacrificing reliability — a pattern for building prompt-driven interfaces in apps; the video demos a GitHub-style interface generated on an iPhone from prompts like "Github" and "Only show issues on the first day".
- [@ctatedev, 15 June 2026](https://x.com/ctatedev/status/2066555279295008908): A new way to surface agent work as interactive UI; powered by AI SDK's experimental HarnessAgent + json-render. Reference implementation is called \`harness-chat\`.

## Related

- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [Spell UI](https://xiry.app/resources/spell-ui): Refined, copy-paste React and Tailwind CSS components with micro-interactions (GitHub repo, Open source)
- [Boneyard](https://xiry.app/resources/boneyard): Auto-generates pixel-perfect skeleton screens directly from your real rendered DOM (GitHub repo, Open source)
- [coss ui](https://xiry.app/resources/coss-ui): Modern UI component library built on top of Base UI (Web app, Free)
- [Liquid Glass](https://xiry.app/resources/liquid-glass): React component library for Apple-style liquid glass and blur effects. (Website, Open source)
- [MicroKit UI](https://xiry.app/resources/microkit-ui): Free copy-paste React and CSS micro-interactions for modern web interfaces (Website, Free)

Updated 11 October 2026. Page: https://xiry.app/resources/json-render

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.