Add to Chrome
SafariSupported browsers
Chromium browsers with Manifest V3 side panels — Chrome, Edge, Brave, Arc — install from the Chrome Web Store and render the editor in the right-side panel. Firefox (121+) installs from Firefox Add-ons (AMO) and renders in the native sidebar. Safari on Mac installs manually from designmode-for-safari.zip on the latest GitHub release (https://github.com/SandeepBaskaran/design-mode/releases/latest); the setup takes under 30 seconds. It's a desktop-primary experience.
Identical on every browser
The whole editing surface is the same: inspect any element; edit Position, Layout, Typography, Fill, Stroke, Effects, Motion, and Layout Guides; the Layers tree; the Changes tab with export/import; comments; element and viewport screenshots; DOM edits (duplicate, delete, reorder); the design-token engine; and the full MCP / send-to-agent handoff. Firefox always opens its sidebar; Chrome can launch into its side panel or Chrome-only floating surfaces.
Browser-specific features
Three extras rely on Chromium-only browser APIs and are hidden on Firefox: the pop-out floating window (needs the side-panel + windows APIs), Picture-in-Picture “pin on top” (needs the Document Picture-in-Picture API), and the screen eyedropper “Pick” button (needs the EyeDropper API). On Firefox, colour entry still works via the HSV picker, the site-token list, and hex/RGB input — only the whole-screen sampler is unavailable. Safari has its own Web Inspector installation and integration details below.
Safari specifics
Safari on Mac uses a temporary Web Inspector extension from the latest GitHub release. Open Safari Settings → Developer → Add Temporary Extension, choose designmode-for-safari.zip, and re-add it after Safari quits or the temporary extension expires. The main editing workflow is available in the Inspector; this build does not use the Chrome Web Store or Firefox Add-ons.
Firefox specifics
Design Mode opens as Firefox's native sidebar rather than a right-docked panel; the toolbar button, the View → Sidebar menu, and Alt+D all toggle it. For local files, Firefox manages file:// access from about:addons (there's no per-extension “Allow access to file URLs” toggle like Chrome's).