Essential tooling for detail-obsessed design engineers.
Installation
// app/layout.tsx (or _document.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.js"
data-config={JSON.stringify({ theme: { primary: '#AC2323' } })}
strategy="afterInteractive"
/>
)}
{children}
</body>
</html>
);
}Configuration
export interface OverlayConfig {
theme?: ThemeConfig;
commands?: CommandsConfig;
animation?: AnimationConfig;
}How to Use
Core Measurement
- 1. Ctrl + Hold + Click — Select an element to begin (250ms hold)
- 2. Hover — Change focus or view relative distances
- 3. Alt — Hold to reveal the measurement overlay
- 4. Space — Freeze the current measurements
- 5. T, R, B, L, D (or Click) — Send distances directly to the calculator.
Projection (Edge Alignment)
- W / A / S / D — Project element edges across the viewport to check alignment.
- 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.Shift+Arrow: 10px | Alt+Arrow: 0.1px
- Chained Measurement — Shift + Click multiple parallel rulers to calculate and reveal distances between them.
- Magnetic Snapping — Rulers automatically snap to active projection lines when dragged nearby.
- Deselect/Remove — Click empty space to deselect; press Delete/Backspace or Double-Click 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
| Action | Shortcut |
|---|---|
| Activate | Alt |
| Freeze/Unfreeze | Space |
| Select Element | Ctrl + Hold + Click |
| Clear Selection | Escape |
| Calculator: Top | t |
| Calculator: Right | r |
| Calculator: Bottom | b |
| Calculator: Left | l |
| Calculator: Distance | d |
| Projection: Top | w |
| Projection: Left | a |
| Projection: Bottom | s |
| Projection: Right | d |
| Viewport Ruler | Shift + r |
| Chain Rulers | Shift + Click |
| Nudge Ruler | Arrow Keys |
Shortcut Configurator
Customize your workflow. Keybindings are local to this generator.Tip: Calculator and Projection modes are state-exclusive, so they can safely share keys (like "D").
Core Commands
Calculator Triggers
Projection Alignment
Ready to paste! 📋