# Source: https://stately.ai/docs.mdx

# Stately + XState docs (/docs)


import { LayoutIcon, BookOpenTextIcon, CodeIcon, RocketIcon } from 'lucide-react';
import { Cards, Card } from 'fumadocs-ui/components/card';

## Welcome to the Stately and XState docs

[Stately.ai](studio) is a visual software modeling platform for modeling your app & business logic as state machines/statecharts and actors, and scales to any level of complexity.

<div className="grid grid-cols-1 md:grid-cols-[400px_1fr] gap-4 items-start">
  <div id="xstate">
    <svg alt="XState" viewBox="0 0 818 222" xmlns="http://www.w3.org/2000/svg" className="w-full">
      <g fill="currentColor" fillRule="evenodd">
        <path d="M349.953 70.14c20.78 0 33.34 8.767 35.358 24.687l.061.48H373.49l-.074-.333c-2.34-10.754-9.356-15.342-23.463-15.342-12.799 0-20.752 5.323-20.752 13.889 0 8.456 3.477 12.681 24.072 15.378 21.535 2.94 34.883 8.334 34.883 26.096 0 15.089-15.264 26.467-35.5 26.467-29.518 0-37.608-15.437-39.196-28.39l-.059-.478h12.76l.054.363c1.47 9.876 5.691 19.016 26.438 19.016 13.178 0 22.74-6.83 22.74-16.239 0-10.026-5.659-13.879-24.218-16.485-17.819-2.376-34.307-7.016-34.307-24.738 0-14.122 13.914-24.371 33.085-24.371Zm122.576 1.11v11.316h-29.547v77.787H429.79V82.566h-29.547V71.25h72.285Zm52.908 0 34.709 89.103h-13.108l-9.947-25.427h-41.344l-9.8 25.427h-12.549l35.283-89.104h16.756Zm108.826 0v11.316h-29.547v77.787h-13.188V82.569H561.98V71.252h72.282v-.003Zm81.737 0v11.316h-49.311v27.44h25.027v11.195h-25.027v27.832H716v11.317h-62.5v-89.1H716ZM516.49 81.711l-16.154 42.994h32.306l-16.153-42.994ZM106.363 27l33.464.272c3.251.026 6.31 1.54 8.304 4.108l119.56 154.056c2.71 3.488.22 8.564-4.192 8.564h-35.035c-3.31 0-6.432-1.543-8.44-4.172l-33.345-45.635-36.905 45.777a10.623 10.623 0 0 1-8.33 4.03H106.32c-4.437 0-6.917-5.122-4.165-8.603l58.543-74.144-58.595-75.718c-2.68-3.51-.154-8.569 4.263-8.532Zm157.091 0c4.46-.034 6.973 5.108 4.207 8.603l-52.239 66.006c-3.726-2.932-32.644-27.14-4.745-59.556 0 0 2.183-2.554 4.435-5.195l.436-.511.435-.51a676.11 676.11 0 0 0 3.842-4.533c2.759-3.339 5.03-4.005 8.247-4.03L263.454 27Z" />
      </g>
    </svg>
  </div>

  <div>
    <a href="/docs/xstate">XState</a> is a best-in-class open source library for
    orchestrating and managing complex application logic in JavaScript and TypeScript apps.
  </div>
</div>

## Quick start

Install XState:

```bash
npm install xstate
```

Create a state machine:

```ts
import { createMachine, createActor } from 'xstate';

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

const toggleActor = createActor(toggleMachine);
toggleActor.start();

toggleActor.send({ type: 'toggle' });
console.log(toggleActor.getSnapshot().value); // 'active'

toggleActor.send({ type: 'toggle' });
console.log(toggleActor.getSnapshot().value); // 'inactive'
```

[Read the full quick start guide](/docs/quick-start) to learn more.

<Cards>
  <Card href="/docs/states" title={<><RocketIcon size="20" className="mr-2" /> Get started</>}>
    Jump straight into learning how to use Stately Studio editor, starting
    with states.
  </Card>

  <Card href="/docs/studio" title={<><LayoutIcon size="20" className="mr-2" /> Stately Studio overview</>}>
    Find out more about Stately Studio's visual editor and collaborating
    with your team using Stately Studio's premium features.
  </Card>

  <Card href="/docs/state-machines-and-statecharts" title={<><BookOpenTextIcon size="20" className="mr-2" /> Learn state machines and statecharts</>}>
    With our no-code introduction.
  </Card>

  <Card href="/docs/xstate" title={<><CodeIcon size="20" className="mr-2" /> Learn XState</>}>
    Get started with our JavaScript and TypeScript library for state
    machines and statecharts.
  </Card>
</Cards>

<EmbedMachine name="Default machine" embedURL="https://stately.ai/registry/editor/embed/5b170468-d66a-4136-84c8-676c8fea82e8?machineId=3e69d71f-1eda-41af-bee0-e82031d3f810" />

## Stately Studio or XState?

Stately Studio and XState are most powerful when used together. Use Stately Studio's visual editor to collaboratively model your app logic and use XState to integrate that logic into your codebase.

You can also use XState in your codebase without Stately Studio, and you're welcome to use Stately Studio if you're not yet familiar with XState.

## Who is Stately?

<img alt="The Stately team including Gavin, Farzad, David, Mateusz, Jenny, Laura, Anders, Nick, and Kevin, all standing in front of garage doors, laughing and smiling at each other." src={__img0} placeholder="blur" />

We're [Stately](https://stately.ai), a small team founded by [David Khourshid](https://twitter.com/davidkpiano), the creator of XState. Stately is building Stately Studio, where you can visualize your application logic and collaborate with your whole team.