Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
Prototyping Toolkit
Build clickable prototypes with placeholder images, lorem text, wireframe mode, and skeleton loading — no external tools needed.
Overview
Vanilla Breeze includes everything you need for rapid HTML prototyping without leaving your editor or relying on external tools. The toolkit provides:
data-mock— placeholder images, video, iframes, and canvasdata-lorem— placeholder text on any element with multi-language supportdata-wireframe— sketch-like wireframe mode with fidelity levelsdata-loading="skeleton"— skeleton loading states- Fake content CLI — realistic test data from the command line
All prototyping tools use data-* attributes on native HTML elements. Moving to production is a content swap — replace src, fill in real text, remove the data attribute. No HTML restructuring needed.
Placeholder Media
Add data-mock to <img>, <video>, <iframe>, or <canvas> to render a placeholder box with an X-pattern and optional label.
Basic usage
Simple placeholder
<img data-mock width="400" height="300" alt="Hero banner">Presets
Named presets set aspect ratio and default dimensions via CSS. No width/height attributes needed.
Preset gallery
<img data-mock="hero" alt="Hero banner"><img data-mock="card" alt="Featured article"><img data-mock="avatar" alt="User photo"><img data-mock="product" alt="Product image"><img data-mock="thumbnail" alt="Gallery thumb"><img data-mock="logo" alt="Company logo"><img data-mock="og" alt="Social share image"><img data-mock="banner" alt="Ad banner">| Preset | Aspect ratio | Default width |
|---|---|---|
hero | 3:1 | 100% |
card | 16:9 | 400px |
avatar | 1:1 | 48px |
product | 1:1 | 400px |
thumbnail | 1:1 | 150px |
logo | 4:1 | 200px |
og | 1200:630 | 100% |
banner | 728:90 | 100% |
Photo service
Use data-mock="photo" for realistic images from picsum.photos. Add data-seed for reproducible results.
Photo placeholder
<img data-mock="photo" width="400" height="300" alt="Product shot"> <!-- Reproducible with data-seed --><img data-mock="photo" width="400" height="300" data-seed="42" alt="Consistent photo">Video, iframe, and canvas
data-mock works on all media elements. Video gets a poster overlay, iframes get srcdoc with a centered label, and canvas elements draw the placeholder pattern directly.
Other media types
<video data-mock width="800" height="450" alt="Product demo"></video><iframe data-mock width="600" height="400" title="Embedded map"></iframe><canvas data-mock width="400" height="300" aria-label="Chart area"></canvas>Inside figure
Works inside <figure> and <picture> with no structural changes.
Figure with mock
<figure> <img data-mock="card" alt="Team photo"> <figcaption>Our engineering team</figcaption></figure>Production transition
Replace src and remove data-mock. The HTML structure stays identical.
Prototype to production
<!-- Prototype --><img data-mock width="400" height="300" alt="Hero banner"> <!-- Production: swap src, remove data-mock --><img src="/images/hero.webp" width="400" height="300" alt="Hero banner">Placeholder Text
Add data-lorem to any text-containing element to fill it with placeholder text.
Basic usage
Default paragraph
<p data-lorem></p>Options
Word count, sentences, headings, lists
<p data-lorem="50"></p><p data-lorem="3 sentences"></p><h2 data-lorem="heading"></h2><ul data-lorem="5 items"></ul>| Value | Result |
|---|---|
| (empty) | ~50 words of lorem ipsum |
50 | 50 words |
3 sentences | 3 sentences |
heading | 5 words (heading-length) |
5 items | 5 list items (on <ul>/<ol>) |
cjk | CJK corpus (Chinese/Japanese/Korean) |
arabic | Arabic corpus |
cyrillic | Cyrillic corpus |
Multi-language support
The corpus auto-detects from the lang attribute on the element or its ancestors.
Non-Latin corpuses
<p lang="ja" data-lorem></p><p lang="ar" data-lorem></p><p lang="ru" data-lorem></p><p data-lorem="cjk"></p>Wireframe Mode
Add data-wireframe to <html> or any container to enable wireframe rendering. Requires the dev CSS bundle.
Fidelity levels
Wireframe fidelity
<html data-wireframe><!-- "lo" — scribble font, pure B&W --><html data-wireframe="lo"><!-- "mid" — block font, dashed borders --><html data-wireframe="mid"><!-- "hi" — system fonts, subtle styling --><html data-wireframe="hi">| Level | Fonts | Borders | Colors |
|---|---|---|---|
lo | Scribble (Redacted Script) | Rough dashed | Pure B&W |
mid (default) | Block (Flow Block) | Dashed | Grayscale |
hi | System fonts | Subtle | Near-production |
annotate | System fonts | Labeled | Grayscale + labels |
JavaScript API
The VanillaBreeze.wireframe object is available when the dev JS bundle is loaded.
Wireframe JS API
<h3>Callouts</h3> <p>Add <code>data-wf-callout="comment text"</code> to any element for design review notes. The JS API renders numbered markers and a footnote panel. See <a href="/docs/attributes/data-wireframe/#callouts-comments">Callouts & Comments</a> for details.</p> <h3>Integration with prototyping tools</h3> <p><code>data-mock</code> media adapts automatically to wireframe tokens. <code>data-lorem</code> text in <code>lo</code> fidelity gets abstract letter-spacing for a text-block appearance. No extra configuration needed.</p></section> <section> <h2>Skeleton Loading</h2> <p>The <code>data-loading="skeleton"</code> attribute renders pulsing placeholder blocks for content that is loading. Cross-reference: <a href="/docs/attributes/hide-until-ready/">Loading states</a>.</p> <code-block language="html" show-lines label="Skeleton loading" data-escape><article data-loading="skeleton"> <h2>Loading title...</h2> <p>Loading content paragraph...</p> <img src="placeholder.svg" alt="" width="400" height="225"></article>Loading title...
Loading content paragraph...
Fake Content CLI
For realistic test data (products, users, testimonials), use the CLI helper powered by Faker.js.
Fake content CLI
# Generate fake product datanode scripts/fake-content-helper.js --type product --count 5 # Generate user testimonialsnode scripts/fake-content-helper.js --type testimonial --count 3Faker is a Node.js devDependency only — it is not included in the browser bundle.
Image URL Utility
For JS-driven scenarios (dynamic galleries, programmatic mockups), use the image URL utility available on the dev bundle.
Image URL utility
<section> <h2>Full Demo</h2> <p>All prototyping tools working together — mock images, lorem text, and multi-language content in a complete page prototype. Toggle wireframe mode from the toolbar to see how the same HTML renders as a sketch.</p> <browser-window url="prototyping-toolkit.html"> <iframe src="/docs/examples/demos/prototyping-toolkit.html" style="width:100%;height:600px;border:0" title="Prototyping Toolkit Demo" loading="lazy"></iframe> </browser-window> <p><a href="/docs/examples/demos/prototyping-toolkit.html">Open full-page demo</a></p></section>