Design mode

Design your state machine flows in Design Mode. You can view and edit your machine from the canvas.

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.

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: View and edit your machine from the 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.