Skip to content
Version: XState v5

Design mode

Design your state machine flows in Design Mode.

You can add new states by double-clicking anywhere on the canvas, and add transitions and events from the handles on each side of the states.

Numbered screenshot of Stately editor’s Design mode features. Described by list below.Numbered screenshot of Stately editor’s Design mode features. Described by list below.

  1. Editor menu: access common Stately shortcuts and view options.
  2. Left drawer switch: open and close the left drawer which contains the machines list.
  3. Current project.
  4. Current machine.
  5. Code panel.
  6. Structure panel.
  7. Share button: Open the share options.
  8. Simulate.
  9. Deploy.
  10. Details panel for the currently selected machine, state, or transition.
  11. Events schema panel.
  12. Context schema panel.
  13. Tests panel.
  14. Canvas: where your state machine is designed and displayed.
  15. Canvas tools.
  16. Current version displayed on the canvas.
  17. Project visibility.
  18. Canvas view controls.
  19. Help button: open and close the help drawer.