# The editor

> The theme editor at themes.extension.dev, with its browser picker, live Chrome preview, preview states, undo history and autosave.

Canonical: https://docs.extension.dev/themes/editor
This page as Markdown: https://docs.extension.dev/themes/editor.md
Section: Themes
Siblings: [Theme builder](https://docs.extension.dev/themes.md) · [Colors](https://docs.extension.dev/themes/colors.md) · [Presets and palettes](https://docs.extension.dev/themes/presets.md) · [Images and tints](https://docs.extension.dev/themes/images.md) · [Import a theme](https://docs.extension.dev/themes/import.md) · [Export and install](https://docs.extension.dev/themes/export.md) · [Firefox preview](https://docs.extension.dev/themes/firefox-preview.md) · [Publish and hand off](https://docs.extension.dev/themes/publish.md)
Map of every page: https://docs.extension.dev/llms.txt · Whole corpus: https://docs.extension.dev/llms-full.txt

---

# The editor

The editor at [themes.extension.dev](https://themes.extension.dev) paints a
Chrome window as you change colors, images and tints, then exports the
result as a theme package. Reach for it when you want a browser theme
without hand-writing a manifest.

## Quick start

1. Open themes.extension.dev and pick **Chromium** on the browser picker.
2. Change a color in the sidebar. The Chrome window on the canvas repaints.
3. Open **Theme settings** to name the theme, then export it from
   [Export and install](/themes/export).


## How it works

**The browser picker.** The home address `/` shows two cards under "Pick the
browser that shows your theme". **Chromium** opens the editor at `/chromium`
in the same tab. **Firefox** opens the [Firefox preview](/themes/firefox-preview)
at `/firefox` in a new tab. The card you opened last carries a "Last used"
tag, read from this browser's storage, and nothing redirects you.

**The Firefox card can be blocked.** On a phone, or in a browser without
WebAssembly JavaScript Promise Integration, the Firefox card loses its link
and states why: "This browser cannot run the Firefox engine." The Chromium
card always works on a desktop browser.

**The live Chrome preview.** The canvas holds a Chrome window drawn by the
emulator with mac window controls and a New Tab page. Every edit rebuilds the
manifest and the emulator resolves it the way Chrome resolves a theme, so the
window repaints on each change. What the preview derives, such as the omnibox
field, is what installs.

**Preview states.** The strip beside the header holds two checkboxes,
**Inactive window** and **Incognito mode**, both off by default. Inactive
shows the window out of focus, and the inactive frame color is editable only
while it is on. Incognito shows the stock incognito window, because Chrome
ignores themes there.

**Phones are turned away.** Under a desktop width the editor shows "This
editor needs a bit more room." and asks you to open it on a desktop.

**Theme information.** The settings dialog holds four fields: theme name,
author, version and description. All four land in the manifest. The name
cannot be empty and the version must be a Chrome version, or export is
blocked.

**Undo and redo.** Every edit is one history step. Edits within 500 ms of
each other merge into a single step, and the history keeps the last 50. The
dock carries Undo and Redo buttons, and the keyboard works when no field has
focus.

**Autosave.** The editor saves the theme to this browser's storage 300 ms
after the last edit, under the key `chrome-theme-visualizer-v2`. When storage
is full a toast reads "Your work is no longer being saved" and stays until
saving works again. The Firefox preview reads the same key.

**The dock.** A row of buttons straddles the bottom edge of the window:
Redo, Undo, the pointer toggle, Presets, Colors, Images and Tints. A section
button opens the sidebar on that section.

## Reference

| Address | What it shows |
| --- | --- |
| `/` | The browser picker |
| `/chromium` | The editor with the live Chrome preview |
| `/firefox` | A real Firefox in WebAssembly, in a new tab |

| Shortcut | Action |
| --- | --- |
| Cmd+Z or Ctrl+Z | Undo |
| Cmd+Shift+Z or Ctrl+Shift+Z | Redo |
| Cmd+Y or Ctrl+Y | Redo |
| Esc | Clear the pointer selection, then leave pointer mode |

| Storage key | Holds |
| --- | --- |
| `chrome-theme-visualizer-v2` | The theme and its metadata, saved 300 ms after an edit |
| `themes-last-engine` | The browser card you opened last |
| `chrome-theme-color-history` | The twelve most recent colors |

## When it fails

- **The Firefox card has no link and reads "This browser cannot run the
  Firefox engine."** The browser lacks WebAssembly JavaScript Promise
  Integration, or you are on a phone. Open the page in a current desktop
  Chrome.
- **The page reads "This editor needs a bit more room."** The viewport is
  under the desktop width. Open the editor on a desktop.
- **A toast reads "Your work is no longer being saved."** Browser storage is
  full. Export the theme or remove large images, and the toast clears when a
  save succeeds.
- **Cmd+Z does nothing.** A text field has focus. Click the canvas or press
  Undo on the dock.
- **The inactive frame field is missing.** Turn on **Inactive window** in
  the preview states strip.

## Next

- [Colors](/themes/colors)
- [Presets and palettes](/themes/presets)
- [Export and install](/themes/export)
- [Firefox preview](/themes/firefox-preview)