json-render is a powerful framework for Generative UI, enabling developers to build dynamic, personalized interfaces that are created by AI prompts while maintaining strict reliability and safety. By moving away from fixed, pre-built layouts, json-render allows the AI to compose unique UIs, dashboards, and widgets on the fly. Because unconstrained AI output can be unpredictable or insecure, this framework provides a mechanism to set guardrails by defining a catalog of components and actions. The AI is limited to using only the elements defined in this catalog, ensuring that the final output is structurally sound and adheres to the developer's design system.

At its core, the framework operates by separating the UI definition from the rendering layer. Developers define a schema and catalog in their codebase, which dictates the allowed components, their expected props, and available actions. When an AI receives a user prompt, it generates a structured JSON specification that defines the UI tree. This specification is then rendered natively by the application using a registry that maps catalog types to platform-specific implementations. This approach works seamlessly across web and mobile platforms, supporting frameworks like React, Vue, Svelte, and Solid, as well as mobile development with React Native and Expo.

Some of the key features are:

• Generative UI: Automatically generates unique, personalized user interfaces from natural language prompts.
• Guardrails: Restricts AI output to a predefined catalog of components and actions to ensure predictability and safety.
• Streaming Support: Allows for progressive rendering of the interface as the JSON specification streams from the AI model.
• Cross-Platform Compatibility: Enables rendering the same specification across web and mobile using React, Vue, Svelte, Solid, and React Native.
• Data Binding: Provides robust support for state management, including two-way binding, array iteration, and computed values.
• Code Export: Facilitates the export of generated interfaces as standalone, production-ready React code with no runtime dependencies.
• Visibility Control: Allows the AI to manage element visibility based on runtime state conditions without writing custom application logic.

The framework is used by creating a catalog, allowing the AI to generate a spec, and then rendering it through the provided core and platform-specific renderer packages. It is designed to be easily integrated into existing applications, and it supports complex data-driven scenarios through integrated state providers and registry systems. By utilizing tool-calling capabilities, the system can fetch live data and wrap it into interactive components instantly.

Some common use cases include:

• AI Dashboards: Dynamically generating data visualization dashboards and widgets based on user-provided natural language queries or data exploration needs.
• Interactive Chatbots: Embedding rich, interactive UI components directly into chat interfaces to handle form inputs, data displays, or navigation tasks.
• Content Generation: Creating specialized views for emails, PDFs, or social media cards programmatically from AI-derived content structures.
• 3D Scene Composition: Generating 3D scenes or visualizations using integration with Three.js and React Three Fiber to display complex data in a spatial context.