Skip to content
Version: XState v5

Initial states

When a state machine starts, it enters the initial state first. A machine can only have one top-level initial state; if there were multiple initial states, the machine wouldn’t know where to start!

In XState, the initial state is defined by the initial property on the machine config:

const feedbackMachine = createMachine({
  id: 'feedback',

  // Initial state
  initial: 'prompt',

  // Finite states
  states: {
    prompt: {
      /* ... */
    },
    // ...
  },
});

In our video player, paused is the initial state because the video player is paused by default and requires user interaction to start playing.

Change the initial state​

Each new machine or parent state will set the first new state as its initial state by default.

Using the quick actions menu:​

  1. Select the state you wish to make the new initial state.
  2. Right-click the state to bring up the quick actions menu.
  3. Choose Mark as initial state from the quick actions menu.

Using the State details panel:​

  1. Select the parent state or parent machine.
  2. Open the  State details panel from the right tool menu.
  3. Choose the desired initial state from the Initial state dropdown menu.

Initial states in XState​

Coming soon…