Skip to content
Version: XState v4

Canvas controls

We’ve recently added a canvas tools panel to help you with common tasks while designing and simulating state machines.

  • Generate with AI.
  • Pointer mode, for dragging and selecting items on the canvas.
  • Hand mode, for panning around the canvas.
  • Quick add menu, for adding a state or a note.

Canvas tools in Stately Studio, including a sparkles AI icon, pointer icon, hand icon, and plus icon which is focused and has an open menu for adding a state or a note.Canvas tools in Stately Studio, including a sparkles AI icon, pointer icon, hand icon, and plus icon which is focused and has an open menu for adding a state or a note.

View controls​

You spend a lot of time on the canvas while designing and simulating state machines, so we’ve added view controls to help you navigate around your machines.

Show/hide UI (user interface)​

You can show and hide most of the editor’s user interface to help you focus on your machine.

  1. Open the editor menu from the Stately icon in the top left of Stately Studio.
  2. From the View submenu, toggle Show/hide UI to show and hide the UI.

You can also use the Command/Ctrl + . keyboard shortcut to show and hide the UI.

Below is a preview of a machine with the UI hidden.

Starter machine in Stately Studio. The only panel visible is the top left corner with the Stately logo and the machine name.Starter machine in Stately Studio. The only panel visible is the top left corner with the Stately logo and the machine name.

Below is a preview of a machine without the UI hidden.

Starter machine in Stately Studio. All the panels are visible, including the top bar, view options, left sidebar, and right tool menu.Starter machine in Stately Studio. All the panels are visible, including the top bar, view options, left sidebar, and right tool menu.

View controls​

  • Undo
  • Redo
  • Center in view: Center currently selected item or entire machine in view.
  • Zoom in %: Current zoom level. Press to open the zoom menu.

Zoom to selection​

You can use Zoom to selection from right-click on any transition or state on the canvas or in the Structure panel.