XState v6 alpha
Use a machine in Svelte
Run XState logic in a Svelte component.
npm install xstate@alpha @xstate/svelte@alpha<script lang="ts">
import { useActor } from '@xstate/svelte';
import { createMachine } from 'xstate';
const machine = createMachine({
initial: 'inactive',
states: {
inactive: { on: { toggle: { target: 'active' } } },
active: { on: { toggle: { target: 'inactive' } } }
}
});
const { snapshot, send } = useActor(machine);
</script>
<button on:click={() => send({ type: 'toggle' })}>{$snapshot.value}</button>Use useActor(...) for UI driven by the whole snapshot, such as a wizard step or request status. Use useActorRef(...) with useSelector(...) for a shared cart or session actor when a component only needs one value.
TypeScript
The helper infers snapshot and event types from the actor logic.
Svelte helpers cheatsheet
const { snapshot, send, actorRef } = useActor(logic, options);
const actorRef = useActorRef(logic, options);