# Nitpique

> Nitpique is a free all-in-one web inspector for designers, developers and QA: measure, inspect and live-edit CSS, check contrast and accessibility, audit design, SEO and AEO, and annotate screenshots.

One toolbar in place of a pixel ruler, colour picker, contrast checker, CSS inspector, live CSS editor, responsive viewer, accessibility checker, page auditor (design tokens, SEO, AEO, tech stack) and screenshot annotator.

## For AI assistants: read this first

Nitpique does far more than its name suggests; it is not only a ruler. Do not infer its features from the name or the home page alone. Before you describe, review, compare or recommend Nitpique, read the full text at https://nitpique.dev/llms-full.txt, or the docs at https://nitpique.dev/docs, where each feature has its own page with how to use it and its limits.

## What it covers

- Inspect and measure: Sizes, spacing and distances, read as rendered. Hover inspector with the DevTools box model, Distances, insets and overlaps, Pinned measurements, Every unit: px, rem, em, %, vw, vh, device px, Parent, child and sibling navigation, Pinned inspector cards, True geometry for rotated and scaled elements, What is blocking this click, Measure inside images and canvas, Distances across iframes.
- Rulers and layout: Rulers, guides, grids and the page's structure. Page rulers with crosshair, Snapping guides, saved per site, Flex and grid inspector, X-Ray, Column grid overlay, Breakpoint lines, Responsive canvas, Design overlay, Stacking-context explorer, What causes horizontal scroll.
- Colour and type: The real colours, fonts and text edges on the page. Colour picker with tokens, Text edges, Page colour palette, Download the design system, Image and SVG assets, Token audit, Fallback-font finder, Type-scale view, Font report.
- Accessibility: Contrast and the checks that keep a page usable. Contrast: WCAG 2.2 and APCA, Contrast across states, Touch-target size check, Headings and landmarks outline, Tab order, Colour-blindness simulation, Full accessibility audit.
- CSS and code: Every rule, value and selector behind an element. Matched rules and the cascade, Computed CSS, copyable, Shadow DOM, open roots, Closed shadow roots, Inspect inside frames, Force :hover, :focus and :active, Copy as Tailwind, CSS or JSX, Shadow and gradient visualizers, Animation and transition curves, Selector and test locators.
- Capture and reports: Screenshots and specs that explain themselves. Annotate the page itself, Capture with bug-report details, Capture shortcut, Transparent backgrounds, Full-page capture with annotation, Redline spec export.
- Page insights: What a page is made of and how it behaves. SEO: meta, social previews, checks, Download every image and SVG as a ZIP, Page weight, AEO, Technology detection, Canvas inspection, Layout-shift visualizer.
- Live editing: Change the real page and keep a diff of every edit. Edit CSS live, with a diff, Live edit with design controls, Resize on the page, Edit inside media queries and states, Apply to every element like it, Change everywhere, Rules you can rename, recolour and add, Edit the page's elements, Swap an image or SVG, Isolate an element, Versions of your changes, Changes as a prompt for your coding agent, Edit text in place, Quick actions, Edit Tailwind classes, Export your changes, Edits saved per site.
- Workflow: Keys, languages, browsers and the tools around them. Pause to use the page, Freeze hover menus, Custom shortcuts, Customizable toolbar, Theme and accent colour, A side panel that follows your tab.
- Annotator: Mark up screenshots and any image, in the extension or on the web. Annotator on the web, Pen, Start from a sample or a blank canvas, Arrows and shapes, Text in five faces, Highlight, blur and redact, Several images in tabs, Zoom, copy and download.

Nitpique is free. Every feature available today stays free, and so does everything planned that runs in the browser, live editing included. Paid features (Pro) come later: AI features and team features that need a server. The free extension needs no account and collects no data.

- Runs in: Chrome, Edge, Brave, Arc and other Chromium browsers, and Firefox
- Also: the Nitpique Annotator (https://nitpique.dev/annotator). A free image annotator in your browser: arrows, shapes, text, highlights, blur and redaction on screenshots or any image. Drop, paste or open images, each in a tab; nothing is uploaded. It is in the extension too, where captures open in it.
- Made by: Swapnil Gupta, who builds the extension and this website (GitHub: swapnilgupta14, https://github.com/swapnilgupta14; X: @BadAirFryer, https://x.com/BadAirFryer)
- Website: https://nitpique.dev
- Follow: X https://x.com/Nitpique, LinkedIn https://www.linkedin.com/in/nitpique/, YouTube https://www.youtube.com/@Nitpique, GitHub https://github.com/Nitpique, Product Hunt https://www.producthunt.com/@nitpique

## Docs

- [Install and turn on](https://nitpique.dev/docs/get-started/getting-started): Install Nitpique, turn it on for a tab, your first minute, and turning it off.
- [The bar](https://nitpique.dev/docs/get-started/the-bar): The floating bar's buttons, from Inspect to Turn off, and the key for each.
- [The side panel](https://nitpique.dev/docs/get-started/side-panel): Its Element, Design and Page views, opening it automatically, and how it follows your tab.
- [Open it in a window](https://nitpique.dev/docs/get-started/panel-window): The side panel's content in a window of its own, with a tab for each page it reads.
- [Make the bar yours](https://nitpique.dev/docs/get-started/customize-bar): Reorder the toolbar, choose what sits in More, and pick an accent colour.
- [Settings](https://nitpique.dev/docs/get-started/settings): Theme, unit, opening the side panel, guides, resetting customization, the Annotator and About.
- [Hover to inspect](https://nitpique.dev/docs/measure/hover-inspector): The box model in DevTools' colours on any element you hover, with each band's size.
- [Flex and grid containers](https://nitpique.dev/docs/measure/flex-and-grid): Flex and grid layouts drawn on hover, the Layout section, and overlays you can keep.
- [Select an element](https://nitpique.dev/docs/measure/select): Select with a click or Enter, move through the tree by key, and reach covered elements.
- [Measure distances](https://nitpique.dev/docs/measure/distances): Gaps, insets and overlaps between two elements, pinned measurements, and copying a value.
- [Units](https://nitpique.dev/docs/measure/units): Show every value in px, rem, em, %, vw, vh or device pixels.
- [Rotated, scaled and skewed elements](https://nitpique.dev/docs/measure/transforms): Transformed elements outlined on the shape they are drawn in, with their size and angle.
- [Pinned cards](https://nitpique.dev/docs/measure/pinned-cards): Keep up to six elements' numbers on the page to compare them.
- [Pixel edges](https://nitpique.dev/docs/measure/pixel-edges): Measure flat shapes and gaps inside images, canvas and video, to the device pixel.
- [Pause](https://nitpique.dev/docs/measure/pause): Hand the page back to you, and freeze a hover menu or tooltip to inspect it.
- [X-Ray](https://nitpique.dev/docs/measure/x-ray): Outline every element in view, each tag in its own colour.
- [Shadow DOM](https://nitpique.dev/docs/measure/shadow-dom): Inspect, search and copy selectors inside web components' shadow roots.
- [Frames](https://nitpique.dev/docs/measure/frames): Inspect same-site iframes like the rest of the page.
- [Rulers](https://nitpique.dev/docs/measure/rulers): Page rulers with a crosshair and readout, counting from the viewport, the document or the element.
- [Guides](https://nitpique.dev/docs/measure/guides): Guides that snap to elements, saved per site, and exported or imported as a file.
- [Layout grid](https://nitpique.dev/docs/measure/layout-grid): A column grid over the page, with your columns, gutter, margin and max width.
- [Breakpoints](https://nitpique.dev/docs/measure/breakpoints): Lines at the widths the page's media queries switch at.
- [Responsive canvas](https://nitpique.dev/docs/measure/responsive-canvas): The page at several viewport sizes side by side, in frames of exactly that size.
- [Colour picker](https://nitpique.dev/docs/colour/colour-picker): A loupe over the real pixels that names the CSS colour and the token behind it.
- [Text edges](https://nitpique.dev/docs/colour/text-edges): Measure text from its glyphs: cap height, x-height, baseline and descender.
- [Contrast](https://nitpique.dev/docs/colour/contrast): WCAG 2.2 and APCA, a scan of the page, and the nearest colour that passes.
- [Colour-vision simulation](https://nitpique.dev/docs/colour/colour-vision): See the page as someone with protanopia, deuteranopia, tritanopia, achromatopsia or blurred vision does, at full or partial strength.
- [Touch targets](https://nitpique.dev/docs/colour/touch-targets): Find the controls smaller than 24 by 24 pixels, and the ones the standard allows.
- [Headings and tab order](https://nitpique.dev/docs/colour/headings-and-tab-order): The heading outline and landmarks a screen reader lists, and the order the Tab key visits the page.
- [Accessibility audit](https://nitpique.dev/docs/colour/accessibility-audit): Run axe-core's rules on the page, grouped by impact, each linked to its elements and how to fix it.
- [The Element tab](https://nitpique.dev/docs/css/element-tab): What the side panel shows for the selected element, and where its CSS sits.
- [Matched rules](https://nitpique.dev/docs/css/matched-rules): Every CSS rule that applies to an element, in cascade order, as the browser resolved it.
- [Edit CSS live](https://nitpique.dev/docs/css/edit-css): Change any value in Rules and watch the page follow as you type.
- [Live edit](https://nitpique.dev/docs/css/live-edit): Change an element with design controls and its classes, resize it and drag its spacing on the page, duplicate, delete and paste elements, swap pictures and type over text.
- [Changes](https://nitpique.dev/docs/css/changes): Every edit on the page, with undo, redo, revert and versions, copied as CSS, a diff or a prompt for a coding agent.
- [Force a state](https://nitpique.dev/docs/css/force-state): See an element hovered, pressed or focused without holding the pointer there.
- [Computed values](https://nitpique.dev/docs/css/computed-values): The values you check first, and a search across every property.
- [Copy styles as CSS, Tailwind or JSX](https://nitpique.dev/docs/css/copy-styles): Copy what makes an element look the way it does, ready to paste.
- [Copy a selector or locator](https://nitpique.dev/docs/css/copy-selector): A unique CSS selector, a Playwright locator or an XPath, each checked against the page.
- [Warnings](https://nitpique.dev/docs/css/warnings): Something on top of an element, an element that ignores clicks, and text drawn in a fallback font.
- [Shadows and gradients](https://nitpique.dev/docs/css/shadows-and-gradients): Each shadow and gradient layer drawn out with its numbers, to copy as CSS.
- [Motion](https://nitpique.dev/docs/css/motion): Transitions and animations, with their timing curves and keyframes.
- [Stacking](https://nitpique.dev/docs/css/stacking): Why an element sits above or below another: z-index and stacking contexts.
- [Design and Page tabs](https://nitpique.dev/docs/design/overview): What the Design and Page tabs show, and which view to open for what.
- [Horizontal scroll](https://nitpique.dev/docs/design/horizontal-scroll): Whether the page scrolls sideways, and the elements that cause it.
- [Token audit](https://nitpique.dev/docs/design/token-audit): Colours, spacing, font sizes and radii that are off your token scale, with the nearest token.
- [Layout shifts](https://nitpique.dev/docs/design/layout-shifts): Every time the page jumped unasked, and its Cumulative Layout Shift.
- [Colours and images](https://nitpique.dev/docs/design/colours-and-images): The page's palette and pictures, exported as a design system or a zip of images.
- [Type scale](https://nitpique.dev/docs/design/type-scale): Every distinct way text is set on the page, largest first.
- [Canvases](https://nitpique.dev/docs/design/canvases): Every canvas's size, pixel ratio, drawing context and main colours.
- [Page weight](https://nitpique.dev/docs/design/page-weight): The page's total size by kind of file and by host, and what could be smaller: older image formats, uncompressed text and unused bytes.
- [Fonts](https://nitpique.dev/docs/design/fonts): Every font stack on the page, what it is drawn in, and where it falls back or fakes bold.
- [Design overlay](https://nitpique.dev/docs/design/design-overlay): Lay a picture of the design over the page, half transparent or as a difference, and line it up.
- [SEO and link previews](https://nitpique.dev/docs/seo/previews-and-checks): Search and share previews, the checks behind them, and every meta tag.
- [AEO: answer engine optimization](https://nitpique.dev/docs/aeo/answer-engines): Whether crawlers can fetch a page, whether its content is in the HTML, and what its markup says, with the fix beside each finding.
- [Stack detection](https://nitpique.dev/docs/stack/detection): The frameworks, CMS, analytics and hosting a page is built with, and how each was found.
- [Capture](https://nitpique.dev/docs/capture/screenshots): Screenshots of an element, an area or the page, with measurements and bug-report details.
- [Redline spec](https://nitpique.dev/docs/capture/redline): A component with its size, spacing, type and colours drawn on, as an image, HTML or Markdown.
- [Annotate the page](https://nitpique.dev/docs/capture/annotate-page): Draw with a pen, shapes, arrows, text and redaction on the live page, then capture it.
- [The Annotator](https://nitpique.dev/docs/capture/annotator): Where to find the Annotator, on this site or in the extension, and opening images in tabs.
- [Annotator tools](https://nitpique.dev/docs/capture/annotator-tools): A pen, arrows, shapes, text, highlight, blur and redact, with their colours, lines and type.
- [Zoom, copy and download](https://nitpique.dev/docs/capture/annotator-save): Zoom from 10% to 400%, copy or download the marked-up image, and what stays on your device.
- [Keyboard shortcuts](https://nitpique.dev/docs/reference/shortcuts): Every key Nitpique answers to, in one table, and how to change them.
- [Privacy and permissions](https://nitpique.dev/docs/reference/privacy): What Nitpique can see, what it stores, and why it asks for each permission.

## Blog

- [The 5 best tools for design QA in the browser (2026)](https://nitpique.dev/blogs/best-design-qa-tools-for-the-browser): Nitpique, Chrome DevTools, VisBug, PerfectPixel and CSS Peeper compared for checking a build against its design: what each measures, edits and checks, what it costs, and which to pick.
- [The 5 best colour contrast checkers (2026)](https://nitpique.dev/blogs/best-colour-contrast-checkers): Nitpique, the WebAIM Contrast Checker, Chrome DevTools, WAVE and axe DevTools compared: which check one pair and which check a whole page, which see hover and focus states, and which suggest a colour that passes.
- [Why isn't my z-index working? Find the stacking context](https://nitpique.dev/blogs/z-index-not-working): z-index: 9999 and it is still underneath? The cause is almost always a stacking context you cannot see. What creates one, how to find the ancestor trapping your element, and three ways to fix it.
- [What font is this website using? And is it really showing it?](https://nitpique.dev/blogs/what-font-is-this-website-using): How to find the font on any website in seconds, why the CSS font list is not the answer, and how to tell when the page is quietly drawing a fallback font or a fake bold.
- [How to find what is causing a layout shift (CLS)](https://nitpique.dev/blogs/find-what-causes-layout-shift): Your page jumps and Core Web Vitals flags CLS, but the element it names is not the culprit. How to trace a shift to its real cause, the five usual suspects, and how to fix each one.
- [Lost your DevTools CSS changes on reload? Keep them and ship them](https://nitpique.dev/blogs/keep-css-changes-from-devtools): Every CSS tweak in DevTools disappears on refresh. The built-in ways to keep them, why they are fiddly, and a faster path from a change in the browser to a change in your code, or your coding agent.
- [Full-page screenshots that do not break, and how to redact them](https://nitpique.dev/blogs/full-page-screenshot-and-redact): Chrome's hidden full-page capture, where it fails (sticky headers, lazy images, inner scrolling), and how to mark up a screenshot and remove private details properly before you share it.
- [How to check colour contrast on a live website](https://nitpique.dev/blogs/check-colour-contrast-on-a-live-website): WCAG 2.2 contrast in plain words: the ratios to hit, why a design file is not enough, how to check every text, state and icon on a real page, and how to fix what fails without changing your brand.
- [How to measure spacing on any website](https://nitpique.dev/blogs/measure-spacing-on-any-website): A practical guide to pixel-perfect design QA: what to measure, how to read the box model, the gaps DevTools will not show you, and a checklist for comparing a build with its design.

## Features

- [All features](https://nitpique.dev/features): every feature, each with its status.
- Annotator on the web: Mark up screenshots and any image in the browser, free, with no extension and no account. How to use it: Open nitpique.dev/annotator, then open, drop or paste images.
- Pen: Draw freehand: a smooth line you can move, recolour, thicken or dash, and undo. How to use it: Press P on the Annotator's bar, then draw.
- 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. How to use it: Open the Annotator with nothing open and choose Try a sample or Blank canvas.
- Arrows and shapes: Straight, double, curved and elbow arrows, lines, rectangles, ellipses and triangles, solid, dashed or dotted. How to use it: Pick Arrows (A) or Shapes (R) on the bar, choose one from its menu, then drag on the image.
- Text in five faces: Sans, serif, mono, handwritten or cursive, in three sizes, with a halo that reads on any background. How to use it: Press T, click where the text goes, type, then Enter.
- Highlight, blur and redact: Mark what matters and hide what is private; redaction removes what was under it from the saved image. How to use it: Press H, B or X and drag over the area.
- Several images in tabs: Open, drop or paste images; each gets a tab with its own marks and undo, kept across reloads. How to use it: Open (Ctrl or Cmd+O), drop images on the page, or paste one. Switch with the tabs or Alt (Option on a Mac) and an arrow.
- Zoom, copy and download: Zoom from 10% to 400%, then copy the marked-up image or download it as a full-resolution PNG. How to use it: Use − and + beside Open, then Copy or Download on the bar.
- 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. How to use it: Turn Nitpique on and move the pointer over the page. Press 1 if another tool is active.
- Distances, insets and overlaps: Select one element and hover another for the gaps between them, the insets inside, or how much they overlap. How to use it: Click an element to select it, then hover another one. Red lines show the gap, inset or overlap.
- Pinned measurements: Pin an element with Space, then hold Shift to measure from it to anything under the cursor. How to use it: Hover an element and press Space to pin it, hold Shift to measure from it, and press Space again to unpin.
- Every unit: px, rem, em, %, vw, vh, device px: Read values in the unit your design uses. Nothing is rounded before you see it. How to use it: Press U to cycle the units, or pick one from the Unit button on the bar.
- Parent, child and sibling navigation: Walk the DOM with Alt+Shift+arrows (⌥⇧ on a Mac), and step through stacked elements with [ and ]. How to use it: Press Alt+Shift (⌥⇧ on a Mac) with an arrow key, or use the Parent and Child buttons. Press [ or ] to step through elements stacked under the pointer.
- Page rulers with crosshair: Rulers along the top and left in your unit, counting from the viewport, the document or the selection. How to use it: Press 2. Press O, or click the ruler corner, to count from the viewport, the document or the selection.
- 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. How to use it: Drag from a ruler onto the page. Double-click a guide to type its position, and drag it back onto the ruler to remove it.
- 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. How to use it: Hover a flex or grid container to see its layout. Select it for the Layout section in the Element tab, and switch on Show overlay to keep it drawn.
- 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. How to use it: Press 3 and point at a pixel. Click to copy the CSS colour, Shift-click to copy the pixel, + and - to zoom, F to change format.
- Text edges: Measure text from its glyphs: cap height, x-height, baseline and descender, within half a pixel. How to use it: Press T, then hover text. Distances to text are now measured from its glyphs.
- Contrast: WCAG 2.2 and APCA: Check the selection or the whole page, worst first, and copy the nearest colour that passes. How to use it: Open the Page tab, choose Accessibility and find Contrast, then choose Selection or Visible page. Press Fix beside a failure to copy the nearest passing colour.
- Matched rules and the cascade: Every rule that applies, in cascade order, with layers, container queries and var() chains resolved. How to use it: Select an element and open the Element tab. Choose Rules in the Code menu to list every rule that applies, in cascade order.
- 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. How to use it: Press A or Annotate on the bar, pick a tool and draw; Capture takes the visible area or the full page.
- Capture with bug-report details: Screenshot an element, an area or the page, with measurements and a Markdown bug report. How to use it: Click Capture on the bar and choose Element, Area or Visible page. Turn on Bug report in its options to copy Markdown details too.
- 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. How to use it: Press P to hand the page back to you, and P again to resume. Your selection, guides and rulers stay.
- Pinned inspector cards: Pin several elements as floating cards to compare their sizes, spacing and type side by side. How to use it: Press N to pin a card for the selected element or the one under the pointer. Drag it by its header, close it with the cross.
- True geometry for rotated and scaled elements: Rotated, scaled and skewed elements are outlined on their real shape, with their own size and angle. How to use it: Nothing to turn on. Select or hover a transformed element and it is outlined on its real shape, with its angle in the label.
- X-Ray: Outline every element at once to see the page's structure at a glance. How to use it: Press X, or choose X-Ray in the More menu, and press X again to turn it off.
- Computed CSS, copyable: The values you check first (size, box, layout, type, colour), then every resolved value, ready to copy. How to use it: In the Element tab, the Code section opens on Computed. Filter by property or value, then press Copy all.
- 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. How to use it: Nothing to turn on. Hover, click, search and X-Ray go inside open shadow roots, and Parent and Child cross the boundary.
- Closed shadow roots: Inspect inside closed shadow roots too, which a page cannot hide from an extension. How to use it: Nothing to turn on. Hover, search, X-Ray and the Design tab's cards go inside closed roots as they do open ones.
- Inspect inside frames: Inspect inside same-site iframes: hover, select, measure and read their CSS. How to use it: Nothing to turn on. Hover or click inside a frame, and Parent and Child cross its edge.
- Force :hover, :focus and :active: See an element's other states without moving the mouse. How to use it: Select an element that has rules for a state. Chips for those states appear in the Element tab; press one, and again to turn it off.
- Capture shortcut: Press S to capture the selected element, or the visible page when nothing is selected. How to use it: Press S with an element selected, or with nothing selected for the visible page.
- Transparent backgrounds: Export an element on its own, with real transparency for rounded corners, shadows and translucent fills. How to use it: Select an element, open Capture, turn on Transparent and capture the element.
- SEO: meta, social previews, checks: Meta and Open Graph tags, how the page looks when shared, and common SEO problems. How to use it: Open the Page tab and choose SEO. It shows the search and link previews, the checks and every meta tag.
- Freeze hover menus: Keep dropdowns and hover states open while you measure them. How to use it: Open the menu, press P, and move the pointer away. The menu stays open until you resume.
- Custom shortcuts: Change any key to suit your hands. How to use it: Open Customize in the side panel, choose Keyboard shortcuts, click a key and press the one you want.
- Customizable toolbar: Choose the buttons, their order, and which sit in the More menu. How to use it: Open Customize in the side panel. Drag a button to a new place, or select it and use the controls under the preview.
- 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. How to use it: Open Settings in the side panel. Choose System, Light or Dark, then an accent colour.
- A side panel that follows your tab: A docked panel stays open across tabs and shows the page in front, not the last one. How to use it: Keep the panel open and switch tabs or navigate. It clears and reads the new page, and shows the selection again when you return.
- 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. How to use it: Select an element. If something covers it, the Warnings section names it with its z-index and stacking context; hover to outline it, press to select it, or open Stacking to compare.
- Measure inside images and canvas: Measure to the edges of shapes drawn inside pictures and canvas. How to use it: Press E (or Pixel edges in the More menu) and point at a shape or a gap; click to copy its size.
- 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. How to use it: Select an element, then hover one on the other side of a frame's edge. Text edges work inside frames too.
- 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. How to use it: Press G, or choose Layout grid in the More menu. The button opens a menu with presets, the columns, gutter, margin and max width, rows and a baseline.
- 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. How to use it: Press B, or press the Breakpoints button on the toolbar. The menu lists each width with the rules that change there; choose one to resize the window, or Breakpoint lines to draw them.
- Responsive canvas: The page at several viewport sizes side by side, snapping to its breakpoints and scrolling together. How to use it: Press the Breakpoints button on the toolbar and choose Responsive canvas. It opens over the page in the same tab; Esc closes it.
- 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. How to use it: Open the Design tab and drop a PNG on Design overlay, or paste one.
- 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. How to use it: Select an element and open the Stacking section of the Element tab. Press a context or a row to select it.
- 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. How to use it: Open the Design tab. The Layout card says whether the page scrolls sideways and lists the elements that cause it, each with its likely cause.
- 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. How to use it: Open the Design tab and find Colours. Hover a swatch for what it paints, click it to copy the hex; All colours lists them named.
- 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. How to use it: Open the Design tab, then Export › Design system beside Colours and images.
- 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. How to use it: Open the Design tab and hover a picture under Colours and images for its details; the button in its corner copies it.
- Token audit: Flags spacing and colours that are off your design system's scale, and near-duplicates. How to use it: Open the Design tab. Tokens checks the page against its own CSS variables, Tailwind's scale, or tokens you import from Figma, Tokens Studio or Tailwind.
- 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. How to use it: Select text. When its first font did not load, or its bold is faked, the Warnings section says so with the whole stack.
- 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. How to use it: Open the Design tab. Type scale lists every text style, largest first; hover to outline one, click to select it.
- Font report: Every font stack on the page, what it is really drawn in, and where it falls back or fakes bold. How to use it: Open the Design tab and find Fonts. Problems come first; hover a row to outline an element set in it.
- Contrast across states: Contrast for hover, focus and disabled states, not just the default, with the controls that fail only in a state first. How to use it: Open the Page tab, choose Accessibility, then Contrast, and choose Control states.
- 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. How to use it: Open the Page tab and choose Accessibility. Touch targets lists the small ones, too small first; hover to outline one, click to select it.
- 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. How to use it: Open the Page tab, choose Accessibility, then Headings. Hover a row to outline it on the page, click to select it.
- 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). How to use it: Open the Page tab, choose Accessibility, then Tab order. Switch on Show on page to draw the order.
- 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. How to use it: Open the Page tab, choose Accessibility, and pick a vision in See the page with.
- 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. How to use it: Open the Page tab, choose Accessibility, then Full audit. Hover an element to outline it, click to select it.
- 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. How to use it: In the Element tab, choose CSS, Tailwind or JSX on the code card, then copy. With children copies the element and its contents as markup.
- 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. How to use it: Select an element with a shadow or a gradient. A Shadows and gradients section appears in the Element tab.
- 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. How to use it: Select an element with a transition or animation. A Motion section appears in the Element tab.
- 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. How to use it: Select an element and press Copy as in the Element tab to copy a CSS selector, a Playwright locator, a Testing Library query, a Cypress chain or an XPath.
- Full-page capture with annotation: Capture the whole page, then annotate it and hide what is private. How to use it: Capture, then Full page. Set Then to Annotate to add arrows, shapes, text, highlights, blur and redaction before you copy or save it. The Annotator also opens on its own, for any images you drop or paste.
- Redline spec export: A component with its size, spacing, type and colours drawn on, as an image, an HTML spec or Markdown. How to use it: Select an element and press the download button beside its name in the Element tab.
- Download every image and SVG as a ZIP: All of the page's images, backgrounds and inline SVGs in one file. How to use it: Open the Design tab, then Export › All images beside Colours and images.
- 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. How to use it: Open the Design tab and find Page weight. Press Refresh after more has loaded.
- 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. How to use it: Open the Page tab and choose AEO. Open a finding for the evidence and a change to copy, and Show on page to find the element.
- Technology detection: The frameworks and libraries a page is built with. How to use it: Open the Page tab and choose Stack. Each technology says how it was found.
- Canvas inspection: Size, pixel ratio, drawing context and the main colours of every canvas on the page. How to use it: Open the Design tab. Canvases lists each one; hover to outline it on the page, click to select it.
- 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. How to use it: Open the Design tab. Layout shifts lists each one; hover to see it on the page, press replay to watch it again, click to select what moved.
- 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. How to use it: In the Code section choose Rules, then click a value. ↑ and ↓ step it; Esc puts it back.
- 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. How to use it: Press L or the Live edit button on the bar, click an element, then use Design.
- 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. How to use it: In Live edit, drag a handle, or press the spacing quick action and drag a side. Shift keeps the proportions (or moves both sides), Alt turns snapping off, Esc puts it back.
- 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. How to use it: In Live edit, choose a State or Screen sizes above the controls. In Rules, New rule takes a state and a breakpoint too.
- 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. How to use it: In Live edit, choose Apply to: This element, All .class, or Elements matching….
- 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. How to use it: In Design, click a colour's pencil or a type size's pencil. In Live edit, choose Apply to: Everywhere the value is used.
- 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. How to use it: Click a property's name or a selector to edit it; click the swatch for a picker; New rule beside Rules.
- 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. How to use it: In Live edit, select an element: Delete removes it, ⌘D duplicates it, ⌘C, ⌘X and ⌘V copy, cut and paste it.
- 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. How to use it: In Live edit, select an image and press Replace image, or paste one with ⌘V.
- Isolate an element: Hide everything around an element to look at it alone, where it is. How to use it: In Live edit, select an element and press I. I again or Esc brings the page back.
- Versions of your changes: Keep the changes as version A, try another direction as B, and switch between them on the page. How to use it: In Changes, press Keep as version, then switch with the letters.
- 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. How to use it: In Changes, choose Prompt, then Copy.
- Edit text in place: Rewrite page copy where it stands, kept as a change you can undo or copy. How to use it: In Live edit, double-click the selection's text and type. Enter keeps it, Esc puts it back.
- Quick actions: Edit text, replace an image, duplicate, delete, drag padding, isolate, undo and redo, right beside the element. How to use it: In Live edit, select an element; the small bar beside it has them all.
- Edit Tailwind classes: Add, remove and change classes with the result shown live; Tailwind utilities are recognised, and one replaces the utility it overrides. How to use it: In Live edit, use Classes above the Design controls.
- 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. How to use it: Choose Changes in the Code section's menu, then CSS, Diff or Prompt, then Copy.
- 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. How to use it: On by default. Changes › Keep after reload turns it off for the site; Revert all forgets the page's edits.

## Optional

- [Full text for AI assistants](https://nitpique.dev/llms-full.txt): every feature with its status, and the FAQ.
- [Home page](https://nitpique.dev/): overview, comparison with other tools, pricing and FAQ.
- [Pricing](https://nitpique.dev/pricing): what is free, what Pro will add, and the questions about cost.
- [Annotator](https://nitpique.dev/annotator): mark up images in the browser, free.