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.

How It Works

Add data-wireframe to <html> for full-page wireframe, or to any container for scoped wireframing
CSS applies a grayscale filter, replaces fonts with sketch fonts, converts borders to dashed lines, and removes shadows
Four fidelity levels control how abstract the rendering is
Dark mode is supported via data-mode="dark" or system preference

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

Level	Fonts	Borders	Colors	Best 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

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.

Query State

VanillaBreeze.wireframe.isActive();
// → true/false

VanillaBreeze.wireframe.getFidelity();
// → 'lo' | 'mid' | 'hi' | 'annotate' | null/code-block

<table class="props-table">
    <caption>API Methods</caption>
    <thead>
      <tr><th>Method</th><th>Returns</th><th>Description</th></tr>
    </thead>
    <tbody>
      <tr>
        <td><code>toggle(level?)</code></td>
        <td><code>boolean</code></td>
        <td>Toggle wireframe on/off. Returns whether now enabled.</td>
      </tr>
      <tr>
        <td><code>setFidelity(level)</code></td>
        <td><code>void</code></td>
        <td>Set fidelity. Pass empty string to disable.</td>
      </tr>
      <tr>
        <td><code>isActive()</code></td>
        <td><code>boolean</code></td>
        <td>Check if wireframe mode is active.</td>
      </tr>
      <tr>
        <td><code>getFidelity()</code></td>
        <td><code>string|null</code></td>
        <td>Get current fidelity level.</td>
      </tr>
      <tr>
        <td><code>labelElements()</code></td>
        <td><code>void</code></td>
        <td>Auto-label elements with <code>data-wf-label</code> and images with <code>alt</code> text.</td>
      </tr>
      <tr>
        <td><code>label(target, text)</code></td>
        <td><code>void</code></td>
        <td>Label a specific element or CSS selector.</td>
      </tr>
      <tr>
        <td><code>toggleAnnotations()</code></td>
        <td><code>boolean</code></td>
        <td>Toggle composable annotations. Returns whether now enabled.</td>
      </tr>
      <tr>
        <td><code>addCallout(target, text)</code></td>
        <td><code>void</code></td>
        <td>Attach a design review comment to an element.</td>
      </tr>
      <tr>
        <td><code>removeCallout(target)</code></td>
        <td><code>void</code></td>
        <td>Remove a callout from an element.</td>
      </tr>
      <tr>
        <td><code>renderCallouts()</code></td>
        <td><code>void</code></td>
        <td>Inject numbered <code>&lt;mark&gt;</code> markers on all <code>[data-wf-callout]</code> elements.</td>
      </tr>
      <tr>
        <td><code>renderCalloutPanel(container?)</code></td>
        <td><code>void</code></td>
        <td>Render <code>&lt;aside&gt;</code> footnote panel with ordered list of callout texts.</td>
      </tr>
      <tr>
        <td><code>toggleCallouts()</code></td>
        <td><code>boolean</code></td>
        <td>Toggle callout markers and panel visibility. Returns whether now visible.</td>
      </tr>
    </tbody>
  </table>
</section>

<section>
  <h2>Composable Annotations</h2>
  <p>The <code>data-wf-annotate</code> attribute layers element labels on top of any fidelity level. Unlike the <code>annotate</code> fidelity mode, this lets you see lo-fi or hi-fi styling with labels overlaid.</p>
  <p>Annotations use <code>::after</code> pseudo-elements (positioned top-right), so they never collide with <code>data-wf-label</code> badges (which use <code>::before</code>, top-left). Both can appear simultaneously on the same element.</p>

<code-block language="html" show-lines label="Composable annotations" data-escape>
<html data-wireframe="lo" data-wf-annotate>
  
</html>

</section>

<section>
  <h2>Callouts &amp; Comments</h2>
  <p>The callout system adds design review comments to wireframe elements. This creates a three-tier overlay model:</p>
  <table>
    <thead>
      <tr><th>System</th><th>Attribute</th><th>Purpose</th><th>Rendering</th></tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>Labels</strong></td>
        <td><code>data-wf-label</code></td>
        <td>"What this IS" &mdash; structural name</td>
        <td><code>::before</code> badge, top-left inside</td>
      </tr>
      <tr>
        <td><strong>Annotations</strong></td>
        <td><code>data-wf-annotate</code></td>
        <td>"What tag this uses" &mdash; developer reference</td>
        <td><code>::after</code> monospace label, top-right outside</td>
      </tr>
      <tr>
        <td><strong>Callouts</strong></td>
        <td><code>data-wf-callout</code></td>
        <td>"What a reviewer thinks" &mdash; design comments</td>
        <td>Injected <code>&lt;mark&gt;</code> numbered marker + footnote panel</td>
      </tr>
    </tbody>
  </table>
  <p>All three can be active simultaneously without collision.</p>

<code-block language="html" show-lines label="Callout attributes" data-escape><section data-wf-callout="Consider full-bleed hero with background image">
  <h2>Hero</h2>
</section>

CSS Tokens

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

Keyboard Shortcut

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

Grid & Spacing Overlays

Debug overlays that work independently of wireframe mode.

Attribute	Description
`data-show-grid`	12-column grid overlay for layout alignment
`data-show-spacing`	Box-model outline on all elements

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