Parallel States

Sometimes you need multiple things happening at once. A media player might have audio muted while video is visible. A settings panel might have several toggles that work independently. Parallel states let you model these scenarios without creating every possible combination by hand.

The Combinatorial Problem

Imagine modeling two independent toggles. Without parallel states, you need to define every combination as a separate state:

Both Off *
	toggle_a -> A On B Off
	toggle_b -> A Off B On
A On B Off
	toggle_a -> Both Off
	toggle_b -> Both On
A Off B On
	toggle_a -> Both On
	toggle_b -> Both Off
Both On
	toggle_a -> A Off B On
	toggle_b -> A On B Off

Two toggles require four states. Three toggles need eight. Four need sixteen. This quickly becomes unmanageable.

The Ampersand Syntax

Add & after a state name to make it parallel. All children of a parallel state are active at the same time, each maintaining their own independent state:

Settings &
	Toggle A
		Off *
			toggle_a -> On
		On
			toggle_a -> Off
	Toggle B
		Off *
			toggle_b -> On
		On
			toggle_b -> Off

Example: Settings Toggles

Two settings that can be toggled independently:

Example: Media Controls

Audio and video can be controlled separately in a media player:

Combining with Regular States

Parallel states can be nested inside regular states. This lets you enable parallel behavior conditionally:

App
	Logged Out *
		login -> Logged In
	Logged In &
		logout -> Logged Out
		Profile
			Viewing *
			Editing
		Notifications
			Collapsed *
			Expanded

Here, Profile and Notifications only operate in parallel when logged in. The logout transition exits the entire parallel state.

Good Uses for Parallel States

• Independent UI panels that can each be expanded or collapsed
• Multiple playback controls (audio, video, subtitles)
• Form sections that validate independently
• Feature toggles in a settings screen
• Game character states (moving, shooting, crouching)