> For the complete documentation index, see [llms.txt](https://ploegert.gitbook.io/til/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ploegert.gitbook.io/til/tools/xstate/simple-states-and-composite-states.md).

# Simple States And Composite States

XState allows you to build [hierarchical state machines](https://xstate.js.org/docs/guides/hierarchical.html). A hierarchical state machine is one where there are substates nested under states.

States with nothing nested under them are *simple states*. States that have substates are *composite states*.

```javascript
const machine = createMachine({
  // Starting State
  initial: "active",
  // Starting Context
  context: { count: 0 },
  // States
  states: {
    inactive: {
      always: { target: "active" },
    },
    active: {
      on: {
        SWITCH_COUNT_DIRECTION: {
          actions: ["logSwitch", "consoleLogSwitch"],
        },
        COUNT: {
          actions: "changeCount",
        },
      },
      initial: "increment",
      states: {
        increment: {
          on: {
            SWITCH_COUNT_DIRECTION: "decrement",
          },
        },
        decrement: {
          on: {
            SWITCH_COUNT_DIRECTION: "increment",
          },
        },
      },
    },
  },
});
```

* The `inactive` state is a *simple state*. There is nothing nested under it.
* The `active` state is a *composite state*. There are two substates (`increment` and `decrement`) nested under it.
* The `increment` and `decrement` states are both *simple states*. Nothing is nested under them.