React Native

Turns JSON specifications into native React Native UIs with a full component catalog, data binding, and action handling baked in. You get all the standard mobile components (buttons, inputs, cards, modals) plus visibility conditions, dynamic props via expressions like `$bindState`, and a `Pressable` + `setState` pattern for interactive flows. The two-way binding works naturally on component value props instead of requiring explicit statePath configuration. Useful when you're building component-driven mobile apps from JSON specs, rendering AI-generated UIs, or need a catalog-based approach to mobile layouts. The external store support lets you plug in your own state management if needed.

skills.sh installs: 3.3K
GitHub stars: 19.5K
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

@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>,
});

SKILL.md on GitHub

Details

Repository: github.com/vercel-labs/json-render
Categories: Frontend Development, AI & Agent Building, Cloud & Infrastructure, Mobile Development
First seen: May 16, 2026