dev-lines v0.2.0

See the lines. Before you ship the bug.

A layout debug overlay — center/width/padding guides, depth-colored section outlines, labels, and spacing distances — for any page, in any framework. Zero dependencies.

The toolbar below ships inside the engine (toolbar: true) — hit power, then O G L I.

Install

1

Add the package

$ npm i -D @dev-lines/core
2

Create & enable

import { createDevLines } from "@dev-lines/core";

const dl = createDevLines({ contentWidth: 1280, paddingX: 24 });
dl.enable(); // or toggle with ⌘/Ctrl+Shift+L
1

Add the package

$ npm i -D @dev-lines/core
2

Render it, gated to dev

import { DevLines } from "@dev-lines/core/react";

{process.env.NODE_ENV === "development" && <DevLines contentWidth={1280} paddingX={24} />}
1

Drop in a module script — no build step

<script type="module">
  import { createDevLines } from "https://esm.sh/@dev-lines/core";
  createDevLines({ contentWidth: 1280, paddingX: 24, start: true });
</script>

What you get

+Guides — viewport center cross, plus optional content-width and padding edges.
+Depth outlines — colored rings around every flex/grid container, up to 12 nesting depths.
+Labels — name · tag · size · layout, on hover or all at once.
+Distances — hold Alt to measure the gaps from a box to its container.
+Box model — the hovered box shows its padding and flex/grid gaps as tinted bands. B toggles.
+Inspect — press I to lock a box, then walk the tree with the arrow keys.
+Agent handoff — press C to copy a box's handle (name · selector · tag · size · display · padding · gap) for an AI coding agent.
+Toolbar — an optional on-page pill (toolbar: true), the same one running on this page.
+Non-invasive — one fixed overlay layer, never mutates your DOM. Zero dependencies.

Keyboard

⌘/Ctrl ⇧ Ltoggle the overlay
Otoggle outlines
Gtoggle guides
Lcycle labels — off → hover → all
Ilock inspect on a box — arrows walk the tree
Btoggle box-model bands (padding + gap)
Ccopy the locked/hovered box's handle
Alt (hold)show spacing distances
Escunlock inspect · disable