# json-render: The Generative UI Framework for Dynamic Interfaces This repository profile is provided by osrepos.com, an open source repository discovery platform. Source: osrepos.com Repository profile: https://osrepos.com/repo/vercel-labs-json-render Generated for open source discovery and AI-assisted research. json-render is a powerful Generative UI framework that allows developers to create dynamic, personalized user interfaces from natural language prompts. It ensures reliability by constraining AI-generated output to predefined components and actions, offering a predictable and safe way to build cross-platform UIs. GitHub: https://github.com/vercel-labs/json-render OSRepos URL: https://osrepos.com/repo/vercel-labs-json-render ## Summary json-render is a powerful Generative UI framework that allows developers to create dynamic, personalized user interfaces from natural language prompts. It ensures reliability by constraining AI-generated output to predefined components and actions, offering a predictable and safe way to build cross-platform UIs. ## Topics - TypeScript - Generative UI - AI - UI Framework - Cross-Platform - Frontend - React - Vue ## Repository Information Last analyzed by OSRepos: Wed Aug 12 2026 17:18:34 GMT+0100 (Western European Summer Time) Detail views: 0 GitHub clicks: 0 ## Safety Notice OSRepos shares public repositories for knowledge and discovery only. Review source code, dependencies, licenses, and security implications before running or installing anything. ## Content ## Introduction json-render is an innovative Generative UI framework developed by Vercel Labs. It empowers developers to build dynamic and personalized user interfaces by leveraging AI to generate UI specifications from natural language prompts. The framework ensures reliability and predictability by allowing developers to define a catalog of components and actions, effectively setting guardrails for the AI's output. This approach combines the flexibility of AI generation with the control and safety of structured UI development. ## Installation Getting started with json-render is straightforward. You can install the core package along with specific renderers for your chosen framework: bash # for React npm install @json-render/core @json-render/react # for React with pre-built shadcn/ui components npm install @json-render/shadcn # or for React Native npm install @json-render/core @json-render/react-native # or for Vue npm install @json-render/core @json-render/vue # or for Svelte npm install @json-render/core @json-render/svelte # or for SolidJS npm install @json-render/core @json-render/solid # for full Next.js apps npm install @json-render/core @json-render/react @json-render/next # for 3D scenes npm install @json-render/core @json-render/react-three-fiber @react-three/fiber @react-three/drei three # for terminal UIs npm install @json-render/core @json-render/ink ink react # for PDF documents npm install @json-render/core @json-render/react-pdf # for HTML email npm install @json-render/core @json-render/react-email @react-email/components @react-email/render # for video npm install @json-render/core @json-render/remotion ## Examples json-render boasts extensive cross-platform support, allowing you to render AI-generated UI specifications across a wide array of environments. Here are some of the supported renderers: * **Web Frameworks**: React, Vue, Svelte, SolidJS, with pre-built shadcn/ui components available. * **Mobile**: React Native for native mobile applications. * **Full-stack**: Next.js for building complete applications with routes, layouts, and SSR. * **3D Scenes**: React Three Fiber for creating immersive 3D experiences, including Gaussian Splatting. * **Video**: Remotion for generating dynamic videos. * **Documents**: React PDF for creating PDF documents from UI specs. * **Email**: React Email for generating HTML/plain-text emails. * **Images**: Render to SVG/PNG output for OG images or social cards. * **Terminal UIs**: Ink for interactive command-line interfaces. The framework's core idea involves defining a component catalog, implementing these components, and then rendering AI-generated JSON specifications. For instance, a basic React setup looks like this: tsx import { defineRegistry, Renderer } from "@json-render/react"; // ... catalog definition ... const spec = { root: "card-1", elements: { "card-1": { type: "Card", props: { title: "Hello" }, children: ["button-1"], }, "button-1": { type: "Button", props: { label: "Click me" }, children: [], }, }, }; // defineRegistry creates a type-safe component registry const { registry } = defineRegistry(catalog, { components }); ; ## Why Use json-render? json-render stands out as a Generative UI framework due to several key advantages: * **Guardrailed**: AI can only utilize components defined in your custom catalog, ensuring controlled and safe output. * **Predictable**: The JSON output consistently matches your predefined schema, guaranteeing reliable results every time. * **Fast**: It supports streaming, allowing UIs to render progressively as the AI model responds, leading to a faster user experience. * **Cross-Platform**: Build UIs for web (React, Vue, Svelte, Solid), mobile (React Native), video, PDF, email, 3D, and even terminal interfaces from the same component catalog. * **Batteries Included**: Comes with 36 pre-built shadcn/ui components, ready for immediate use in web projects. ## Links * **GitHub Repository**: [https://github.com/vercel-labs/json-render](https://github.com/vercel-labs/json-render) * **Docs & Playground**: [http://json-render.localhost:1355](http://json-render.localhost:1355) * **Example Dashboard**: [http://dashboard-demo.json-render.localhost:1355](http://dashboard-demo.json-render.localhost:1355) * **React Email Example**: [http://react-email-demo.json-render.localhost:1355](http://react-email-demo.json-render.localhost:1355) * **Remotion Video Example**: [http://remotion-demo.json-render.localhost:1355](http://remotion-demo.json-render.localhost:1355)