# Source: https://stately.ai/docs/canvas-view-controls.mdx

# Canvas controls (/docs/canvas-view-controls)






import { Sparkles, MousePointer2, Hand, PlusSquare, Undo, Redo, Scan, Check, ListTree } from 'lucide-react';

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

* <Sparkles size={18} /> [Generate with AI](generate-flow).
* <MousePointer2 size={18} /> Pointer mode, for dragging and selecting items on the
  canvas.
* <Hand size={18} /> Hand mode, for panning around the canvas.
* <PlusSquare size={18} /> Quick add menu, for adding a [state](editor-states-and-transitions)
  or a [note](annotations).

{/* <p style={{ maxWidth: '300px' }}>
  <ThemedImage
    alt="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."
    sources={{
      light: './assets/canvas-view-controls/canvas-tools.png',
      dark: './assets/canvas-view-controls/canvas-tools-dm.png',
    }}
  />
  </p> */}

<img alt="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." src={__img0} placeholder="blur" />

## 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 <Check size={18} /> **Show/hide UI** to show and hide the UI.

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

<Callout>
  Weâve got [keyboard shortcuts](keyboard-shortcuts) for many of the view controls.
</Callout>

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

{/* <p>
  <ThemedImage
    alt="Starter machine in Stately Studio. The only panel visible is the top left corner with the Stately logo and the machine name."
    sources={{
      light: '/canvas-view-controls/hide-ui.png',
      dark: '/canvas-view-controls/hide-ui-dm.png',
    }}
  />
  </p> */}

<img alt="Starter machine in Stately Studio. The only panel visible is the top left corner with the Stately logo and the machine name." src={__img1} placeholder="blur" />

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

{/* <p>
  <ThemedImage
    alt="Starter machine in Stately Studio. All the panels are visible, including the top bar, view options, left sidebar, and right tool menu."
    sources={{
      light: '/canvas-view-controls/show-ui.png',
      dark: '/canvas-view-controls/show-ui-dm.png',
    }}
  />
  </p> */}

<img alt="Starter machine in Stately Studio. All the panels are visible, including the top bar, view options, left sidebar, and right tool menu." src={__img2} placeholder="blur" />

## View controls

* <Undo size={18} /> Undo
* <Redo size={18} /> Redo
* <Scan size={18} /> Center in view: Center currently selected item or entire machine
  in view.
* Zoom in %: Current zoom level. Press to open the zoom menu.

<Callout>
  [Find out more about light mode, dark mode, and translucency in user preferences](user-preferences).
</Callout>

## Zoom to selection

You can use **Zoom to selection** from right-click on any transition or state on the canvas or in the <ListTree size={18} /> **Structure** panel.