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 canvas
  • data-lorem — placeholder text on any element with multi-language support
  • data-wireframe — sketch-like wireframe mode with fidelity levels
  • data-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

<img data-mock width="400" height="300" alt="Hero banner">
Hero banner

Presets

Named presets set aspect ratio and default dimensions via CSS. No width/height attributes needed.

<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">
Hero banner Featured article Product image User photo Gallery thumb Company logo Social share image Ad banner
Available presets
PresetAspect ratioDefault width
hero3:1100%
card16:9400px
avatar1:148px
product1:1400px
thumbnail1:1150px
logo4:1200px
og1200:630100%
banner728:90100%

Photo service

Use data-mock="photo" for realistic images from picsum.photos. Add data-seed for reproducible results.

<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">
Random photo Seeded 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.

<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> <img data-mock="card" alt="Team photo"> <figcaption>Our engineering team</figcaption> </figure>
Team photo
Our engineering team

Production transition

Replace src and remove data-mock. The HTML structure stays identical.

<!-- 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

<p data-lorem></p>

Options

<p data-lorem="50"></p> <p data-lorem="3 sentences"></p> <h2 data-lorem="heading"></h2> <ul data-lorem="5 items"></ul>

    data-lorem values
    ValueResult
    (empty)~50 words of lorem ipsum
    5050 words
    3 sentences3 sentences
    heading5 words (heading-length)
    5 items5 list items (on <ul>/<ol>)
    cjkCJK corpus (Chinese/Japanese/Korean)
    arabicArabic corpus
    cyrillicCyrillic corpus

    Multi-language support

    The corpus auto-detects from the lang attribute on the element or its ancestors.

    <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

    <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">
    Wireframe fidelity levels
    LevelFontsBordersColors
    loScribble (Redacted Script)Rough dashedPure B&W
    mid (default)Block (Flow Block)DashedGrayscale
    hiSystem fontsSubtleNear-production
    annotateSystem fontsLabeledGrayscale + labels

    JavaScript API

    The VanillaBreeze.wireframe object is available when the dev JS bundle is loaded.

    // Toggle wireframe mode VanillaBreeze.wireframe.toggle(); VanillaBreeze.wireframe.toggle('lo'); // Set specific fidelity VanillaBreeze.wireframe.setFidelity('hi'); // Query state VanillaBreeze.wireframe.isActive(); VanillaBreeze.wireframe.getFidelity(); // Label elements for annotation mode VanillaBreeze.wireframe.labelElements();

    Callouts

    Add data-wf-callout="comment text" to any element for design review notes. The JS API renders numbered markers and a footnote panel. See Callouts & Comments for details.

    Integration with prototyping tools

    data-mock media adapts automatically to wireframe tokens. data-lorem text in lo fidelity gets abstract letter-spacing for a text-block appearance. No extra configuration needed.

    Skeleton Loading

    The data-loading="skeleton" attribute renders pulsing placeholder blocks for content that is loading. Cross-reference: Loading states.

    <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...

    Loading image

    Fake Content CLI

    For realistic test data (products, users, testimonials), use the CLI helper powered by Faker.js.

    # Generate fake product data node scripts/fake-content-helper.js --type product --count 5 # Generate user testimonials node scripts/fake-content-helper.js --type testimonial --count 3

    Faker 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.

    // Programmatic placeholder URLs VanillaBreeze.mock.imageUrl({ service: 'picsum', width: 400, height: 300, seed: 42 }); // → 'https://picsum.photos/seed/42/400/300' VanillaBreeze.mock.imageUrl({ service: 'placehold', width: 400, height: 300, text: 'Hero' }); // → 'https://placehold.co/400x300?text=Hero'

    Full Demo

    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.

    Open full-page demo