Parallel state

Also known as Orthogonal state and And state

A parallel state is a state that is divided into separate regions. Each region contains more substates. When a parallel state is entered, each of the regions are also entered; their initial states are entered and so on. When a machine is in a parallel state, all of its regions are active.

An example of a parallel state

If the state above is entered, both B and D states are entered too. As you can see the flick event is handled by both B and D. If the flick event happens, both B and D get to “handle” the event, and the resulting state is C and E. Note: It is not possible to send an event specifically to a single region.

If another flick event happens E will transition back to D, while C will ignore the event, since C doesn’t handle the event. After 1 second, C will transition back to B, ready to handle the flick event again.


A parallel state is like any other state, but it is subdivided into regions by way of straight, dashed lines. Each such region can then include states.

A state with four regions

Each of those regions can hold their own sets of states


Parallel states are used when the machine needs to combine several discrete behaviours at the same time.

Without parallel states, modeling a set of four independent on/off switches (e.g. four independent toggle buttons with on and off) would require 16 atomic states (1on2on3on4on, 1off2on3on4on, 1on2off3on4on, etc.) and 64 transitions (!) to be able to model all possible transitions. Increasing the data model from four to five toggle buttons doubles the number of states (32) and transitions (128).

With parallel states, modeling the same set of four independent on/off-switches requires only eight states (four on states and four off states) and eight transitions (each state transitions to its counterpart). Increasing the data model from four to five toggle buttons increases the number of states and transitions by a fixed amount (two each).

When events are completely independent of one another, parallel states shine. But by using in guards it is possible to coordinate the different regions, and have states in one region wait until another region reaches a particular state or raises an event. This makes it possible to model only partially independent behaviours using parallel states.


In Statechart XML, the <parallel> element declares a parallel state. It has more or less exactly the same set of attributes and elements as the <state> element, except it has no initial or final states. The various regions are defined by way of the direct child <state> elements.

This is a parallel state with two regions. When p becomes active, so does foo1 and bar1

<parallel id="p">
  <state id="region1">
    <state id="foo1"/>
    <state id="foo2"/>
  <state id="region2">
    <state id="bar1"/>
    <state id="bar2"/>


In XState, the state node must have type: 'parallel' (as of version 4.0) specified for a state to be marked as a parallel state with regions. A parallel state can not define an initial property, since all regions are entered simultaneously.

p: {
  type: 'parallel',
  states: {
    region1 : {
      initial: 'foo1',
      states: {
        foo1: {}
        foo2: {}
    region2 : {
      initial: 'bar1',
      states: {
        bar1: {}
        bar2: {}