Skip to content
Version: XState v4

Canvas 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 Stately Studio 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​

View controls in Stately Studio, numbered and labeled by the list below.View controls in Stately Studio, numbered and labeled by the list below.

  1. Undo
  2. Redo
  3. Zoom out
  4. Current zoom level. Press to open the zoom menu.
  5. Zoom in

Zoom menu and canvas context menu​

The zoom menu and canvas context menu contain the same options:

  • Add annotation
  • Autolayout
  • Zoom In
  • Zoom out
  • 25%: set zoom level to 25%
  • 50%: set zoom level to 50%
  • 75%: set zoom level to 75%
  • 100%: set zoom level to 100%
  • Fit to Content: zoom to fit machine inside the currently visible canvas space