Xstate

This adapter bridges json-render's state management with XState Store, letting you use an @xstate/store atom as your backend instead of json-render's default state system. You create an atom with createAtom, wrap it with xstateStoreStateStore, and pass it to StateProvider. The main reason you'd reach for this is if you're already using XState for state machines elsewhere in your app and want consistent state management across both your declarative JSON UI and your regular components. It's a clean integration point, though you'll need to weigh whether the added dependency is worth it versus just using json-render's built-in state unless you really need XState's features.

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

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

@json-render/xstate

XState Store adapter for json-render's StateStore interface. Wire an @xstate/store atom as the state backend for json-render.

Installation

npm install @json-render/xstate @json-render/core @json-render/react @xstate/store

Requires @xstate/store v3+.

Usage

import { createAtom } from "@xstate/store";
import { xstateStoreStateStore } from "@json-render/xstate";
import { StateProvider } from "@json-render/react";

// 1. Create an atom
const uiAtom = createAtom({ count: 0 });

// 2. Create the json-render StateStore adapter
const store = xstateStoreStateStore({ atom: uiAtom });

// 3. Use it
<StateProvider store={store}>
  {/* json-render reads/writes go through @xstate/store */}
</StateProvider>