Json Render Generative Ui
This is a framework for letting AI generate UIs by outputting JSON instead of raw code. You define a catalog of allowed components (buttons, cards, metrics, whatever), the AI returns a flat JSON spec, and json-render safely renders it across React, Vue, Svelte, React Native, PDF, email, even video and 3D. The key insight is constraint: instead of asking GPT to write arbitrary JSX, you give it 36 shadcn components or your own primitives, and it composes them. Works with streaming, so UIs can render progressively as the model generates tokens. Honestly most useful when you need dashboards or reports generated from natural language prompts without eval'ing LLM output directly.
- skills.sh installs
- 1.3K
- GitHub stars
- 61
- last updated
- Jul 14, 2026
Install
$ npx -y skills add aradotso/trending-skills --skill json-render-generative-ui --agent claude-codeInstalls into .claude/skills of the current project.
Files
json-render Generative UI Framework
Skill by ara.so — Daily 2026 Skills collection.
json-render is a Generative UI framework that lets AI generate dynamic interfaces from natural language prompts, constrained to a predefined component catalog. AI outputs JSON; json-render renders it safely and predictably across any platform.
Installation
# React (core)
npm install @json-render/core @json-render/react
# React + shadcn/ui (36 pre-built components)
npm install @json-render/shadcn
# React Native
npm install @json-render/core @json-render/react-native
# Vue
npm install @json-render/core @json-render/vue
# Svelte
npm install @json-render/core @json-render/svelte
# SolidJS
npm install @json-render/core @json-render/solid
# Video (Remotion)
npm install @json-render/core @json-render/remotion
# PDF
npm install @json-render/core @json-render/react-pdf
# Email
npm install @json-render/core @json-render/react-email @react-email/components @react-email/render
# 3D (React Three Fiber)
npm install @json-render/core @json-render/react-three-fiber @react-three/fiber @react-three/drei three
Sponsors
Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthly
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any language
Agent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/aradotso/trending-skills
- First seen
- Apr 16, 2026
