Statefully Documentation

Transitions

Transitions define how your state machine moves from one state to another. They're triggered by events like button clicks or system actions.

Basic Syntax

Transitions are defined using the arrow syntax event -> Target State. They must be indented under their parent state.

Login Screen *
	submit -> Dashboard
	forgot password -> Password Reset
Dashboard
	logout -> Login Screen

Event Names

Event names describe what triggers the transition. Use descriptive names that match user actions or system events.

GOOD

  • submit
  • cancel
  • timeout
  • payment success

AVOID

  • go
  • click
  • next
  • x

Multiple Transitions

A state can have multiple transitions to different target states:

Payment
	success -> Confirmation
	failure -> Error
	cancel -> Cart
	timeout -> Error

Self Transitions

A state can transition to itself, useful for retry logic or refresh actions:

Loading
	retry -> Loading
	success -> Ready
	error -> Error

Transitions in Nested States

Transitions can target states at any level. Use the full path for clarity when targeting nested states.

App
	Screen A *
		next -> Screen B/Form
	Screen B
		Form *
			submit -> Success
		Success
			done -> Screen A

Note

When transitioning to a state with children, the initial child state (marked with *) becomes active.