InSpec documentation

InSpec is a standalone CSS editor for live web pages. Click any element, dial in the styles with real visual editors, copy the result back out as paste-ready CSS — and the edits stick across reloads, automatically. Think of it as Chrome DevTools turned into the design tool it always wanted to be.

Installation

InSpec comes two ways. The direct download from bendansby.com/apps/inspec is a standard .dmg — drag InSpec.app into Applications. The Mac App Store version installs the usual way. Requires macOS 14 Sonoma or later; universal binary.

Your first edit

The five-second tour:

1. Type a URL into the address bar (⌘L) and load the page.
2. Hover anything — InSpec outlines it in cyan and shows the box-model bands.
3. Click to pin the element (outline turns amber).
4. Edit any property in the sidebar — the page updates live.
5. Reload. The edit re-applies automatically.

Click-to-pick

Inspect mode is on by default. As you move the cursor across the page, InSpec draws a cyan overlay around whatever's under the cursor, plus alignment guides extending to the page edges and box-model bands for margin (orange) and padding (green). A small badge shows the element's pixel dimensions and tag.

Hold ⌥ to toggle inspect mode off temporarily — useful for clicking through to a link or button without picking it.

Pinning an element

Click any element to pin it. The cyan hover outline becomes a persistent amber outline and the inspector populates with the element's CSS. The pin sticks through scroll, resize, and JavaScript-driven layout changes — InSpec re-resolves the element on every animation frame so the outline tracks it even as the page reflows.

Esc deselects.

Walking up the tree

The cascade list at the top of the inspector shows the pinned element's ancestor chain. Click any row to re-pin to that ancestor — handy when you actually need to style the parent container instead of the leaf you clicked on.

The inspector

The right sidebar lists every CSS rule whose selector matches the pinned element, in cascade order, with the rule's declarations underneath as editable rows. Rules are read straight from the page's stylesheet source, so what you see is what the author wrote — no longhand expansion of font, background, or other shorthands. Declarations shadowed by a higher-cascade rule are hidden so the panel stays scannable. Toggle properties off with the checkbox; edit values inline; press ↩ to commit, Esc to revert. Numeric fields support ↑/↓ for ±1 and ⇧↑/⇧↓ for ±10.

Variants

Above the rules pane, a strip lists every pseudo-class and @media context the page authors against the inspected element — :hover, :focus, :focus-visible, :active, :disabled, :checked, :hover @ (prefers-color-scheme: dark), print, and so on. Each row carries a glyph keyed to the variant type and a badge with the number of properties that variant changes.

Click a variant and InSpec promotes its declarations onto the live element with !important, so you can see and edit the hover state without holding the mouse there, the dark-mode variant without flipping system appearance, the print rule without opening print preview. The rules pane re-evaluates against the chip rather than the cursor's real-time state, so a :hover rule no longer flickers in just because your mouse drifted across the element.

The Variant rules only checkbox (on by default once a variant is active) narrows the rules pane to just the rules contributing to that variant. Turn it off to see the full cascade alongside.

Visual editors

Whenever a property has a richer affordance than a text field, InSpec shows it. Click the swatch / chip next to the value to pop the editor:

• Color — system colour picker for any colour-typed property.
• Box shadow / text shadow — drag-based offset, blur, and spread; inset toggle (shadows only).
• Border radius — visual four-corner dial.
• Filter / backdrop-filter — chain of nine functions (blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia) with per-function sliders.
• Flex — picker for direction, justify, align, gap, wrap.
• Grid — template-columns / template-rows builder.
• Background image — gradient and image-URL composer.
• Cubic bezier — visual curve editor for transition / animation timing.

CSS variables

InSpec extracts every --name: value declaration from the page's stylesheets and offers them in autocomplete whenever you're editing a compatible property — colour vars in colour fields, length vars in length fields, etc. Resolved values render as a pill next to the var(--name) reference so you can see what the variable actually is at a glance. (Toggle the pill view off in Preferences if you prefer raw var() syntax.)

Adding a property

Click the Add pill on the filter bar to open the Add property modal. Type a property name (with autocomplete) and a value, then pick a save target: Inline (element.style), the <style> block in <head>, or any of the page's attached stylesheets. The target rides along with the override so Save to source and Copy CSS by stylesheet route it correctly the first time. You can retarget any edit later via the chip on its row in the overrides sheet.

Overrides across reloads

Every edit you make is an "override" — a small record of selector + property + value. Overrides persist to UserDefaults keyed by the page's URL (scheme, host, path). On the next reload InSpec re-injects them as a stylesheet before the page paints, so your edits are already in place by the time you see the page.

Two overrides for the same selector + property update in place (no duplicates). A toggle next to each override lets you A/B-compare without deleting.

The All Overrides modal

From the inspector's … menu, Show All Overrides opens a sheet listing every override for the current page. Filter by source stylesheet, enable / disable individually, delete individually, or select-and-copy as a single CSS block.

Clearing overrides

The nuclear option: View → Clear Overrides on Page deletes every override for the current URL and reloads. Useful for resetting your work to compare with the original, or starting fresh on a section you've been over-iterating.

Viewport presets

The viewport picker offers seven sizes:

• Fill — match the InSpec window width.
• Desktop — 1440 px.
• Laptop — 1280 px.
• Tablet landscape — 1024 px.
• Tablet — 768 px.
• Phone large — 414 px.
• Phone — 375 px.

Switching a viewport resizes the webview in place — no reload flash, JS state preserved.

Per-breakpoint overrides

An override can be scoped to a single @media query. When you make an edit while a narrow viewport is active, the inspector pre-checks the matching breakpoint so the override only fires there. The copy-out wraps the rule in the right @media automatically.

Copy as paste-ready CSS

Every override has a Copy button. The copied text is a complete CSS rule formatted to drop straight into your source stylesheet — selector, properties, and a wrapping @media query if the override targeted a breakpoint. Multi-select overrides in the All Overrides modal to copy a group as a single block.

Screenshot capture

File → Capture… (⇧⌘S) opens the capture sheet. Pick visible viewport or full-page, tick which viewports to render, and InSpec renders each one off-screen with your overrides applied. Output goes to a folder, or straight to MockHop (see below).

Hand-off to MockHop

If MockHop is installed, the capture sheet shows an extra Capture to MockHop button. InSpec builds a .mockhop document with each captured viewport labelled (e.g. "1440 px") and opens it directly in MockHop for annotation and export. One-click handoff; no save-and-open shuffle.

Tabs & sessions

InSpec is multi-tab. ⌘T opens a blank tab; drag to reorder; ⌘W closes (flips to Close Window when the last tab is gone). Each tab's overrides, scroll position, and inspection selection persist independently. Restore Session in Preferences brings every window's tab state back on next launch.

Freeze the page

View → Freeze Page (⌥⌘F) suspends JavaScript on the active tab — animations stop, scroll-driven effects pause, modal popups don't re-trigger. Useful when you're trying to inspect something that won't sit still. Toggle off to thaw.

Alignment guides

View → Show Alignment Guides (⇧⌘G) extends the hover overlay's vertical and horizontal lines to the full page width and height, so you can eyeball how the pinned element lines up with everything else. Global toggle — applies in every window.

Preferences

• Restore Session — re-open last window state on launch. Default on.
• Show Color Swatches — render a tiny colour pill next to colour-typed properties in the inspector. Default on.
• Show Node Styling — paint annotation badges on the live page. Default on.
• Show Resolved Variables — render var(--name) references as a pill showing the computed value. Off shows the raw var() text instead. Default on.

Keyboard shortcuts

License & trial

Two distribution paths:

• Mac App Store — purchase and updates handled by Apple. No license keys.
• Direct download — licensed via Lemon Squeezy. InSpec → Buy License… opens checkout, Enter License… activates the key from the purchase email. Activation is online; cached locally for up to 7 days offline.

Unlicensed direct-download copies show a one-screen reminder roughly every tenth CSS-edit batch after a 7-day grace window. No features are locked, no overrides are deleted — the reminder offers Buy, Enter License, or Maybe Later.