Claude MarketplacesSubmit
vercel-labs avatar

Json Render React

vercel-labs/json-renderOfficial

This is the React renderer for the json-render library that turns JSON specifications into live React component trees. You define a catalog with Zod schemas for props validation, wire up your actual React components, and then render JSON specs that reference them. It includes two-way state binding with `$bindState`, conditional rendering based on state paths, an event system that maps component events to actions, and built-in form validation. The `useBoundProp` hook handles the state sync for form inputs cleanly. Honestly most useful if you're building UI builders, design tools, or letting AI generate interfaces, since you're trading some developer ergonomics for the ability to serialize and dynamically render component trees. The type safety from catalog to components is solid though.

skills.sh installs
391
GitHub stars
19.5K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add vercel-labs/json-render --skill json-render-react --agent claude-code

Installs into .claude/skills of the current project.

Files

This is the React renderer for the json-render library that turns JSON specifications into live React component trees. You define a catalog with Zod schemas for props validation, wire up your actual React components, and then render JSON specs that reference them. It includes two-way state binding with `$bindState`, conditional rendering based on state paths, an event system that maps component events to actions, and built-in form validation. The `useBoundProp` hook handles the state sync for form inputs cleanly. Honestly most useful if you're building UI builders, design tools, or letting AI generate interfaces, since you're trading some developer ergonomics for the ability to serialize and dynamically render component trees. The type safety from catalog to components is solid though.

Browse the repository on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent 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 language

Details

Repository
github.com/vercel-labs/json-render
Categories
Frontend Development, AI & Agent Building, Cloud & Infrastructure
First seen
Jun 3, 2026

More from vercel-labs/json-render

All 31

Recommended

More Frontend Development
1gohypergiant avataraccelint-nextjs-best-practicesgohypergiant/agent-skillsNext.js performance optimization and best practices. Use when writing Next.js code (App Router or Pages Router); implementing Server Components, Server Actions,386skills.sh installs
2bobmatnyc avatarnextjs-v16bobmatnyc/claude-mpm-skillsNext.js 16 migration guide (async request APIs, "use cache", Turbopack)380skills.sh installs
3secondsky avatarreact-best-practicessecondsky/claude-skillsReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js c380skills.sh installs
4davila7 avatarvercel-react-best-practicesdavila7/claude-code-templatesReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js c376skills.sh installs
5pedronauck avatarvercel-react-best-practicespedronauck/skillsReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js c360skills.sh installs
6jezweb avatarresponsive-imagesjezweb/claude-skillsImplement performant responsive images with srcset, sizes, lazy loading, and modern formats (WebP, AVIF). Covers aspect-ratio for CLS prevention, picture elemen358skills.sh installs