@vercel-labs/xstate

The Generative UI framework

View in AI SkillSafe app
Scanned · no findings
56300 downloads
0 stars
0 demos
SKILL.md
namexstate
descriptionXState 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

Embed badges

Add these to your README to show the skill's verification status.

SkillSafe verified badge
Verified badge
[![SkillSafe verified badge](https://api.skillsafe.ai/v1/badge/@vercel-labs/xstate/verified)](https://skillsafe.ai/skill/@vercel-labs/xstate/)
Installs badge
Installs badge
[![Installs badge](https://api.skillsafe.ai/v1/badge/@vercel-labs/xstate/installs)](https://skillsafe.ai/skill/@vercel-labs/xstate/)
Scan badge
Scan badge
[![Scan badge](https://api.skillsafe.ai/v1/badge/@vercel-labs/xstate/scan)](https://skillsafe.ai/skill/@vercel-labs/xstate/)
Eval pass rate badge
Eval pass rate
[![Eval pass rate badge](https://api.skillsafe.ai/v1/badge/@vercel-labs/xstate/eval)](https://skillsafe.ai/skill/@vercel-labs/xstate/)