Caliper logo

Caliper

Essential tooling for detail-obsessed design engineers. High-precision browser measurements, projections, and layout auditing.

Installation

Step 1: Install the package

pnpm install @oyerinde/caliper

* Optional if you're only using the global CDN script.

Step 2: Initialize in your project

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {process.env.NODE_ENV === "development" && (
          <Script
             src="https://unpkg.com/@oyerinde/caliper/dist/index.global.min.js"
             data-config={JSON.stringify({ 
               theme: { primary: "#AC2323" } 
             })}
             strategy="afterInteractive"
          />
        )}
        {children}
      </body>
    </html>
  );
}
Live Audit Playground

Select an element (Ctrl + Click + Hold), then hold Alt and hover to measure. Press Space to freeze, then use the calculator.

Ready to audit...
Target A
Target B
Flex Growth

Configuration

export interface CaliperConfig {
  theme?: ThemeConfig;          // Visual appearance (colors, shadows)
  commands?: CommandsConfig;    // Keyboard shortcuts
  animation?: AnimationConfig;  // Boundary box lerp behavior
  debug?: boolean;              // Enable debug logging (default: true). All logs are stripped in production.
}

How to Use

Core Measurement

  • 1. Ctrl + Click + Hold — Select an element to begin (250ms hold)
  • 2. Hover — Change focus or view relative distances
  • 3. Alt + Hover — Hold to reveal measurements to other elements
  • 4. Space — Freeze the current measurements
  • 5. T, R, B, L, G (or Click) — Send distances directly to the calculator.

Projection (Edge Alignment)

  • W / A / S / D — Project element edges across the viewport to check alignment. (Requires active selection)
  • Numeric Input — While projecting, type a number to align the projection to a specific edge distance.

Viewport Rulers

  • Shift + R — Create a pair of vertical and horizontal guidelines at the cursor.
  • Precision Control — Select a ruler and use Arrow Keys to nudge.Ctrl+Arrow: 10px | Shift+Arrow: 0.1px
  • Chained Measurement — Shift + Click multiple parallel rulers to calculate and reveal distances between them.
  • Magnetic Snapping — Rulers automatically snap to boundary boxes and active projection lines when dragged nearby.
  • Deselect/Remove — Click empty space to deselect; press Delete/Backspace to remove.
  • Input Priority — Typing operators (+ - * / .) automatically focuses the calculator for instant audits.
  • Escape — Clear all rulers, calculators, and projections.

Excluding Elements

  • data-caliper-ignore — Add this attribute to any element you want Caliper to skip during measurement and snapping.

Command Palette

ActionShortcut
Activate
Alt
Freeze/Unfreeze
Space
Select Element
Ctrl + Click + Hold
Clear Selection
Escape
Calculator: Top
t
Calculator: Right
r
Calculator: Bottom
b
Calculator: Left
l
Calculator: Distance
g
Projection: Top
w
Projection: Left
a
Projection: Bottom
s
Projection: Right
d
Viewport Ruler
Shift + r
Chain Rulers
Shift + Click
Nudge Ruler
Arrow Keys