Skip to content
Version: XState v4

Parallel states

A parallel state is a state separated into multiple regions of child states, where each region is active simultaneously.

A dashed line borders each region.

In the video player machine above, the video and audio states are active at the same time, which means the following combinations of states can happen simultaneously:

  • video playing, audio muted
  • video playing, audio unmuted
  • video stopped, audio muted
  • video stopped, audio unmuted

Make a state a parallel state​

First, select the parent state you want to set as a parallel state. Then…

On the canvas​

  1. Right-click the state to open the edit menu.
  2. From the Type options, choose Parallel.

Using the state Details panel​

  1. Select the parent state you want to make a parallel state.
  2. Open the state Details panel from the right tool menu.
  3. From the type option, choose Parallel.

To set the state back as a normal state, follow the same steps and select the Normal type option.