json-render-react-native

Q: How do I install json-render-react-native?

Run npx skills add https://github.com/vercel-labs/json-render --skill json-render-react-native in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/json-render-react-native/ (personal) or .claude/skills/json-render-react-native/ (project).

by vercel-labs OfficialMobile

React Native renderer for json-render that turns JSON specs into native mobile UIs. Use when working with @json-render/react-native, building React Native UIs from JSON, creating mobile component catalogs, or rendering AI-generated specs on mobile.

Installs: 142
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

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

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads json-render-react-native automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

@json-render/react-native

React Native renderer that converts JSON specs into native mobile component trees with standard components, data binding, visibility, actions, and dynamic props.

Quick Start

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react-native/schema";
import {
  standardComponentDefinitions,
  standardActionDefinitions,
} from "@json-render/react-native/catalog";
import { defineRegistry, Renderer, type Components } from "@json-render/react-native";
import { z } from "zod";

// Create catalog with standard + custom components
const catalog = defineCatalog(schema, {
  components: {
    ...standardComponentDefinitions,
    Icon: {
      props: z.object({ name: z.string(), size: z.number().nullable(), color: z.string().nullable() }),
      slots: [],
      description: "Icon display",
    },
  },
  actions: standardActionDefinitions,
});

// Register only custom components (standard ones are built-in)
const { registry } = defineRegistry(catalog, {
  components: {
    Icon: ({ props }) => <Ionicons name={props.name} size={props.size ?? 24} />,
  } as Components<typeof catalog>,
});

// Render
function App({ spec }) {
  return (
    <StateProvider initialState={{}}>
      <VisibilityProvider>
        <ActionProvider handlers={{}}>
          <Renderer spec={spec} registry={registry} />
        </ActionProvider>
      </VisibilityProvider>
    </StateProvider>
  );
}

Standard Components

Layout

Container - wrapper with padding, background, border radius
Row - horizontal flex layout with gap, alignment
Column - vertical flex layout with gap, alignment
ScrollContainer - scrollable area (vertical or horizontal)
SafeArea - safe area insets for notch/home indicator
Pressable - touchable wrapper that triggers actions on press
Spacer - fixed or flexible spacing
Divider - thin line separator

Content

Heading - heading text (levels 1-6)
Paragraph - body text
Label - small label text
Image - image display with sizing modes
Avatar - circular avatar image
Badge - small status badge
Chip - tag/chip for categories

Input

Button - pressable button with variants
TextInput - text input field
Switch - toggle switch
Checkbox - checkbox with label
Slider - range slider
SearchBar - search input

Feedback

Spinner - loading indicator
ProgressBar - progress indicator

Composite

Card - card container with optional header
ListItem - list row with title, subtitle, accessory
Modal - bottom sheet modal

Visibility Conditions

Use visible on elements. Syntax: { "$state": "/path" }, { "$state": "/path", "eq": value }, { "$state": "/path", "not": true }, [ cond1, cond2 ] for AND.

Pressable + setState Pattern

Use Pressable with the built-in setState action for interactive UIs like tab bars:

{
  "type": "Pressable",
  "props": {
    "action": "setState",
    "actionParams": { "statePath": "/activeTab", "value": "home" }
  },
  "children": ["home-icon", "home-label"]
}

Dynamic Prop Expressions

Any prop value can be a data-driven expression resolved at render time:

{ "$state": "/state/key" } - reads from state model (one-way read)
{ "$bindState": "/path" } - two-way binding: use on the natural value prop (value, checked, pressed, etc.) of form components.
{ "$bindItem": "field" } - two-way binding to a repeat item field. Use inside repeat scopes.
{ "$cond": <condition>, "$then": <value>, "$else": <value> } - conditional value

{
  "type": "TextInput",
  "props": {
    "value": { "$bindState": "/form/email" },
    "placeholder": "Email"
  }
}

Components do not use a statePath prop for two-way binding. Use { "$bindState": "/path" } on the natural value prop instead.

Built-in Actions

The setState action is handled automatically by ActionProvider and updates the state model directly, which re-evaluates visibility conditions and dynamic prop expressions:

{ "action": "setState", "actionParams": { "statePath": "/activeTab", "value": "home" } }

Providers

Provider	Purpose
`StateProvider`	Share state across components (JSON Pointer paths). Accepts optional `store` prop for controlled mode.
`ActionProvider`	Handle actions dispatched from components
`VisibilityProvider`	Enable conditional rendering based on state
`ValidationProvider`	Form field validation

External Store (Controlled Mode)

Pass a StateStore to StateProvider (or JSONUIProvider / createRenderer) to use external state management:

import { createStateStore, type StateStore } from "@json-render/react-native";

const store = createStateStore({ count: 0 });

<StateProvider store={store}>{children}</StateProvider>

store.set("/count", 1); // React re-renders automatically

When store is provided, initialState and onStateChange are ignored.

Key Exports

Export	Purpose
`defineRegistry`	Create a type-safe component registry from a catalog
`Renderer`	Render a spec using a registry
`schema`	React Native element tree schema
`standardComponentDefinitions`	Catalog definitions for all standard components
`standardActionDefinitions`	Catalog definitions for standard actions
`standardComponents`	Pre-built component implementations
`createStandardActionHandlers`	Create handlers for standard actions
`useStateStore`	Access state context
`useStateValue`	Get single value from state
`useBoundProp`	Two-way state binding via `$bindState`/`$bindItem`
`useStateBinding`	(deprecated) Legacy two-way binding by path
`useActions`	Access actions context
`useAction`	Get a single action dispatch function
`useUIStream`	Stream specs from an API endpoint
`createStateStore`	Create a framework-agnostic in-memory `StateStore`
`StateStore`	Interface for plugging in external state management

FAQ

What does the json-render-react-native skill do?

How do I install json-render-react-native?

Run npx skills add https://github.com/vercel-labs/json-render --skill json-render-react-native in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/json-render-react-native/ (personal) or .claude/skills/json-render-react-native/ (project).

Which AI agents can use json-render-react-native?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is json-render-react-native safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains json-render-react-native?

It is published by vercel-labs in vercel-labs/json-render, and it is an official skill from the maker of the technology it covers. It has 142 recorded installs.

More from vercel-labs/json-render

View all →

react

vercel-labs/json-render

React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.

OfficialFrontend & Design16.4K installs

core

vercel-labs/json-render

Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core, defining schemas, creating catalogs, or building JSON specs for UI/video generation.

OfficialFrontend & Design15.1K installs

codegen

vercel-labs/json-render

Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing specs, or serializing props for @json-render/codegen.

OfficialFrontend & Design8.9K installs

vercel-labs/json-render

Next.js renderer for json-render that turns JSON specs into full Next.js applications with routes, layouts, SSR, and metadata. Use when working with @json-render/next, building Next.js apps from JSON specs, or creating AI-generated multi-page applications.

OfficialFrontend & Design8.6K installs

devtools

vercel-labs/json-render

Drop-in inspector panel for any json-render app. Use when the user wants to debug a generative UI, inspect the spec tree, edit state at runtime, see dispatched actions, follow stream patches live, browse a catalog, or pick DOM elements to find their spec keys. Triggers include "add devtools", "debug json-render", "inspect the spec", "why is this element not rendering", "see the state at runtime", or requests to tap streams / capture action logs for @json-render/devtools.

OfficialCode Quality & Workflow8.3K installs

directives

vercel-labs/json-render

Pre-built custom directives for json-render — formatting, math, string manipulation, and i18n. Use when working with @json-render/directives, defining custom directives with defineDirective, or adding $format, $math, $concat, $count, $truncate, $pluralize, $join, or $t to specs.

OfficialEducation & Science8K installs

Popular mobile skills

View category →

design-mobile-apps

designed-by-ai/skills

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.

Mobile1.1M installs

ios-design

uizze.sh

Design and review iOS UI/UX for iPhone apps in SwiftUI, UIKit, or React Native. Use for mobile app design, screen redesigns, navigation flows, typography, forms, keyboard and safe-area layout, and accessibility checks. Apply Apple Human Interface Guidelines and consult real product references through the optional Uizze connection.

Mobile416.5K installs

vercel-react-native-skills

vercel-labs/agent-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

OfficialMobile256.7K installs

animate-expo

emilkowalski/skills

Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.

Mobile140.1K installs

xcode-project-setup

firebase/agent-skills

Safely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).

OfficialMobile131.2K installs

firebase-remote-config-basics

firebase/agent-skills

Manages Firebase Remote Config templates, feature flags, loading strategies, and SDKs (Android, iOS). Use when downloading/deploying remoteconfig JSON templates, managing version history/feature flags, setting in-app defaults, fetchAndActivate(), real-time listeners, or SDK setup. Don't use for Firebase Hosting, Auth, Firestore, Data Connect, Crashlytics, or App Hosting.

OfficialMobile121.7K installs

json-render-react-native

Install

Install

Describe the task

Review the result

SKILL.md

@json-render/react-native

Quick Start

Standard Components

Layout

Content

Input

Feedback

Composite

Visibility Conditions

Pressable + setState Pattern

Dynamic Prop Expressions

Built-in Actions

Providers

External Store (Controlled Mode)

Key Exports

FAQ

More from vercel-labs/json-render

Popular mobile skills