{"name":"json-render: The Generative UI Framework for Dynamic Interfaces","description":"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","url":"https://osrepos.com/repo/vercel-labs-json-render","source":"osrepos.com","sourceDescription":"This repository profile is provided by osrepos.com, an open source repository discovery platform.","repositoryProfile":"https://osrepos.com/repo/vercel-labs-json-render","generatedFor":"open source discovery and AI-assisted research","markdown":"https://osrepos.com/repo/vercel-labs-json-render.md","json":"https://osrepos.com/repo/vercel-labs-json-render.json","topics":["TypeScript","Generative UI","AI","UI Framework","Cross-Platform","Frontend","React","Vue"],"keywords":["TypeScript","Generative UI","AI","UI Framework","Cross-Platform","Frontend","React","Vue"],"stars":null,"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.","content":"## Introduction\n\njson-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.\n\n## Installation\n\nGetting started with json-render is straightforward. You can install the core package along with specific renderers for your chosen framework:\n\nbash\n# for React\nnpm install @json-render/core @json-render/react\n# for React with pre-built shadcn/ui components\nnpm install @json-render/shadcn\n# or for React Native\nnpm install @json-render/core @json-render/react-native\n# or for Vue\nnpm install @json-render/core @json-render/vue\n# or for Svelte\nnpm install @json-render/core @json-render/svelte\n# or for SolidJS\nnpm install @json-render/core @json-render/solid\n# for full Next.js apps\nnpm install @json-render/core @json-render/react @json-render/next\n# for 3D scenes\nnpm install @json-render/core @json-render/react-three-fiber @react-three/fiber @react-three/drei three\n# for terminal UIs\nnpm install @json-render/core @json-render/ink ink react\n# for PDF documents\nnpm install @json-render/core @json-render/react-pdf\n# for HTML email\nnpm install @json-render/core @json-render/react-email @react-email/components @react-email/render\n# for video\nnpm install @json-render/core @json-render/remotion\n\n\n## Examples\n\njson-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:\n\n*   **Web Frameworks**: React, Vue, Svelte, SolidJS, with pre-built shadcn/ui components available.\n*   **Mobile**: React Native for native mobile applications.\n*   **Full-stack**: Next.js for building complete applications with routes, layouts, and SSR.\n*   **3D Scenes**: React Three Fiber for creating immersive 3D experiences, including Gaussian Splatting.\n*   **Video**: Remotion for generating dynamic videos.\n*   **Documents**: React PDF for creating PDF documents from UI specs.\n*   **Email**: React Email for generating HTML/plain-text emails.\n*   **Images**: Render to SVG/PNG output for OG images or social cards.\n*   **Terminal UIs**: Ink for interactive command-line interfaces.\n\nThe 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:\n\ntsx\nimport { defineRegistry, Renderer } from \"@json-render/react\";\n// ... catalog definition ...\n\nconst spec = {\n  root: \"card-1\",\n  elements: {\n    \"card-1\": {\n      type: \"Card\",\n      props: { title: \"Hello\" },\n      children: [\"button-1\"],\n    },\n    \"button-1\": {\n      type: \"Button\",\n      props: { label: \"Click me\" },\n      children: [],\n    },\n  },\n};\n\n// defineRegistry creates a type-safe component registry\nconst { registry } = defineRegistry(catalog, { components });\n<Renderer spec={spec} registry={registry} />;\n\n\n## Why Use json-render?\n\njson-render stands out as a Generative UI framework due to several key advantages:\n\n*   **Guardrailed**: AI can only utilize components defined in your custom catalog, ensuring controlled and safe output.\n*   **Predictable**: The JSON output consistently matches your predefined schema, guaranteeing reliable results every time.\n*   **Fast**: It supports streaming, allowing UIs to render progressively as the AI model responds, leading to a faster user experience.\n*   **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.\n*   **Batteries Included**: Comes with 36 pre-built shadcn/ui components, ready for immediate use in web projects.\n\n## Links\n\n*   **GitHub Repository**: [https://github.com/vercel-labs/json-render](https://github.com/vercel-labs/json-render)\n*   **Docs & Playground**: [http://json-render.localhost:1355](http://json-render.localhost:1355)\n*   **Example Dashboard**: [http://dashboard-demo.json-render.localhost:1355](http://dashboard-demo.json-render.localhost:1355)\n*   **React Email Example**: [http://react-email-demo.json-render.localhost:1355](http://react-email-demo.json-render.localhost:1355)\n*   **Remotion Video Example**: [http://remotion-demo.json-render.localhost:1355](http://remotion-demo.json-render.localhost:1355)","metrics":{"detailViews":0,"githubClicks":0},"dates":{"published":null,"modified":"2026-08-12T16:18:34.000Z"}}