Every feature, explained.

• Hover inspector with the DevTools box model

  Hover any element for its margin, border, padding and content in DevTools' colours, with each size written in its band.

  Read the docs

• Distances, insets and overlaps

  Select one element and hover another for the gaps between them, the insets inside, or how much they overlap.

  Read the docs

• Pinned measurements

  Pin an element with Space, then hold Shift to measure from it to anything under the cursor.

  Read the docs

• Every unit: px, rem, em, %, vw, vh, device px

  Read values in the unit your design uses. Nothing is rounded before you see it.

  Read the docs

• Parent, child and sibling navigation

  Walk the DOM with Alt+Shift+arrows (⌥⇧ on a Mac), and step through stacked elements with [ and ].

  Read the docs

• Pinned inspector cards

  Pin several elements as floating cards to compare their sizes, spacing and type side by side.

  Read the docs

• True geometry for rotated and scaled elements

  Rotated, scaled and skewed elements are outlined on their real shape, with their own size and angle.

  Read the docs

• What is blocking this click

  Finds the overlay or rule that stops a click from landing, at its centre, inside it or along its edge, even inside a frame, with both z-indexes side by side.

  Read the docs

• Measure inside images and canvas

  Measure to the edges of shapes drawn inside pictures and canvas.

  Read the docs

• Distances across iframes

  Measure between an element on the page and one inside a same-site frame, and between two in a scaled frame in that frame's own pixels.

  Read the docs

• Page rulers with crosshair

  Rulers along the top and left in your unit, counting from the viewport, the document or the selection.

  Read the docs

• Snapping guides, saved per site

  Drag guides from the rulers. They snap to edges and centres, take exact positions, and are there when you come back.

  Read the docs

• Flex and grid inspector

  Flex items, gaps and grid tracks drawn on hover the way DevTools draws them, a Layout section with the container's and item's settings, and grid overlays kept on screen with line numbers and area names.

  Read the docs

• X-Ray

  Outline every element at once to see the page's structure at a glance.

  Read the docs

• Column grid overlay

  Lay your design's columns, rows and baseline over the page, from a preset or your own numbers, remembered for each site.

  Read the docs

• Breakpoint lines

  Every width and height the page's media queries switch at, and each container query inside its container, with the rules that change at each width. Click a width to resize the window to it.

  Read the docs

• Responsive canvas

  The page at several viewport sizes side by side, snapping to its breakpoints and scrolling together.

  Read the docs

• Design overlay

  Lay a picture of the design over the build, half transparent or as a difference, and line it up by dragging, with the arrow keys, on the selected element or by matching the page. One design is remembered per site and window width.

  Read the docs

• Stacking-context explorer

  Shows why one element sits on top of another: its contexts, what paints beside it in order, the top layer and view transitions.

  Read the docs

• What causes horizontal scroll

  Finds the element pushing the page wider than the screen and says why: 100vw, a negative margin, an offset, text that will not wrap or a fixed width. Pages written right to left too, and boxes whose content spills out below them.

  Read the docs

• Colour picker with tokens

  A loupe up to 32× over the real pixels that names the CSS colour behind them and the token that holds it, in seven formats.

  Read the docs

• Text edges

  Measure text from its glyphs: cap height, x-height, baseline and descender, within half a pixel.

  Read the docs

• Page colour palette

  Every colour on the page, inside web components and frames too, with what it paints and how often. Near duplicates folded together and named, to copy as CSS variables.

  Read the docs

• Download the design system

  The page's colours, type, spacing and radii as W3C design tokens, CSS variables and a Tailwind theme, in one zip with a README.

  Read the docs

• Image and SVG assets

  Every image, background, mask, canvas and inline SVG on the page, with each image's picture sources and srcset candidates: sizes, addresses, copy and download.

  Read the docs

• Token audit

  Flags spacing and colours that are off your design system's scale, and near-duplicates.

  Read the docs

• Fallback-font finder

  Spots text that did not render in the font you chose, shows its whole font stack, and flags bold or italic the browser fakes.

  Read the docs

• Type-scale view

  Every text style on the page with its colours, checked against a modular scale, with near duplicates flagged and the scale to copy as CSS variables.

  Read the docs

• Font report

  Every font stack on the page, what it is really drawn in, and where it falls back or fakes bold.

  Read the docs

• Contrast: WCAG 2.2 and APCA

  Check the selection or the whole page, worst first, and copy the nearest colour that passes.

  Read the docs

• Contrast across states

  Contrast for hover, focus and disabled states, not just the default, with the controls that fail only in a state first.

  Read the docs

• Touch-target size check

  Finds links, buttons and controls smaller than 24 by 24 pixels (WCAG 2.5.8), and counts the ones the standard lets through by spacing or because they sit inline in text.

  Read the docs

• Headings and landmarks outline

  The page's heading outline and landmarks as a screen reader lists them, with skipped levels, empty headings, a missing main and repeated landmarks without a name flagged.

  Read the docs

• Tab order

  Every keyboard stop in the order the Tab key visits them, drawn on the page as numbered badges, with a positive tabindex flagged, the stops that show no focus (WCAG 2.4.7) marked, and each focus indicator's contrast and thickness checked (WCAG 2.4.13).

  Read the docs

• Colour-blindness simulation

  See the whole page as people with protanopia, deuteranopia, tritanopia or no colour vision do, at full or partial strength, or blurred as with low vision, to find where colour alone carries meaning.

  Read the docs

• Full accessibility audit

  axe-core's rules run on the page, issues grouped by impact, each with its elements and a link to how to fix it.

  Read the docs

Coming soon: Contrast for icons and borders · Contrast of text over images · Tab order and focus

• Matched rules and the cascade

  Every rule that applies, in cascade order, with layers, container queries and var() chains resolved.

  Read the docs

• Computed CSS, copyable

  The values you check first (size, box, layout, type, colour), then every resolved value, ready to copy.

  Read the docs

• Shadow DOM, open roots

  Hover, select, search and X-Ray reach inside open shadow roots, so the button inside a component is the one you get.

  Read the docs

• Closed shadow roots

  Inspect inside closed shadow roots too, which a page cannot hide from an extension.

  Read the docs

• Inspect inside frames

  Inspect inside same-site iframes: hover, select, measure and read their CSS.

  Read the docs

• Force :hover, :focus and :active

  See an element's other states without moving the mouse.

  Read the docs

• Copy as Tailwind, CSS or JSX

  Turn an element's styles into Tailwind classes on the default scale where they land on it, plain CSS or a JSX style object, with its ::before and ::after, or copy it with everything inside it.

  Read the docs

• Shadow and gradient visualizers

  Box shadows and text shadows split into layers, and gradients into their stops, each drawn so you can see what it does, with a button to copy the layer.

  Read the docs

• Animation and transition curves

  Each transition and CSS animation with its timing function drawn as a curve, stairs or points, a dot that runs it, its keyframes, and the CSS to copy.

  Read the docs

• Selector and test locators

  A selector or test locator that survives the next build, for Playwright, Testing Library or Cypress, by role, label, placeholder or text, through frames and shadow roots.

  Read the docs

• Annotate the page itself

  Draw with a pen, boxes, arrows, lines, text and redaction straight on the live page, then capture it with the marks.

  Read the docs

• Capture with bug-report details

  Screenshot an element, an area or the page, with measurements and a Markdown bug report.

  Read the docs

• Capture shortcut

  Press S to capture the selected element, or the visible page when nothing is selected.

  Read the docs

• Transparent backgrounds

  Export an element on its own, with real transparency for rounded corners, shadows and translucent fills.

  Read the docs

• Full-page capture with annotation

  Capture the whole page, then annotate it and hide what is private.

  Read the docs

• Redline spec export

  A component with its size, spacing, type and colours drawn on, as an image, an HTML spec or Markdown.

  Read the docs

• SEO: meta, social previews, checks

  Meta and Open Graph tags, how the page looks when shared, and common SEO problems.

  Read the docs

• Download every image and SVG as a ZIP

  All of the page's images, backgrounds and inline SVGs in one file.

• Page weight

  How much of the page is scripts, styles, images and fonts, from the browser's own record of what it loaded, by kind and by host with third parties marked, with what could be smaller: older image formats, uncompressed text and unused bytes.

  Read the docs

• AEO

  A checklist of what AI agents look for in three levels: robots.txt, sitemap, crawler rules, Content Signals and Markdown; an API catalog and Link headers; OAuth, agent card and bot keys; plus an optional Commerce level. Each found or missing with a sample to copy, beside crawler access, the served HTML and structured data.

  Read the docs

• Technology detection

  The frameworks and libraries a page is built with.

  Read the docs

• Canvas inspection

  Size, pixel ratio, drawing context and the main colours of every canvas on the page.

  Read the docs

• Layout-shift visualizer

  Every layout shift and the page's Cumulative Layout Shift, with where each element was, where it went and the likely cause, a replay on the page, and Largest Contentful Paint and INP beside it.

  Read the docs

Coming soon: AI readiness: content clarity

• Edit CSS live, with a diff

  Edit the page's real rules as you type, step numbers with the arrow keys, turn declarations off, add new ones with suggestions, and undo or revert any change.

  Read the docs

• Live edit with design controls

  Change an element's layout, size, spacing, type, colours, border and position with controls in the side panel, on the real page, and switch every change off and on to compare.

  Read the docs

• Resize on the page

  Drag the selection's handles to change its width and height, snapping to its parent, the edges beside it and its siblings' sizes; drag its padding and margin edges too.

  Read the docs

• Edit inside media queries and states

  Change styles for one breakpoint, for hover, focus or pressed, or for ::before and ::after, written as a rule in Nitpique's own stylesheet; the element is shown in that state while you edit.

  Read the docs

• Apply to every element like it

  Edit the selection alone, or every element with its class or any selector you type, as one rule you can copy as CSS.

  Read the docs

• Change everywhere

  Change a colour, font, text size, spacing or radius once and every element using it follows, however the value is written (hex, rgb(), a variable). One change in Changes, listing the rules it touched.

  Read the docs

• Rules you can rename, recolour and add

  In the Rules view, rename a property in place, pick a colour from the swatch beside its value, edit a rule's selector, and add a new rule for the selection.

  Read the docs

• Edit the page's elements

  Cut, copy, paste, duplicate and delete elements on the page, each a change you can switch off, undo or hand off.

  Read the docs

• Swap an image or SVG

  Replace a picture in place with a file or a pasted image, or an inline SVG with your own, as a change.

  Read the docs

• Isolate an element

  Hide everything around an element to look at it alone, where it is.

  Read the docs

• Versions of your changes

  Keep the changes as version A, try another direction as B, and switch between them on the page.

  Read the docs

• Changes as a prompt for your coding agent

  Copy every change with its selector, file and what to do, ready for Claude Code, Cursor or Copilot to make in the source.

  Read the docs

• Edit text in place

  Rewrite page copy where it stands, kept as a change you can undo or copy.

  Read the docs

• Quick actions

  Edit text, replace an image, duplicate, delete, drag padding, isolate, undo and redo, right beside the element.

  Read the docs

• Edit Tailwind classes

  Add, remove and change classes with the result shown live; Tailwind utilities are recognised, and one replaces the utility it overrides.

  Read the docs

• Export your changes

  Take your edits away as CSS, with what each value was, as a diff per stylesheet, or as a prompt for a coding agent.

  Read the docs

• Edits saved per site

  Your edits come back when you return: kept per page in your browser and put back when Nitpique turns on there, never sent anywhere.

  Read the docs

Coming soon: Open the source file

• Pause to use the page

  Step aside to click and type on the page, keeping your selection, guides and rulers. Hover menus stay open while paused.

  Read the docs

• Freeze hover menus

  Keep dropdowns and hover states open while you measure them.

  Read the docs

• Custom shortcuts

  Change any key to suit your hands.

  Read the docs

• Customizable toolbar

  Choose the buttons, their order, and which sit in the More menu.

  Read the docs

• Theme and accent colour

  The panel, toolbar and cards follow the system, or stay light or dark, in one of seven accent colours that all pass the contrast rules.

  Read the docs

• A side panel that follows your tab

  A docked panel stays open across tabs and shows the page in front, not the last one.

  Read the docs

Coming soon: Translations · Command-line audits · Safari · Figma plugin

• Annotator on the web

  Mark up screenshots and any image in the browser, free, with no extension and no account.

  Read the docs

• Pen

  Draw freehand: a smooth line you can move, recolour, thicken or dash, and undo.

  Read the docs

• Start from a sample or a blank canvas

  Try every tool on a sample page with marks already on it, or sketch on a blank canvas, in one click.

  Read the docs

• Arrows and shapes

  Straight, double, curved and elbow arrows, lines, rectangles, ellipses and triangles, solid, dashed or dotted.

  Read the docs

• Text in five faces

  Sans, serif, mono, handwritten or cursive, in three sizes, with a halo that reads on any background.

  Read the docs

• Highlight, blur and redact

  Mark what matters and hide what is private; redaction removes what was under it from the saved image.

  Read the docs

• Several images in tabs

  Open, drop or paste images; each gets a tab with its own marks and undo, kept across reloads.

  Read the docs

• Zoom, copy and download

  Zoom from 10% to 400%, then copy the marked-up image or download it as a full-resolution PNG.

  Read the docs

Coming soon: MCP server for AI agents (Pro) · AI page review (Pro) · Compare with Figma (Pro) · Sync across devices (Pro) · Comments on pages (Pro) · Bug reports to Jira, Linear and GitHub (Pro) · Share edits (Pro) · Staging vs production (Pro) · Shareable audit reports (Pro) · SSO for organisations (Pro)