# Understanding the editor

The parts of the form editor: the top bar, the canvas, the side panel and its four tabs, the slash menu, AI chat, and keyboard shortcuts.

## Layout

The editor works like a document: you type, add blocks, and move them around. It has four areas.

![The form editor on a published form: the top toolbar with Edit, Translate, and Preview, then Publish history, Integrations, Settings, the green issue indicator, Publish changes, and the primary Inbox button; the canvas in the center; and the side panel on the right, open on its Blocks tab, with the rail of Blocks, Fields, Logic, and Theme icons at the edge.](https://formstep.io/docs/images/building-forms/editor-layout.png)

The editor: top bar, canvas, and side panel.

- The top bar switches between **Edit**, **Translate**, and **Preview**. On the right are Publish history, Integrations, Settings, the issue indicator, and **Publish**.

- The canvas, in the center, shows your form as respondents see it.

- The side panel, on the right, has four tabs. See [Side panel](#side-panel).

- AI chat opens from the button at the bottom right. See [AI chat](#ai-chat).

More on the top bar:

- **Translate**: [Multilingual forms](https://formstep.io/docs/building-forms/translating-form-content/)

- **Preview** lets you fill in the form as a respondent would, with logic working. Nothing is saved, and uploads and payments are simulated.

- **Publish history**: [Publish history](https://formstep.io/docs/building-forms/version-history/)

- **Settings**: [Form settings](https://formstep.io/docs/building-forms/form-settings/). **Integrations**: [Integrations](https://formstep.io/docs/integrations/overview/)

- The issue indicator and **Publish**: [Publish checks](https://formstep.io/docs/building-forms/publish-checks/)

- **Inbox**, once the form is published, opens the form's own page with its requests and submissions. See the [submission inbox](https://formstep.io/docs/submissions-analytics/submission-inbox/).

## Side panel

Click an icon on the rail to open a tab, and click it again to close the panel. On a wide screen, drag the panel's left edge to resize it.

| Tab | What it holds |
| - | - |
| Blocks | Every block you can add, with a search box. Click a block to add it below the cursor, or drag it onto the canvas. See [Question types](https://formstep.io/docs/building-forms/field-types/) |
| Fields | The field keys automations read and prefill your answers by. Click a name to jump to its question. See [Field keys](https://formstep.io/docs/requests/field-keys/) |
| Logic | Every logic rule in plain words. Click a rule to go to it, or add one. See [Conditional logic](https://formstep.io/docs/building-forms/conditional-logic/) |
| Theme | Colors, fonts, presets, and dark mode. See [Appearance & theming](https://formstep.io/docs/branding-domains/appearance-theming/), which also covers the cover and logo |

On a narrow window, the panel opens from the bottom. On a phone, Fields and Theme are in the top bar's **⋯** menu, and you add blocks by typing `/`.

## Slash menu

To add a block from the keyboard, type `/` on an empty line, or press `⌘`+`/` (

`Ctrl`+`/`

), and keep typing to filter. The menu shows only the blocks that fit where the cursor is.

![The slash menu open on the canvas after typing a slash, showing its block categories, Basic Blocks and Form Fields first, with their listed block types.](https://formstep.io/docs/images/building-forms/slash-menu.png)

Slash menu: the block picker.

To change a block you added, click its drag handle (⋮⋮). See [Form structure](https://formstep.io/docs/building-forms/form-structure/) and [Question settings](https://formstep.io/docs/building-forms/field-configuration/).

## AI chat

The AI mascot at the bottom right opens AI chat, and a second click closes it. It can write, check, and edit your form: say “add a phone number and a date picker” and it adds them. It uses your AI credits. See [Use AI chat](https://formstep.io/docs/ai/using-ai/).

![The AI chat floating over the bottom-right of the editor, beside the side panel's rail, showing starter prompt suggestions, the message input, and the remaining AI credits above the input; the AI mascot that opens and closes it stands under the rail.](https://formstep.io/docs/images/building-forms/ai-chat-panel.png)

AI chat, floating over the editor.

## Keyboard shortcuts

On a Mac use Cmd; on Windows and Linux use Ctrl.

| Shortcut | What it does |
| - | - |
| Cmd + / | Open the block menu at the cursor |
| Cmd + B / I / U / S | Bold, italic, underline, strikethrough |
| Cmd + K | On the canvas: link the selected text. Anywhere else: search for any form, folder, workspace, or setting |
| Cmd + A | Once: the current block's text. Again: every block |
| Shift + Enter | Line break inside the block, instead of a new block |
| Cmd + Enter | Leave the block and start a new paragraph below |
| Tab / Shift + Tab | Indent or outdent a list item |

## Next steps

[Question types](https://formstep.io/docs/building-forms/field-types/) — Every question you can add

[Form structure](https://formstep.io/docs/building-forms/form-structure/) — Pages, columns and moving blocks

[Publish checks](https://formstep.io/docs/building-forms/publish-checks/) — What blocks a publish, and what only warns

[Use AI chat](https://formstep.io/docs/ai/using-ai/) — Build and change a form by asking