Xstate
XState Store adapter for json-render's StateStore interface.
by vercel-labs · Apache-2.0
The skill
XState Store adapter for json-render's StateStore interface. Use when integrating json-render with @xstate/store for state management via @json-render/xstate.
@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 |
Use this skill
Connect your agent to the Skill Store MCP server and ask for it by ref: vercel-labs/xstate-62019659014.
Details
- Publisher
- vercel-labs
- Category
- Software Development › Frontend & UI
- License
- Apache-2.0
- Updated
- 2026-10-13
References
More from vercel-labs
- Playwright E2E Write and stabilise end-to-end browser tests
- Codegen Code generation utilities for json-render.
- Core Core package for defining schemas, catalogs, and AI prompt generation for json-render.
- Devtools React React adapter for the json-render devtools inspector.