Avemo Dev

A Figma-style grid & layout debugging overlay for the browser, styled like the avemo apps.

Avemo Dev drops a set of design-precision overlays on top of any web page — column grids, baseline grids, row bands, element outlines, and a live hover inspector — driven from a floating, avemo-styled control panel. The entire UI lives inside a Shadow DOM, so the extension's markup and design tokens never leak into (or get restyled by) the page you're inspecting.

Features

• Column grid — Figma-style column overlay with configurable count, gutter, margin, max-width, and alignment (stretch / center). Optional responsive mode with per-breakpoint definitions.
• Baseline grid — horizontal rhythm lines at a configurable step (e.g. 4pt / 8pt) with adjustable color, opacity, and thickness.
• Row overlay — repeating row bands with configurable height, gutter, and offset for verifying vertical rhythm.
• Element outlines — toggle outlines for containers, text nodes, or every element, each with its own color.
• Hover inspector — highlights the element under the cursor and reads out box model, typography, colors, and size.
• Floating panel — draggable, minimizable, avemo-token-styled control panel; no browser popup.
• Per-site persistence — overlay config and panel state are remembered per host and auto-restored on your next visit.
• Presets — one-click built-in presets, plus your own saved custom presets.
• Shadow DOM isolation — the panel and overlays are fully isolated from the host page's styles.

Install for development

Requirements: Node.js and pnpm.

pnpm install
pnpm build

This produces an unpacked extension in the dist/ folder. To load it:

1. Open chrome://extensions in Chrome (or any Chromium-based browser).
2. Enable Developer mode (top-right toggle).
3. Click Load unpacked and select the generated dist/ folder.

For live development with hot-module reloading, run:

pnpm dev

then load dist/ the same way. CRXJS will reload the extension as you edit source files.

Tests

Unit tests (Vitest + happy-dom):

pnpm test

End-to-end tests (Playwright — loads the built extension into Chromium and drives the panel/overlays on a served fixture page):

pnpm e2e:install   # one-time: download the Chromium build
pnpm build         # the E2E suite runs against dist/
pnpm e2e

Keyboard shortcuts

Toggle the panel

Action	macOS	Windows / Linux
Toggle Avemo Dev panel	⌘ ⇧ Y	Ctrl + Shift + Y

Clicking the toolbar icon also toggles the panel. You can rebind the toggle shortcut at chrome://extensions/shortcuts.

In-panel keys

While the panel is open (and you're not typing in a field), single-key shortcuts control the overlays:

Key	Action
G	Toggle column grid
B	Toggle baseline grid
R	Toggle row overlay
O	Toggle element outlines
I	Toggle hover inspector
Esc	Close the panel

These keys are rebindable from within the panel.

Presets

Built-in presets ship ready to use and are always available:

• Avemo 12-col — a 12-column grid (16px gutter/margin).
• 8pt baseline — an 8px baseline grid.
• 4pt baseline — a 4px baseline grid.
• Centered 1200 · 12 — a centered 12-column grid capped at 1200px (24px gutter/margin).

Save your own configurations as custom presets, which persist across sessions.

Tech stack

• Vue 3 + Vite for the UI and build tooling
• CRXJS Vite plugin for MV3 extension bundling and HMR
• Pinia for state management
• Shadow DOM for full style isolation from the host page
• TypeScript (strict mode) throughout

Built as a Manifest V3 extension: a content script injects the panel and overlays into a Shadow DOM, while a background service worker translates the keyboard command / toolbar-icon click into a toggle message for the active tab.

Project structure

src/
├─ background/        # MV3 service worker (toggles the panel)
├─ content/           # content script + Shadow-DOM host
│  └─ overlays/       # grid, baseline, row, outlines, inspector, tools renderers
├─ ui/                # Vue panel (sections + components)
├─ stores/            # Pinia store — the config contract the UI drives
├─ lib/               # framework-agnostic helpers (color, grid math, storage, …)
└─ styles/            # panel.css — the avemo OKLCH token system

See CONTRIBUTING.md for a fuller tour and the development workflow.

Privacy

Avemo Dev runs entirely on your device. It reads the DOM of the page you're inspecting only to draw overlays and the inspector readout — no page content is ever transmitted anywhere. Overlay configuration and panel state are stored locally in chrome.storage.local. All code and assets (including the Inter font) are bundled with the extension; nothing is fetched and executed at runtime, per Manifest V3 requirements. See SECURITY.md for details.

Contributing

Contributions are welcome! Please read CONTRIBUTING.md for setup, project conventions, and the pull-request checklist. Bug reports and feature requests go through the issue templates.

License

MIT © Philipp Gerger