Interactive browser overlay

GuideFrame

Figma-style layout grids, rulers, and guides for your running app.

Check spacing and alignment against the real rendered DOM instead of moving back and forth between your browser and static mocks.

This page is the demo.

Turn on GuideFrame, drag a guide from either ruler, then try duplicating and selecting guides together.

or press ⌘ / Ctrl + G

1. Place a guide
2. Option-drag to duplicate
3. Shift-drag to select

GitHub npm @guideframe/core

Built for the browser

Align

Place snapping guides against the real edges and column boundaries in your rendered app.

Measure

Read dimensions, padding, gaps, and alignment without leaving the browser.

Compare

Pin one component and compare it with another using exact DOM geometry.

Get started

Render the overlay once near the root of your app.

root-layout.tsx

import { GuideframeGrid } from "@guideframe/react";
 
export function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <GuideframeGrid rulers />
        {children}
      </body>
    </html>
  );
}

Svelte, Vue, Astro, or plain JavaScript can drive the same engine directly.

guideframe.ts

import { createGuideframe } from "@guideframe/core";
 
const guideframe = createGuideframe({
  columns: { desktop: 12, tablet: 8, mobile: 4 },
  rulers: true,
});
 
// on teardown
guideframe.destroy();

What it covers

Layout grid overlayRulers with document-space ticksDraggable guidesSnapping to element edgesGeometry inspection and comparisonFloating control panelPer-route guide persistenceContainer-scoped overlaysReact and Next.jsSvelte, Vue, and vanilla JS

Interaction reference

Toggle the overlay: Cmd / Ctrl + G
Open the control panel: Cmd / Ctrl + Shift + G
Toggle the rulers: Shift + R
Toggle geometry inspection: Shift + M
Lock every guide: Shift + L
Undo the last guide change: Shift + Z
Nudge selected guides: Arrow / Shift + Arrow

Technical guarantees

Designed for design engineering workflows that need a visual grid while building interfaces.

Keeps the interface lightweight and unobtrusive so the grid stays useful instead of distracting.

Renders inside a shadow root, so your CSS cannot affect the overlay and the overlay cannot affect your layout.

Client-only by design, with production rendering disabled by default in supported build environments.

Add GuideFrame to your app

Start with React, or use the framework-agnostic core package.

install

npm install @guideframe/react

View the source on GitHub