Skip to content
Version: XState v4

Transitions and events

A machine moves from state to state through transitions. Transitions are caused by events; when an event happens, the machine transitions to the next state.

Transitions are “deterministic”; each combination of state and event always points to the same next state.

The arrows are transitions, and the rounded rectangles on the arrow’s lines are events. Each transition has a source state which comes before the transition, and a target state, which comes after the transition. The transition’s arrow starts from the source state and points to the target state.

In the video player machine above, the events are PLAY and PAUSE. The Play event transitions from the Paused state to the Playing state. The Pause event transitions from the Playing state to the Paused state.

Add a transition and event​

  1. Select an existing state.
  2. Drag from the handles on the left, right and bottom sides of the selected state, and release to create a connecting transition, event and new state.

Change the source and target states for a transition or event​

First select the transition or event you want to change. Then…

Using the Transition details panel​

  1. Select the transition or event you wish to change.
  2. Open the Transition details panel from the right tool menu.
  3. Choose a new source state from the Source dropdown options.
  4. Choose a new target state from the Target dropdown options.

Dragging the transition handles​

  1. Select the transition or event you want to change.
  2. Drag the transition’s handle connected to the source state to connect it to a new source state.
  3. Drag the transition’s handle connected to the target state to connect it to a new target state.

Switch the source and target states for a transition or event​

  1. Select the transition or event.
  2. Right-click the state to bring up the quick actions menu.
  3. Choose Switch source and target from the quick actions menu.