Statefully Documentation

Hotel Room Lights

Two light switches that operate independently using parallel states

Try It

Toggle each light independently. Both lights can be on, both off, or any combination - they operate in parallel.

Hotel Room Lights
Hotel Room
Room Light
Off*
On
Desk Lamp
Off*
On

State Specification

The &suffix on "Hotel Room" makes it a parallel state. Both Room Light and Desk Lamp are active simultaneously, each with their own On/Off states.

Spec
Hotel Room &
	Room Light
		Off *
			switch_room -> On
		On
			switch_room -> Off
	Desk Lamp
		Off *
			switch_desk -> On
		On
			switch_desk -> Off

Prototype Code

The prototype defines UI for each combination of states. With two parallel regions, each with two states, there are four possible configurations.

Prototype
[Off, Off]
  div style="padding: 24px; display: flex; gap: 24px;":
    div style="text-align: center;":
      div style="width: 60px; height: 60px; border-radius: 50%; background: #333; margin: 0 auto 8px;":
      p style="font-size: 12px; color: #666;": "Room Light"
      button @click=switch_room style="padding: 6px 12px; margin-top: 8px;": "Turn On"
    div style="text-align: center;":
      div style="width: 40px; height: 40px; border-radius: 50%; background: #333; margin: 0 auto 8px;":
      p style="font-size: 12px; color: #666;": "Desk Lamp"
      button @click=switch_desk style="padding: 6px 12px; margin-top: 8px;": "Turn On"

[On, Off]
  div style="padding: 24px; display: flex; gap: 24px;":
    div style="text-align: center;":
      div style="width: 60px; height: 60px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 20px #fbbf24; margin: 0 auto 8px;":
      p style="font-size: 12px; color: #666;": "Room Light"
      button @click=switch_room style="padding: 6px 12px; margin-top: 8px;": "Turn Off"
    div style="text-align: center;":
      div style="width: 40px; height: 40px; border-radius: 50%; background: #333; margin: 0 auto 8px;":
      p style="font-size: 12px; color: #666;": "Desk Lamp"
      button @click=switch_desk style="padding: 6px 12px; margin-top: 8px;": "Turn On"

[Off, On]
  div style="padding: 24px; display: flex; gap: 24px;":
    div style="text-align: center;":
      div style="width: 60px; height: 60px; border-radius: 50%; background: #333; margin: 0 auto 8px;":
      p style="font-size: 12px; color: #666;": "Room Light"
      button @click=switch_room style="padding: 6px 12px; margin-top: 8px;": "Turn On"
    div style="text-align: center;":
      div style="width: 40px; height: 40px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 15px #fbbf24; margin: 0 auto 8px;":
      p style="font-size: 12px; color: #666;": "Desk Lamp"
      button @click=switch_desk style="padding: 6px 12px; margin-top: 8px;": "Turn Off"

[On, On]
  div style="padding: 24px; display: flex; gap: 24px;":
    div style="text-align: center;":
      div style="width: 60px; height: 60px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 20px #fbbf24; margin: 0 auto 8px;":
      p style="font-size: 12px; color: #666;": "Room Light"
      button @click=switch_room style="padding: 6px 12px; margin-top: 8px;": "Turn Off"
    div style="text-align: center;":
      div style="width: 40px; height: 40px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 15px #fbbf24; margin: 0 auto 8px;":
      p style="font-size: 12px; color: #666;": "Desk Lamp"
      button @click=switch_desk style="padding: 6px 12px; margin-top: 8px;": "Turn Off"

Key Concepts

  • Parallel states - The & suffix enables multiple active children
  • Independent events - switch_room and switch_desk only affect their respective regions
  • State combinations - Prototype uses comma-separated state names like [On, Off]
  • Exponential reduction - Without parallel states, you would need 4 separate states with 8 transitions

Learn More

See the Parallel States documentation for more examples including power-controlled lights and text formatting.

Next: Traffic Light →