LOGO BY - b3an33
A browser extension that helps with design audit. Match web layouts with Figma designs through real-time element inspection, measurements, and visual overlays.
| Flavour | Browsers | Web Store Links & Stats |
|---|---|---|
| Chromium | Chrome, Edge, Brave, Vivaldi, Arc, Dia | |
| Firefox | Firefox, Zen |
Chromium-based builds declare a minimum Chrome version via WXT_MIN_CHROME_VERSION (see wxt.config.ts); the default is in mise.toml [env] (or a local .env if you set one). Firefox strict_min_version stays a fixed value in the manifest for now: we do not drive it through the same env setup because automated tests run against Chromium only, so we cannot validate or bisect a Firefox floor yet. Scope and migration order: issue #35.
Any individual or web development teams including front-end developers, UI/UX designers, QA engineers, and product managers.
Important
Personally, I'm building this tool to act as an active visual debugger, since it is what I struggle with the most.
- For others, it's intended to be used as an audit tool at the end or during development. Use it to reason about the layout like you would in a prototyping tool like Figma, or Adobe XD.
- This tool won't automatically point out alignment or style mismatch with your designs.
- You may find some shortcuts not implemented or upto the industry standard.
- This tool doesn't require you to login into any of your fav prototyping tool.
- Distance Measurements: Meeasurements between element and it's parent
- Dynamic Rulers: Mouse-following coordinate system
- Element Inspection: Real-time hover detection with element information
- Keyboard Shortcuts: Quick access to all features
- Lock/Unlock: Persistent element tracking
- Screenshots: Capture current page state with overlays
- Side Panel: Detailed element properties, computed styles, attributes
- Toolbar: Floating interface with auto-positioning
- Visual Overlays: Highlight elements and parent relationships
- Feature Voting: Vote for your features to be developed
- Design Mode: Edit text on screen
- Rainbow Layouts: Nested rainbow themed overlay for layers
- Auto-Hide/Move: Smart UI positioning to avoid interference
- Neighbour Analysis: Automatic sibling/parent distance detection
- Viewport Tools: Responsive design testing utilities
- Parent/Sibling Traversal: Navigate element hierarchy
- Enhanced Measurements: Area calculations, angle measurements
- Multiple Trackers: Track multiple elements simultaneously
Requirements: Node.js ≥24, PNPM 10.12.3
pnpm install
pnpm dev:firefox # Development mode for Firefox
---- or ----
pnpm build:firefox # Build for Firefox
pnpm zip:firefox # Create distribution package for firefox- Reactive Stores: Svelte 5 runes
- Cross-Context Communication: Typed message bus system
- Storage Sync: Browser storage integration with per-domain settings
src/lib/
├── components/ # UI components (Tracker, Ruler, Measurements)
├── modules/ # Features (Toolbar, SidePanel, EventsManager)
├── core/ # Business logic (ElementInspector, MessageBus)
└── store/ # State management (UI, Trackers, Metadata)
- Debug Interface: Performance metrics, message history (dev mode only)
src/
├── entrypoints/ # Extension entry points
│ ├── background.ts # Background script
│ ├── content.ts # Content script injection
│ └── popup/ # Extension popup
├── lib/
│ ├── Main.svelte # Content script root
│ ├── components/ # Reusable UI components
│ ├── modules/ # Feature modules
│ ├── core/ # Core utilities
│ └── store/ # State management
└── utils/ # Helper functions
License: MIT | Powered By: Vite + WXT + Svelte + TypeScript + Ark UI