xstate

Some apps keep everything they know in one XState store; this hands that store to json-render to read and write, so the generated screen is not carrying a second copy of the same data.

WHEN TO USE

SCOPE

USE FOR

Back a json-render app's state with an @xstate/store atom instead of the default in-memory store.
Share one @xstate/store atom between json-render and the rest of your app's logic.

This is a saved copy of the skill's SKILL.md instructions. It may differ from the upstream file or the version you install.

In this document (4)

@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>

API

`xstateStoreStateStore(options)`

Creates a StateStore backed by an @xstate/store atom.

Option	Type	Required	Description
`atom`	`Atom<StateModel>`	Yes	An `@xstate/store` atom (from `createAtom`) holding the json-render state model

Local tool required

1 FOR YOU

01
Install @xstate/store v3 or later
Install @json-render/xstate alongside @json-render/core, @json-render/react, and @xstate/store v3+ as peer dependencies.

Listed as free: Connected services may require an account or charge fees.
Installation: One command — usually under 2 minutes.

Not standalone. This skill ships with vercel-labs/json-render and only works together with that tool — install the tool first, then add this skill.

Run this outside your AI tool, using Node.js 22.20.0 or newer. Skills CLI 1.7.2 skips skill selection; prompts cancel installation without an interactive terminal. If choosing Project when asked about installation scope, open your project's folder before running this.

Install checklist

Check selected tools if a picker appears; Claude Code may be unchecked under Additional agents. ↑/↓ moves, Space toggles selections, Enter confirms.
Without a tool picker, check Installing to: for your intended tool. Stop if it names a different tool.
If asked, choose Symlink (Recommended) for shared files or Copy to all agents for separate copies; review the summary before confirming installation.
Install the find-skills skill? defaults to Yes, adding another skill for all projects. Choose No if you don't want that extra installation.

Skills CLI 1.7.2 sends install data to skills.sh by default, including the source, skill names, target tools and file details; GitHub sources are reported only when GitHub confirms the repository is public, while other remote sources can also be reported. Confirmed-public GitHub sources also trigger a security-audit request. Before installing, set the environment variable DO_NOT_TRACK=1 or DISABLE_TELEMETRY=1 to disable both.

npx skills add vercel-labs/json-render --skill "xstate" --full-depth

After installing for Claude Code, open it in the installation project if you chose Project; Global makes the skill available across projects on this computer. Once Claude Code loads the skill, its description helps Claude decide when to use it.

If installation created a top-level skills folder that did not exist when your Claude Code session started, run /reload-skills in that session. Run it again after later changes in that folder.

What's inside

Files included with this skill.

View on GitHub

The repository is licensed under Apache-2.0 — use, modification, and redistribution are allowed under that license’s terms.

View the repository’s license file on GitHub →

@json-render/xstate

Installation

Usage

API

xstateStoreStateStore(options)

Local tool required

What's inside

More skills

codegen

core

devtools

directives

image

ink

`xstateStoreStateStore(options)`