data-wireframe

Wireframe mode for rapid HTML prototyping. Apply sketch-like rendering with four fidelity levels, dark mode support, and element labeling via a single data attribute.

Overview

The data-wireframe attribute converts any page or container into a sketch-like wireframe. It applies grayscale rendering, dashed borders, and hand-drawn fonts to help focus on layout and structure during prototyping.

Wireframe mode requires the dev CSS bundle. The JS API requires the dev JS bundle.

<!-- Main CSS (always needed) --> <link rel="stylesheet" href="/cdn/vanilla-breeze.css"> <!-- Dev CSS (adds wireframe, debug tools) --> <link rel="stylesheet" href="/cdn/vanilla-breeze-dev.css"> <!-- Dev JS (adds VanillaBreeze.wireframe API) --> <script type="module" src="/cdn/vanilla-breeze-dev.js"></script>

How It Works

  1. Add data-wireframe to <html> for full-page wireframe, or to any container for scoped wireframing
  2. CSS applies a grayscale filter, replaces fonts with sketch fonts, converts borders to dashed lines, and removes shadows
  3. Four fidelity levels control how abstract the rendering is
  4. Dark mode is supported via data-mode="dark" or system preference
<!-- Apply to html for full-page wireframe --> <html data-wireframe> <!-- Or scope to a container --> <section data-wireframe> <h2>This section renders as a wireframe</h2> <p>Rest of the page is normal.</p> </section>

Attributes

Attribute Type Description
data-wireframe string Fidelity level: lo, mid, hi, annotate, or empty (defaults to mid behavior).
data-wf-label string Element label text shown in annotate mode via ::before pseudo-element.
data-wf-annotate boolean Composable annotation layer. Unlike annotate fidelity, this overlays element labels on top of any fidelity level. Uses ::after so it coexists with data-wf-label badges.
data-wf-callout string Design review comment. JS renders a numbered <mark> marker and collects text into a footnote panel.

Fidelity Levels

LevelFontsBordersColorsBest For
lo Redacted Script (scribble) Rough dashed Pure B&W Early concept sketches
mid (default) Flow Block Dashed Grayscale Layout review
hi System fonts Subtle Near-production Content review, stakeholder demos
annotate System fonts Labeled Grayscale + labels Design specs, developer handoff
<!-- Lo: scribble font, rough borders, pure B&W --> <html data-wireframe="lo"> <!-- Mid: block font, dashed borders, grayscale (default) --> <html data-wireframe="mid"> <html data-wireframe> <!-- Hi: system fonts, subtle styling, near-production --> <html data-wireframe="hi"> <!-- Annotate: element labels visible --> <html data-wireframe="annotate">

Element Labels

Add data-wf-label to any element to show a label badge in annotate mode. The JS API can also auto-label elements using their alt text (images) or explicit labels.

<section data-wf-label="Hero Section"> <h1>Page Title</h1> <p>Subtitle text here.</p> </section> <nav data-wf-label="Primary Navigation"> <a href="#">Home</a> <a href="#">About</a> </nav> // Auto-label all elements that have data-wf-label VanillaBreeze.wireframe.labelElements(); // Manually label an element VanillaBreeze.wireframe.label('.hero', 'Hero Banner'); VanillaBreeze.wireframe.label(element, 'Primary Navigation');

JavaScript API

The VanillaBreeze.wireframe object provides programmatic control. Available when the dev JS bundle is loaded.

Toggle

// Toggle wireframe on/off VanillaBreeze.wireframe.toggle(); // Toggle with specific fidelity VanillaBreeze.wireframe.toggle('lo'); // Set fidelity directly VanillaBreeze.wireframe.setFidelity('hi'); // Remove wireframe mode VanillaBreeze.wireframe.setFidelity('');

Query State

VanillaBreeze.wireframe.isActive(); // → true/false VanillaBreeze.wireframe.getFidelity(); // → 'lo' | 'mid' | 'hi' | 'annotate' | null
API Methods
MethodReturnsDescription
toggle(level?) boolean Toggle wireframe on/off. Returns whether now enabled.
setFidelity(level) void Set fidelity. Pass empty string to disable.
isActive() boolean Check if wireframe mode is active.
getFidelity() string|null Get current fidelity level.
labelElements() void Auto-label elements with data-wf-label and images with alt text.
label(target, text) void Label a specific element or CSS selector.
toggleAnnotations() boolean Toggle composable annotations. Returns whether now enabled.
addCallout(target, text) void Attach a design review comment to an element.
removeCallout(target) void Remove a callout from an element.
renderCallouts() void Inject numbered <mark> markers on all [data-wf-callout] elements.
renderCalloutPanel(container?) void Render <aside> footnote panel with ordered list of callout texts.
toggleCallouts() boolean Toggle callout markers and panel visibility. Returns whether now visible.

Composable Annotations

The data-wf-annotate attribute layers element labels on top of any fidelity level. Unlike the annotate fidelity mode, this lets you see lo-fi or hi-fi styling with labels overlaid.

Annotations use ::after pseudo-elements (positioned top-right), so they never collide with data-wf-label badges (which use ::before, top-left). Both can appear simultaneously on the same element.

<!-- Composable annotation attribute --> <html data-wireframe="lo" data-wf-annotate> <!-- Lo-fi styles WITH element labels overlaid --> </html> // Toggle annotations independently of fidelity VanillaBreeze.wireframe.toggleAnnotations(); // Combine: lo-fi wireframe WITH element labels VanillaBreeze.wireframe.setFidelity('lo'); VanillaBreeze.wireframe.toggleAnnotations();

Callouts & Comments

The callout system adds design review comments to wireframe elements. This creates a three-tier overlay model:

SystemAttributePurposeRendering
Labels data-wf-label "What this IS" — structural name ::before badge, top-left inside
Annotations data-wf-annotate "What tag this uses" — developer reference ::after monospace label, top-right outside
Callouts data-wf-callout "What a reviewer thinks" — design comments Injected <mark> numbered marker + footnote panel

All three can be active simultaneously without collision.

<section data-wf-callout="Consider full-bleed hero with background image"> <h2>Hero</h2> </section> <form data-wf-callout="Add phone number field and CAPTCHA"> <!-- form fields --> </form> // Add callouts programmatically VanillaBreeze.wireframe.addCallout('.hero', 'Needs larger CTA button'); // Render markers and footnote panel VanillaBreeze.wireframe.renderCallouts(); VanillaBreeze.wireframe.renderCalloutPanel(); // Toggle all callouts on/off VanillaBreeze.wireframe.toggleCallouts(); // Remove a callout VanillaBreeze.wireframe.removeCallout('.hero');

Dark Mode

Wireframe tokens automatically invert for dark mode, either via the data-mode="dark" attribute or prefers-color-scheme: dark media query.

<!-- Explicit dark mode --> <html data-wireframe data-mode="dark"> <!-- Auto dark mode via system preference works too -->

CSS Tokens

Wireframe mode exposes custom properties you can use or override in your own styles.

/* Available wireframe tokens */ [data-wireframe] { --wireframe-stroke: oklch(30% 0 0); --wireframe-fill: oklch(98% 0 0); --wireframe-text: oklch(15% 0 0); --wireframe-muted: oklch(50% 0 0); --wireframe-accent: oklch(90% 0 0); --wireframe-border: 2px dashed var(--wireframe-stroke); --wireframe-label-bg: var(--wireframe-stroke); --wireframe-label-color: var(--wireframe-fill); }

Keyboard Shortcut

Ctrl+Shift+W (or Cmd+Shift+W on macOS) toggles wireframe mode. This is auto-registered when the dev JS bundle loads.

// Ctrl/Cmd+Shift+W auto-registered on module init // Or toggle programmatically: VanillaBreeze.wireframe.toggle();

Palette Variants

Override the default grayscale palette with themed color sets. Pure CSS, no JS needed.

PaletteDescription
blueprintBlue-toned wireframe, reminiscent of architectural drawings
sepiaWarm paper-toned wireframe for a classic sketch feel
<!-- Blue-toned blueprint wireframe --> <html data-wireframe data-wf-palette="blueprint"> <!-- Warm sepia wireframe --> <html data-wireframe data-wf-palette="sepia">

Grid & Spacing Overlays

Debug overlays that work independently of wireframe mode.

AttributeDescription
data-show-grid12-column grid overlay for layout alignment
data-show-spacingBox-model outline on all elements
<!-- Grid column overlay (works with or without wireframe) --> <body data-show-grid> <!-- Spacing / box-model debug overlay --> <body data-show-spacing> <!-- Combine with wireframe --> <html data-wireframe="lo"> <body data-show-grid data-show-spacing>

Integration with Prototyping Tools

Wireframe mode works seamlessly with other prototyping attributes:

  • data-mock — placeholder media adapts to wireframe tokens (fill, stroke, border)
  • data-lorem — in lo fidelity, placeholder text gets abstract letter-spacing and reduced opacity

See the Prototyping Toolkit page for the full picture.

Accessibility

  • Wireframe mode is a visual-only transformation — the DOM structure and ARIA attributes are preserved
  • Screen readers are unaffected by wireframe rendering
  • Labels use ::before and annotations use ::after pseudo-elements, not injected DOM nodes
  • Callout markers use semantic <mark> elements with aria-label
  • The wireframe indicator badge at the bottom-right corner has pointer-events: none