Quick Start

Let's create a simple state machine in 5 minutes. We'll build a basic start/pause/stop control.

Step 1: Define Your States

In the Spec panel, define your states. Each line is a state. Use * to mark the initial state, and -> for transitions.

Spec

Idle *
	start -> Running
Running
	pause -> Paused
	stop -> Idle
Paused
	resume -> Running
	stop -> Idle

Tip

The asterisk * marks Idleas the starting state. When someone opens your diagram, they'll start there.

Step 2: Add Prototypes

In the Prototype panel, define how each state looks. Use bracket syntax[State Name] to start each section.

Prototype

[Idle]
  div style="text-align: center; padding: 24px;":
    h2: "Ready"
    p style="color: #666;": "Click start to begin"
    button @click=start style="padding: 8px 16px; background: #000; color: #fff;": "Start"

[Running]
  div style="text-align: center; padding: 24px;":
    h2 style="color: #22c55e;": "Running..."
    div style="display: flex; gap: 8px; justify-content: center;":
      button @click=pause style="padding: 8px 16px;": "Pause"
      button @click=stop style="padding: 8px 16px;": "Stop"

[Paused]
  div style="text-align: center; padding: 24px;":
    h2 style="color: #eab308;": "Paused"
    div style="display: flex; gap: 8px; justify-content: center;":
      button @click=resume style="padding: 8px 16px; background: #000; color: #fff;": "Resume"
      button @click=stop style="padding: 8px 16px;": "Stop"

Note

The @click=start syntax connects the button to thestart transition defined in your spec.

Step 3: Try It

Here's the working example. Click on states in the diagram or use the buttons in the preview to navigate.

Interactive Example

State Diagram

Idle*

Running

Paused

Preview

What's Next?

Now that you have the basics, learn more about:

Defining states - Initial states, naming conventions
Nested states - Creating hierarchies
Prototype styling - Elements, classes, inline styles