# The Editor

Source: [The Editor](https://typeroll.com/docs/guides/the-editor/)

> The visual block editor — adding blocks, editing on the canvas, responsive breakpoints, undo/redo, and getting work live.

Use the visual editor to create pages, maintain content and review changes made by an AI agent. Browser editing does not require an AI connection or publishing accounts.

Choose the **Organization**, select the **Site** and **Version**, then open **Pages** and select a page. On a phone, open the sidebar menu first.

## Desktop layout

[Section titled “Desktop layout”](https://typeroll.com/docs/guides/the-editor/#desktop-layout)

![The real Typeroll CMS block editor with sample content: structure on the left, preview in the middle and heading fields on the right.](https://typeroll.com/docs/images/editor-desktop.png)

The editor displays three panels when the screen is wide enough:

| Panel  | What it holds                                                              |
| ------ | -------------------------------------------------------------------------- |
| Left   | **Add** for the block library and **Structure** for the page’s block tree. |
| Center | A live preview rendered from the page content.                             |
| Right  | Fields for the selected block, or page metadata when no block is selected. |

The header provides undo/redo, preview devices, **Meta** for page settings and **Publish** for saving, status and deployment.

## On a phone

[Section titled “On a phone”](https://typeroll.com/docs/guides/the-editor/#on-a-phone)

Narrow screens show one panel at a time. Use **Blocks**, **Preview** and **Edit block** or **Settings** to switch panels. Select a block from **Structure** to open its fields. **Publish** stays in the header, including the deploy control when publishing setup and your permissions allow it.

![Mobile editor showing the selected heading's editable fields and the Blocks, Preview and Edit block panel controls.](https://typeroll.com/docs/images/editor-mobile.png)

The mobile layout changes how you navigate the editor. The preview device selector separately controls which responsive breakpoint you are editing.

## Adding blocks

[Section titled “Adding blocks”](https://typeroll.com/docs/guides/the-editor/#adding-blocks)

Open the **Add** tab and either:

* **Click** a block — it’s appended to the end of the page, or
* **Drag** it into the **Structure** tree — a coloured drop-line follows your pointer showing exactly where it will land, including inside containers

Dragging is how you place a block precisely. Clicking is faster when you’re just appending.

Search the library by name at the top of the tab. Block ids are per-site — your custom blocks appear in the same list as the built-in ones.

## Editing content

[Section titled “Editing content”](https://typeroll.com/docs/guides/the-editor/#editing-content)

Three ways, depending on what you’re changing:

**Click a block** in the preview or the tree to select it. Its fields appear in the right column, generated from the block’s own schema.

**Double-click text directly on the canvas** to edit it in place. Enter or clicking away commits; Escape cancels. This works on plain-text fields — headings, labels, button text — and is the fastest way to fix a typo.

**Use the Structure tree** for anything about arrangement rather than content: reorder by dragging, duplicate, delete, or double-click a row to rename the block (the name is a label for you; it doesn’t appear on the site).

The tree shows each block’s actual content — the heading text, the image filename — rather than just its type, so a long page stays navigable.

## Keyboard shortcuts

[Section titled “Keyboard shortcuts”](https://typeroll.com/docs/guides/the-editor/#keyboard-shortcuts)

| Shortcut               | Does                                  |
| ---------------------- | ------------------------------------- |
| `⌘Z` / `Ctrl+Z`        | Undo                                  |
| `⇧⌘Z` / `Ctrl+Shift+Z` | Redo                                  |
| `⌘D` / `Ctrl+D`        | Duplicate the selected block          |
| `Delete` / `Backspace` | Delete the selected block             |
| `Enter`                | Commit an inline edit or a rename     |
| `Escape`               | Cancel an inline edit, close a dialog |

Undo covers block edits — adding, moving, deleting, field changes. A burst of typing in one field collapses into a single undo step, so one `⌘Z` takes you back to before you started typing, not one character at a time.

Tip

Undo is cheap and safe here: it only ever rewrites your draft, never the saved page. See [Drafts & Saving](https://typeroll.com/docs/tools/drafts-and-saving/).

## Responsive editing

[Section titled “Responsive editing”](https://typeroll.com/docs/guides/the-editor/#responsive-editing)

The device buttons in the header do **two** things at once, and the second one is easy to miss:

1. They resize the preview.
2. They set **which breakpoint you’re editing**.

So if you pick **Phone** and then change a grid’s column count, you’ve set that value *for phones only*. Switch back to **Desktop** and the desktop value is untouched.

| Button             | Preview width | Breakpoint written |
| ------------------ | ------------- | ------------------ |
| Phone              | 390px         | `mobile` (< 640)   |
| Phone — landscape  | 740px         | `tablet` (≥ 640)   |
| Tablet             | 1024px        | `laptop` (≥ 1024)  |
| Tablet — landscape | 1280px        | `desktop` (≥ 1280) |
| Desktop            | full width    | `wide` (≥ 1536)    |

Fields that support per-breakpoint values show a small badge with the current breakpoint. When a value is inherited rather than set explicitly, the badge says **inherited** and offers a reset control to drop back to the inherited value.

Breakpoints inherit upward from mobile: set something once at Phone and it applies everywhere unless a larger breakpoint overrides it. That’s why it’s usually best to design mobile-first and only override where a larger screen genuinely needs something different.

Check which device is active before editing

A responsive change lands on whichever device button is highlighted. If a change seems not to apply, you’re probably looking at a different breakpoint than the one you edited.

## Page metadata

[Section titled “Page metadata”](https://typeroll.com/docs/guides/the-editor/#page-metadata)

Click **Meta** in the header, or just deselect the current block, to get the page’s own fields: page title, SEO title, meta description, OG image and alt text, canonical URL, and the noindex toggle.

The same panel holds the **Template** picker and the **Content mode** switch (blocks ↔ HTML).

## Saving and publishing

[Section titled “Saving and publishing”](https://typeroll.com/docs/guides/the-editor/#saving-and-publishing)

Content edits are kept in a **working copy**. They do not change the saved publication input or the live site until you save and deploy. Read the save state in the header, then open **Publish**:

1. **Changes** — Save (commits the draft) or Discard (throws it away).

2. **Status** — Draft, In review, Unlisted, or Published. Status changes apply to the saved page. They control inclusion in the next deployment; changing status does not by itself deploy the site.

3. **Deploy** — rebuilds the static site from saved, published content. The panel summarizes pending changes below the deploy control. Open the change list for details. Build and distribution progress appear here; a public link is shown only after the deployment has been verified.

The Pages list also provides a site publishing control. If deployment is locked, follow the link to [Publishing setup](https://typeroll.com/docs/guides/customer-publishing/). You can keep editing and use expiring previews while setup is incomplete.

### Reviewing before you save

[Section titled “Reviewing before you save”](https://typeroll.com/docs/guides/the-editor/#reviewing-before-you-save)

If the AI agent built something substantial, use **Review changes**. It shows the saved page and your draft side by side in the same renderer, plus a structured list of what changed block by block.

That’s the intended way to audit an agent’s work: look at the diff, then save.

## HTML-mode pages

[Section titled “HTML-mode pages”](https://typeroll.com/docs/guides/the-editor/#html-mode-pages)

Pages in HTML mode get a different editor — a CodeMirror pane with syntax highlighting instead of the block library, plus the same preview, metadata and Publish menu.

You also get **SERP** and **Open Graph** previews showing how the page will look in Google results and when shared on social, and a **History** panel for restoring earlier revisions.

Switch a page between modes with the **Content mode** control. Converting HTML to blocks is heuristic — check the result. Converting blocks to HTML discards the block tree. Both directions save a revision first, so neither is a one-way door.

## Templates and custom blocks

[Section titled “Templates and custom blocks”](https://typeroll.com/docs/guides/the-editor/#templates-and-custom-blocks)

Two related editors, reachable from the site sidebar:

* **Templates** — a block tree that wraps a page’s content. Build the shared outer structure once, drop a **content slot** where the page’s own blocks should render, then assign the template to pages.
* **Blocks** — create reusable custom block types for this site: schema, HTML template, scoped CSS, and optionally client-side JavaScript (which requires an explicit opt-in, because it runs in your visitors’ browsers).