# XState Adapter

XState is a robust state management library for creating state machines. Ignite-Element integrates seamlessly with XState, leveraging its powerful TypeScript features to provide type-safe state management.

***

#### **Define a State Machine with TypeScript Support**

Here’s a counter state-machine with strong typing for events and context:

{% tabs %}
{% tab title="TypeScript" %}

```typescript
import { assign, setup } from "xstate";

const counterMachine = setup({
  types: {
    events: {} as { type: "START" } | { type: "INC" } | { type: "DEC" },
    context: {} as {
      count: number;
    },
  },
}).createMachine({
  id: "counter",
  initial: "idle",
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        START: {
          target: "active",
        },
      },
    },
    active: {},
  },
  on: {
    INC: {
      actions: assign({
        count: ({ context }) => context.count + 1,
      }),
    },
    DEC: {
      actions: assign({
        count: ({ context }) => context.count - 1,
      }),
    },
  },
});

export default counterMachine;
```

{% endtab %}
{% endtabs %}

**Learn More**: Check out the [XState + TypeScript documentation](https://stately.ai/docs/typescript) to explore how TypeScript enhances XState’s type safety and developer experience.

***

#### Plug into Ignite-Element

You can use this machine with Ignite-Element as follows:

{% tabs %}
{% tab title="TypeScript" %}

```typescript
import { igniteCore } from "ignite-element";
import counterMachine from "./counterMachine";

const igniteElement = igniteCore({
  adapter: "xstate",
  source: counterMachine,
});
```

{% endtab %}
{% endtabs %}

***

### Why Use XState with Ignite-Element?

* **Type Safety**:\
  XState’s TypeScript support ensures your state machine is fully type-checked, making state transitions and event dispatch predictable and reliable.
* **Visualize State Machines**:\
  Combine Ignite-Element’s rendering capabilities with XState’s visualization tools for debugging and collaboration.
* **Scalability**:\
  XState’s hierarchical and parallel states work seamlessly with Ignite-Element, enabling you to manage complex application states easily.
