dev-lines v0.0.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 runs the real engine on this page — hit power, then O G L.

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.
+Agent handoff — press C to copy a box's handle (name · selector · tag) for an AI coding agent.
+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
Ccopy hovered box's handle
Alt (hold)show spacing distances
Escdisable