> ## Documentation Index
> Fetch the complete documentation index at: https://tryinspector.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Visual Editor

> Toggle the visual editor to drag, drop, and edit elements

The visual editor lets you select, move, and style elements directly in your running app.

<video autoPlay muted loop playsInline className="w-full aspect-video rounded-lg border" src="https://qjiu9iejnualtydd.public.blob.vercel-storage.com/visual-editor-display.mp4" />

## Toggle the visual editor

There are two ways to open the visual editor:

### Click Design in the toolbar

Click **Design** in the toolbar to switch to visual editing mode.

<video autoPlay muted loop playsInline className="w-full aspect-video rounded-lg border" src="https://qjiu9iejnualtydd.public.blob.vercel-storage.com/toggle-design-panel.mp4" />

### Use the notch

Drag the notch at the bottom of the screen upward to reveal the design panel.

<video autoPlay muted loop playsInline className="w-full aspect-video rounded-lg border" src="https://qjiu9iejnualtydd.public.blob.vercel-storage.com/toggle-toolbar.mp4" />

## Controls

| Action              | How             |
| ------------------- | --------------- |
| **Zoom**            | `Cmd + scroll`  |
| **Select**          | Toggle with `V` |
| **Move Tool**       | Toggless `V`    |
| **Comments (beta)** | Press `C`       |

<CardGroup cols={2}>
  <Card title="Move Tool" href="/visual-editing/move-tool">Drag and edit elements.</Card>
  <Card title="Design Panel" href="/visual-editing/design-panel">Edit styles visually.</Card>
</CardGroup>