BLUEPRINT

Print any website as a blueprint.

A copier light scans down the page and redraws it as a cyanotype. Every box gets an outline, the main blocks get dimension lines, headings get their type spec and a title block goes in the corner. Hover to measure, click to pin, press S to save the whole page as one PNG sheet. Esc scans the original back in.

BLUEPRINT

Drag the dashed button to your bookmarks bar, then click it on any website. Or try it on a magazine page.

One file, 37 KB, no dependencies. No network requests, no storage: nothing leaves your browser.

A magazine page turns into a blueprint: a light scans down, white outlines and dimension lines are drawn, the cursor measures a paragraph and the gap to an advert, then the original page scans back in.
Fig. 1. A magazine page, printed. Hover shows the box model; with one element pinned, hovering another shows the gap between them.

What it draws

  1. Outlines

    Anything with a fill, a border or a shadow is outlined in white ink by a pen that follows the light down the screen. Pictures, videos and canvases are printed like cyanotypes and crossed, with their size.

  2. Construction lines

    Header, nav, main, aside, footer and the other layout containers become dashed lines with their name in the margin. Center lines run along the edges of the main columns.

  3. Dimensions and type

    The biggest distinct blocks get dimension lines with arrows and pixel values. Headings get a note with their font, weight, size and line height.

  4. Measuring

    Hover any element to see its margin and padding hatched, its size and its font. Click to pin it, then hover another element: the gap between them is measured, the way design tools do it.

  5. The sheet

    Press S for a PNG of the whole page: outlines, dimensions and every word in the page's own fonts, with a title block underneath.

  6. Nothing is rewritten

    One adopted stylesheet and a canvas on top. No attributes, classes or inline styles are added to the page, so Esc brings it back exactly as it was.

Get itFour ways in, all running the same single file.

Bookmarklet

Chrome, Edge, Safari, Firefox, Arc, Brave

  1. Drag the dashed BLUEPRINT button above to your bookmarks bar. No bar? Ctrl Shift B, or ⌘ Shift B on a Mac.
  2. Open any website and click the bookmark.
  3. Click it again, or press Esc, to put the page back.

Chrome extension

Chrome, Edge, Brave, Arc

  1. Download the repository as a ZIP and unzip it.
  2. Open chrome://extensions, switch on Developer mode, click Load unpacked and pick the extension folder.
  3. Click the icon or press Alt Shift P.

Console

Any browser with DevTools

  1. Open DevTools on any page.
  2. Paste the contents of blueprint.min.js into the console and press Enter.

Userscript

Tampermonkey or Violentmonkey

  1. Open the raw userscript and confirm the install.
  2. Press Alt Shift P on any page.

Keys

HoverMeasure the element under the cursor: margin, padding, size and font
ClickPin the measurement. Hover another element to see the gap
SSave the whole page as a PNG sheet
GGrid on or off
DDimension lines on or off
PClear the pins
EscScan the original back in and switch off

Good to know

Strict sites
The whole engine lives inside the bookmark, so it also runs on sites with a strict Content Security Policy.
Where it can't run
Browser pages such as settings, the extension store and built-in PDF viewers don't allow scripts.
The copier light
Needs View Transitions: Chrome and Edge 111+, Safari 18+, Firefox 144+. Elsewhere the page turns blue at once. With reduced motion on, the drawing simply appears.
Privacy
No analytics, no storage, no servers. The sheet is drawn in your tab and only saved when you press S. Text you typed into forms is never drawn on it.