# Firefox preview

> The /firefox page of themes.extension.dev, where a real Firefox running in WebAssembly repaints your theme and follows every edit from the editor tab.

Canonical: https://docs.extension.dev/themes/firefox-preview
This page as Markdown: https://docs.extension.dev/themes/firefox-preview.md
Section: Themes
Siblings: [Theme builder](https://docs.extension.dev/themes.md) · [The editor](https://docs.extension.dev/themes/editor.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) · [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

---

# Firefox preview

The Firefox preview runs a real Firefox inside the page and installs your
theme into it. Reach for it when the Chrome preview is not enough and you
want to see how Gecko paints the colors before you export the Firefox
package.

## Quick start

1. Open themes.extension.dev and click the **Firefox** card. The preview
   opens at `/firefox` in a new tab and boots the engine.
2. Keep the editor tab open and change a color there. The Firefox window
   repaints with the saved theme.


## How it works

**A real engine, in WebAssembly.** The page boots Firefox compiled to
WebAssembly and installs your theme as a temporary add-on. It is a large
download, so the picker only links the card where the engine can run.

**It follows the editor.** The editor autosaves to this browser's storage
300 ms after each edit, and the browser fires a storage event in every other
tab of the same origin. The preview listens for that event, reads the saved
theme, and reinstalls it. Two saves that produce the same bytes count as one
theme and do not reinstall.

**What it installs.** The preview builds the same manifest as the Firefox
export, with the twelve mapped colors and the Gecko id. The package it
installs holds the manifest only, so images stay out of the preview even
when the export would carry a frame image.

**What it needs.** The engine needs WebAssembly JavaScript Promise
Integration and a desktop browser. On a phone, or where the browser lacks
that integration, the picker shows "This browser cannot run the Firefox
engine" and nothing is downloaded. The `/firefox` address is served with
cross-origin isolation headers, which is why the picker opens it as a full
document in a new tab.

**No editor here.** The page wears the editor's shell, with the breadcrumb
as the way back. There are no fields on it; every edit happens in the
editor tab and arrives through storage.

**A first visit shows the default theme.** A browser that never touched the
editor, or whose storage is empty, installs the default theme.

## Reference

| Requirement | Value |
| --- | --- |
| Address | `/firefox`, opened in a new tab |
| Browser | Desktop, with WebAssembly JavaScript Promise Integration |
| Theme source | The editor's saved theme in this browser's storage |
| Update path | A storage event from the editor tab |
| Installed package | `manifest.json` only, no images |

## When it fails

- **"This browser cannot run the Firefox engine."** The browser does not
  expose WebAssembly JavaScript Promise Integration. Open the page in a
  current desktop Chrome.
- **The Firefox card on the picker has no link.** Same cause, or you are on
  a phone.
- **The preview shows the default theme.** Nothing is saved in this
  browser. Open the editor, make one edit, and the preview follows.
- **An edit did not reach the preview.** The two tabs must share the same
  browser profile and origin, because the bridge is a storage event. A
  private window does not share storage with a normal one.
- **The frame image is missing in Firefox.** The preview installs the
  manifest only. Export the Firefox ZIP to see the frame image in a
  Firefox install.

## Next

- [Export and install](/themes/export)
- [The editor](/themes/editor)
- [Colors](/themes/colors)
- [Publish on Firefox](/publish/firefox)