Container Query Visualizer & Debugger
CSS container queries are invisible — you can't see which @container rule
is matching at a given width. This tool renders your component in a live, resizable
container, highlights the active rule, and shows every threshold on a breakpoint ruler.
Tool interface
Live preview
Breakpoint ruler
Matched rules
CSS (active rule highlighted)
Introduction
Container queries let components respond to their container's size, not the viewport. But because the matching happens inside the cascade, it's hard to see which rule is active. This tool makes that visible and debuggable.
How it works
- Your HTML + CSS render in an isolated sandboxed iframe so styles can't leak.
- A resizable wrapper drives the container width via a drag handle and slider.
- A parser extracts each
@containerthreshold and evaluates it against the live width. - Matched rules are highlighted in the CSS view and drawn as bands on the ruler.
Privacy
All rendering and parsing is local. No upload, no account, no API key.
Limitations
- Requires a browser with native container-query support for the live preview.
- The condition parser handles min/max-width and range syntax; exotic queries are shown but not evaluated.
FAQ
Why isn't my @container rule matching?
Check that the container element has container-type: inline-size (or size) and that the query's name matches container-name if you used one.
Is my code uploaded?
No. Everything renders locally in a sandboxed iframe.