OutlineKit: CSS Layout Outliner

OutlineKit draws a thin outline around every element on the page so you can see the layout at a glance. It is made for front-end developers, designers and anyone fixing a broken layout.

Outlines only. OutlineKit never paints coloured blocks over the page unless you turn on light fills yourself, so you can still read the text and see the real colours.

Free features:

• Outline every element, coloured by nesting depth, by tag, or in one colour
• Outlines sit inside each box, so overflow: hidden does not cut them off
• Hover label with tag, id, classes, width × height, display and position
• Spacing view on hover: margin, padding and content boxes with pixel values
• Remember on for a site: outlines turn on by themselves when you open that site again (asks for access to that site only)
• Keyboard shortcuts: Alt+Shift+O for outlines, Alt+Shift+L for labels
• Hold Alt to freeze the label, Esc to hide it
• Line width and opacity sliders, skip list for cookie bars or chat widgets
• Works inside open shadow DOM and same-site frames, per tab
• Layout report totals: element count, deepest nesting, how many elements are wider than the viewport

Pro comes with Web Dev Pro (€30 once at https://digivibetech.gumroad.com/l/vbvjjb, web-dev extensions + Valuepad) or Browser Pro (€35 once at https://digivibetech.gumroad.com/l/usaco, all DigiVibeTech browser extensions), one payment, no subscription:

• Full layout report copied as Markdown: elements by depth and by tag, and every element wider than the viewport with its selector and right edge (first 25 listed, the rest counted)
• Limit outlines to one part of the page (for example main or .card)
• Your own depth colours
• Settings saved per site: colour mode, width, scope and colours follow each project

Limits:

• Frames from another site are not outlined or scanned unless you give OutlineKit access to that site; the report says how many were not read.
• Closed shadow DOM cannot be read by any extension; open shadow DOM is covered.
• Depth mode has 12 colours; deeper elements share colour 12. The hover label and report show the real depth.
• Tag mode colours 57 common tags; other tags are grey.
• Browser pages (about:, chrome://) and add-on stores cannot be outlined.

Privacy: OutlineKit only runs on a tab after you click its icon or press the shortcut. It does not collect, store or send any data. No analytics, no ads. Settings stay in your browser. A licence key is checked once with Gumroad when you enter it.

Support: https://digivibetech.com/support/ Privacy policy: https://digivibetech.com/privacy/outlinekit/