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 (8) and tree view (9).
  3. Breadcrumb: Your current project and machine.
  4. Design/Simulate switch: Switch between Design and Simulate mode.
  5. Share button: Open the share options.
  6. Export button: open quick export options.
  7. User button: Open the user menu.
  8. Machines list (left drawer): List of machines in your current project.
  9. Tree view (left drawer): Tree view of your current machine.
  10. Canvas
  11. Right toolbox: Contextual menu which shows Details of current item highlighted on canvas.
  12. Canvas view controls: Undo/redo and zoom options for the canvas.
  13. Help button: open and close the help drawer.