xstate
This adapter bridges XState Store atoms into json-render's StateStore interface, letting you manage application state through @xstate/store. Pass an atom to the adapter and wrap your json-render components with the resulting store provider.
xstate integrates XState Store atoms with json-render's state management layer.
AI-generated summary based on this skill's SKILL.md
Install
vercel-labs/json-render/xstate · repository language: TypeScript
git clone https://github.com/vercel-labs/json-render
cp -r json-render/skills/xstate ~/.claude/skills/xstatenpx skillfed install vercel-labs/json-render/xstateFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do you integrate XState Store with json-render?
XState's adapter bridges @xstate/store atoms into json-render's StateStore interface. Create an atom using @xstate/store, pass it to the XState adapter, and wrap your json-render components with the resulting store provider. This lets you manage application state through XState while rendering with json-render.
What is the xstate store adapter json-render connection?
The XState adapter connects atomic state from @xstate/store to json-render components by implementing json-render's StateStore interface. You instantiate an atom, feed it to the adapter, and the adapter returns a provider that injects state into your json-render component tree.
How do you set up StateStore adapter using @xstate/store atom?
XState's StateStore adapter accepts an @xstate/store atom as its input. Once configured with your atom, the adapter exposes a provider component that you wrap around json-render components. This setup connects XState's atomic state management to json-render's rendering system.
What does the XState adapter enable for json-render?
XState adapter enables state management integration by letting json-render components consume state from @xstate/store atoms. Instead of managing state separately, you define atoms in XState, pass them through the adapter, and json-render accesses that state via the provider.
Can you wire XState atom directly to json-render?
XState atoms connect to json-render through the dedicated adapter, not directly. The adapter translates @xstate/store's atom interface into json-render's StateStore contract, ensuring compatibility and proper state flow to your components.
SKILL.md
rendered from the published skill — quoted content, verbatim
@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 |
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/xstate/SKILL.md