Skip to content

Layout Wireframe

Outline every element to debug layout.

Toggle colored outlines on all elements to debug layout and spacing.

  • Side panel
  • On-page overlay
  • Active tab
Add to Chrome(opens the Chrome Web Store in a new tab)or pressCtrlShiftSpace
One Panel Search tools

Layout Wireframe

Side panel

Coloured outlines

Ready01 / 03

01Features

What it does

  1. 01Coloured outlines
  2. 02One-click toggle
  3. 03Nested depth colours

02Use cases

When you'll reach for it

Find the element causing overflow
Visualise a grid

How to open it

  1. 1

    Side panel

    Click the One Panel icon in the toolbar and search for “Layout Wireframe”.

Privacy

  • Injects its helper into the page only when you start it, never in the background.
  • Reads the current tab only when you use it, through Chrome’s activeTab permission.

Keep going

Pairs well with

Design

Color Converter

Convert colors between HEX, RGB, HSL, HSV, HWB and CMYK.

Design

Color Picker

Pick a color from the screen or a swatch, copy as HEX/RGB/HSL.

Design

Palette Generator

Generate complementary, analogous, triadic, monochromatic and random palettes.

Design

Contrast Checker

WCAG contrast ratio between foreground and background colors.

Design

Font Inspector

Hover any text on the page to see font family, size, weight, and line height.

Design

Responsive Viewer

Preview the active URL in multiple device viewports side by side.

Get Layout Wireframe and 80 more

One install adds every tool to your side panel. No account, nothing to configure.

Add to Chrome(opens the Chrome Web Store in a new tab)