Xstate
Back json-render’s StateProvider with an @xstate/store atom so UI state updates flow through XState instead of a custom store.
Overview
xstate is an agent skill for the Build phase that integrates @xstate/store with json-render via the xstateStoreStateStore StateStore adapter.
Install
npx skills add https://github.com/vercel-labs/json-render --skill xstateWhat is this skill?
- `xstateStoreStateStore({ atom })` implements json-render’s `StateStore` against `createAtom` from @xstate/store v3+
- Three-step flow: create atom → adapter → wrap tree in `StateProvider` from @json-render/react
- Explicit npm deps: @json-render/xstate, @json-render/core, @json-render/react, @xstate/store
- Documents required `atom` option typed as `Atom<StateModel>` holding the json-render state model
- Reads and writes from json-render components route through the XState store atom
- Requires @xstate/store v3+
- 3 documented setup steps (atom, adapter, provider)
Adoption & trust: 561 installs on skills.sh; 15k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You use json-render for dynamic UI but want state held in @xstate/store without writing a custom StateStore bridge.
Who is it for?
Builders combining json-render with XState Store v3+ on React agent-generated interfaces.
Skip if: Projects not using json-render or teams standardizing on Redux/Zustand without an adapter.
When should I use this skill?
Integrating json-render with @xstate/store for state management via @json-render/xstate.
What do I get? / Deliverables
Your React tree uses StateProvider backed by an XState atom so json-render patches sync with your store model.
- Configured StateProvider with xstate-backed StateStore
- Atom holding json-render StateModel
Recommended Skills
Journey fit
How it compares
Frontend state adapter doc—not a full XState machine designer or json-render component catalog.
Common Questions / FAQ
Who is xstate for?
Solo frontend developers and agent users building json-render UIs who already depend on @xstate/store for client state.
When should I use xstate?
During Build/frontend when scaffolding StateProvider, migrating json-render from another store, or debugging read/write paths through an XState atom.
Is xstate safe to install?
It documents npm packages and example TSX only—review the Security Audits panel on this page for the parent json-render skill repo.
SKILL.md
READMESKILL.md - Xstate
# @json-render/xstate [XState Store](https://stately.ai/docs/xstate-store) adapter for json-render's `StateStore` interface. Wire an `@xstate/store` atom as the state backend for json-render. ## Installation ```bash npm install @json-render/xstate @json-render/core @json-render/react @xstate/store ``` Requires `@xstate/store` v3+. ## Usage ```tsx 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 |