Opening the tools
Website projects carry a small row of design tools that sits just above the mode bar at the bottom of the review view. Press T, or click the tools pill in the toolbar, to open and close it.
The row holds three tools: Grids, X-ray, and Zoom. They work alongside comment and inspect mode rather than replacing them — leave a grid on while you pin comments if that is what you are reviewing.
These tools are for workspace members. Guests reviewing through a share link don't see the tools row, so turning a grid on for yourself never changes what a client sees.
Layout grids
Click Grids to open the grid settings, then use the switch at the top to draw a column grid over the site.
The grid is configured per breakpoint, the way it is in a design tool. Pick Mobile, Tablet, Laptop, or Desktop from the dropdown and set:
| Setting | What it controls |
|---|---|
| Columns | How many equal-width columns the grid draws. |
| Layout | Stretch fills the frame with equal side margins. Max width caps the columns and centers them — the common "1200px centered container" setup. |
| Margin | The side margin, in pixels. Used in Stretch layouts. |
| Max width | The maximum content width, in pixels. Used in Max width layouts. |
| Gutter | The space between columns, in pixels. |
| Opacity | How strongly the overlay reads against the page. |
Huddlekit starts with sensible responsive defaults — 4 columns on mobile, 8 on tablet, and 12 on laptop and desktop, with margins and gutters that grow with the breakpoint. The reset button beside the breakpoint dropdown restores one breakpoint to those defaults without touching the others.
In canvas view every frame draws its own breakpoint's grid, so you can check a layout against all four grids side by side in one pass.
X-ray
Click X-ray, or press X, to outline every element on the page and desaturate it. Structure that is invisible against a finished design — stray wrappers, uneven boxes, elements that don't line up with each other — becomes obvious at a glance.
It is a single on/off with nothing to configure, and it works in both single-device and canvas view.
Zoom
The Zoom tool previews the page as it would look on a display running at a different scale — a Windows laptop at 125% or 150%, for example, which is what a large share of visitors actually use.
This is not a magnifier. The page genuinely reflows: the site's own media queries fire at the narrower effective width, so content re-columns and resizes exactly as it would on that machine, while the frame stays at its true breakpoint width. It catches a class of layout break that never appears at 100%.
Press the pill to reveal the − and + buttons and step between 50% and 200%; the label shows the current scale. Press the pill again to collapse it and return to 100%. Zoom applies to single-device view — canvas view has its own pan and zoom.
What is remembered
Your grid setup and the x-ray toggle are saved in your browser and carried across projects, so a grid you configure once is there the next time you open a review. They are personal settings — they are not shared with your team and never affect what guests see.
Display scale resets to 100% when you close the tool.
Related
- Inspecting elements — measure spacing, type, and colors on a single element.
- Device and viewport previews — switch breakpoints and open canvas view.
