Skip to content
Version: XState v4

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 our video player, paused is the initial state because the video player is paused by default and requires user interaction to start playing.

State machine with an initial state of Paused, transitioning through a Play event to the Playing state. From the Playing state back to the Paused state is a Pause event.State machine with an initial state of Paused, transitioning through a Play event to the Playing state. From the Playing state back to the Paused state is a Pause event.

View this machine in the Stately Studio.

Change the initial state​

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

On the canvas​

  1. Select the state you wish to make the new initial state.
  2. Right-click the state to open the edit menu.
  3. Choose Mark as initial state from the edit 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.