# @xstate/svelte

> XState tools for Svelte

Latest version **5.0.1** (published 2026-10-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @xstate/svelte
pnpm add @xstate/svelte
yarn add @xstate/svelte
bun add @xstate/svelte
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.0.1 |
| Published | 2026-10-19 |
| First published | 2021-02-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 30292 |
| Author | David Khourshid |
| Maintainers | davidkpiano, andarist |
| Keywords | state, machine, statechart, scxml, state, graph, svelte, store |

## Links

- npm: https://www.npmjs.com/package/@xstate/svelte
- Repository: https://github.com/statelyai/xstate
- Homepage: https://github.com/statelyai/xstate/tree/main/packages/xstate-svelte#readme
- Issues: https://github.com/statelyai/xstate/issues
- npm.io page: https://npm.io/package/@xstate/svelte

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 5.0.1 (latest) — 2026-10-19
- 6.0.0-beta.0 (beta) — 2026-11-05
- 6.0.0-alpha.5 (alpha) — 2026-11-02
- 6.0.0-alpha.4 — 2026-10-19
- 6.0.0-alpha.3 — 2026-09-28
- 6.0.0-alpha.2 — 2026-09-22
- 6.0.0-alpha.1 — 2026-06-20
- 5.0.0 — 2025-06-19
- 4.0.5 — 2025-05-31
- 4.0.4 — 2025-05-12
- 4.0.3 — 2025-01-12
- 4.0.2 — 2024-12-24
- 4.0.1 — 2024-12-20
- 4.0.0 — 2024-11-12
- 3.0.5 — 2024-09-21
- … 13 more at https://npm.io/package/@xstate/svelte/versions

## README

# @xstate/svelte

This package contains utilities for using [XState](https://github.com/statelyai/xstate) with [Svelte](https://github.com/sveltejs/svelte).

- [Read the full documentation in the XState docs](https://stately.ai/docs/xstate-svelte).
- [Read our contribution guidelines](https://github.com/statelyai/xstate/blob/main/CONTRIBUTING.md).

## Quick Start

1. Install `xstate` and `@xstate/svelte`:

```bash
npm i xstate @xstate/svelte
```

**Via CDN**

```html
<script src="https://unpkg.com/@xstate/svelte/dist/xstate-svelte.min.js"></script>
```

By using the global variable `XStateSvelte`

2. Import `useMachine`

```svelte
<script>
  import { useMachine } from '@xstate/svelte';
  import { createMachine } from 'xstate';

  const toggleMachine = createMachine({
    id: 'toggle',
    initial: 'inactive',
    states: {
      inactive: {
        on: { TOGGLE: 'active' }
      },
      active: {
        on: { TOGGLE: 'inactive' }
      }
    }
  });

  const { state, send } = useMachine(toggleMachine);
</script>

<button on:click={() => send('TOGGLE')}>
  {$state.value === 'inactive'
    ? 'Click to activate'
    : 'Active! Click to deactivate'}
</button>
```

---
_Source: https://npm.io/package/@xstate/svelte · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._