Skip to main content
SkillJury
Back to registry

json-render-react

vercel-labs/json-render

React renderer that converts JSON specs into React component trees.

Installs391
Install command
npx skills add https://github.com/vercel-labs/json-render --skill json-render-react
Security audits
Gen Agent Trust HubPASS
SocketPASS
SnykPASS
About this skill
React renderer that converts JSON specs into React component trees. The React schema uses an element tree format: Use visible on elements to show/hide based on state. New syntax: { "$state": "/path" } , { "$state": "/path", "eq": value } , { "$state": "/path", "not": true } , { "$and": [cond1, cond2] } for AND, { "$or": [cond1, cond2] } for OR. Helpers: visibility.when("/path") , visibility.unless("/path") , visibility.eq("/path", val) , visibility.and(cond1, cond2) , visibility.or(cond1, cond2) . Pass a StateStore to StateProvider (or JSONUIProvider / createRenderer ) to use external state management (Redux, Zustand, XState, etc.): When store is provided, initialState and onStateChange are ignored. Any prop value can be a data-driven expression resolved by the renderer before components receive props: Components do not use a statePath prop for two-way binding. Use { "$bindState": "/path" } on the natural value prop instead. Components receive already-resolved props.

Source description provided by the upstream skill listing. Community reviews and install context appear in the sections below.

Community Reviews

Latest reviews

Sign in to review

No community reviews yet. Be the first to review.

Browse this skill in context
FAQ
What does json-render-react do?

React renderer that converts JSON specs into React component trees.

Is json-render-react good?

json-render-react does not have approved reviews yet, so SkillJury cannot publish a community verdict.

What agent does json-render-react work with?

json-render-react currently lists compatibility with codex, gemini-cli, opencode, kimi-cli, amp, github-copilot.

What are alternatives to json-render-react?

Skills in the same category include telegram-bot-builder, flutter-app-size, sharp-edges, iterative-retrieval.

How do I install json-render-react?

npx skills add https://github.com/vercel-labs/json-render --skill json-render-react

telegram-bot-builderflutter-app-sizesharp-edgesiterative-retrieval
Related skills

More from vercel-labs/json-render

json-render-core

by vercel-labs/json-render

340

Core package for schema definition, catalog creation, and spec streaming.

Software EngineeringFrontend and DesignFirst seen Feb 5, 2026

core

by vercel-labs/json-render

184

Core package for schema definition, catalog creation, and spec streaming.

Software EngineeringFrontend and Design

json-render-remotion

by vercel-labs/json-render

153

Remotion renderer that converts JSON timeline specs into video compositions.

Software EngineeringDevOps and CloudFirst seen Feb 5, 2026

json-render-shadcn

by vercel-labs/json-render

151

Pre-built shadcn/ui component definitions and implementations for json-render. Provides 36 components built on Radix UI + Tailwind CSS.

Software EngineeringFrontend and DesignFirst seen Feb 16, 2026
Related skills

Alternatives in Software Engineering

telegram-bot-builder

by sickn33/antigravity-awesome-skills

998

Source details, install context, and public review data are available on the full page.

Software EngineeringFrontend and DesignFirst seen Jan 18, 2026

flutter-app-size

by flutter/skills

996

Analyzes and optimizes Flutter application size by measuring build artifacts, generating size analysis reports, utilizing Dart DevTools for component breakdown, and implementing specific size reduction strategies such as debug info splitting, resource compression, and platform-specific tree-shaking. Assumes a...

Software EngineeringFrontend and Design

sharp-edges

by trailofbits/skills

994

Evaluates whether APIs, configurations, and interfaces are resistant to developer misuse. Identifies designs where the "easy path" leads to insecurity.

Software EngineeringFrontend and DesignFirst seen Jan 18, 2026

iterative-retrieval

by affaan-m/everything-claude-code

993

Solves the "context problem" in multi-agent workflows where subagents don't know what context they need until they start working.

Software EngineeringFrontend and DesignFirst seen Jan 25, 2026