Grid Overlay Pro View Source Code

An open source browser extension for designers and developers to visualize grid layouts directly on any webpage.

Overview

Grid Overlay Pro is a browser extension that helps designers and developers ensure pixel-perfect alignment by overlaying customizable grid systems on any webpage. Unlike static design tool overlays, it features responsive grid adaptation—automatically adjusting column widths and spacing when the viewport resizes, maintaining consistent proportions across any screen size.

Challenge

Designers rely on grid overlays in tools like Figma to ensure precise alignment and spacing. However, this capability doesn't translate to the browser during development. Developers are left eyeballing measurements or switching between design files and code, slowing down the implementation process and increasing the risk of visual inconsistencies.

Approach

• Initially prototyped as a browser bookmarklet to quickly test the concept, but pivoted to a full browser extension to enable public distribution and persistent settings
• Collaborated with Claude AI to iteratively build and refine features, testing different overlay rendering approaches and control mechanisms
• Implemented responsive grid adaptation as a key differentiator—grids automatically recalculate and adjust when the window resizes, a feature not available in static design tools
• Focused on developer ergonomics with persistent settings, keyboard shortcuts, and minimal UI that stays out of the way
• Open-sourced the project to allow the community to contribute features and adapt the tool to their workflows