Design & UI Validation

CSS Injector

Inject custom CSS snippets into all active preview frames simultaneously. Test layout fixes and visual tweaks across every viewport without touching source files.

Overview

Instant Visual Prototyping

The CSS Injector is the fastest possible feedback loop for visual changes. Write CSS in the panel and it appears in every device frame in milliseconds — no build step, no save, no reload. It's the #1 tool for debugging layout issues quickly.

  • Multi-Frame Broadcasting: Injected CSS is instantly applied across all active device frames simultaneously via postMessage.
  • Named Snippets: Save your custom CSS with a name. Snippets persist and can be toggled on/off individually.
  • Preset Library: One-click presets for the most common debugging tasks:
    • Show all outlines — * { outline: 1px solid rgba(255,0,0,0.4) !important; }
    • Show box models — Colors every element's box model for instant padding/margin visualization.
    • Highlight images — Puts a bright amber border on every <img> tag.
    • Grayscale page — Applies filter: grayscale(1) to test accessible color contrast.
    • Disable transitions — Removes all CSS animations for visual debugging.
    • Show focus rings — Forces visible focus outlines for keyboard/accessibility auditing.
    • Force 16px base font — Resets body font-size for typography testing.
    • Hide images — Hides all images to see text-only layout structure.
Workflow

Debugging a Layout Bug Across Breakpoints

  1. 1

    Open the CSS Injector

    Click the CSS/code icon in the left rail.

  2. 2

    Apply "Show all outlines" preset

    Click the preset button. Every element across all device frames instantly shows a red outline, making the box model structure of your layout immediately visible.

  3. 3

    Write a targeted fix

    In the text editor, write the CSS fix (e.g., .hero-section { overflow: hidden; }). It applies live as you type.

  4. 4

    Verify across all viewports

    Look at the Mobile and Tablet frames side-by-side to confirm the fix works everywhere without introducing a regression on another breakpoint.

  5. 5

    Copy to source code

    Once confirmed, copy the CSS snippet and apply it to your actual source stylesheet.

Pro Tips
💡
Use "Grayscale page" for quick contrast checks Apply the grayscale preset before running the Contrast Checker. Elements that disappear or become hard to distinguish when greyscaled are your highest-priority contrast failures for WCAG compliance.
💡
Use "Show focus rings" for keyboard-only audits Tab through your entire UI with the focus rings preset active. Any interactive element where the focus ring is invisible or hard to see is an accessibility violation that will fail WCAG 2.4.7.