Vanilla Breeze

data-lorem

Placeholder text via data attributes. Fill any element with lorem ipsum, specify word counts, sentence counts, or list items. Auto-detects language for CJK, Arabic, and Cyrillic corpuses.

Overview

The data-lorem attribute fills any text-containing element with placeholder text. Built-in corpuses for Latin, CJK, Arabic, and Cyrillic keep the browser bundle lean (~4KB) without requiring external dependencies.

How It Works

  1. On DOMContentLoaded, finds all elements with data-lorem
  2. Parses the attribute value to determine word count, sentence count, or mode
  3. Detects the appropriate corpus from the element's lang attribute (or its ancestors)
  4. Fills the element's textContent (or innerHTML for list items)
  5. Marks the element with data-lorem-filled and translate="no"
  6. A MutationObserver watches for dynamically added elements

Attributes

Attribute Type Description
data-lorem string Controls output. See Values table below.
data-lorem-filled boolean Set automatically after content is injected. Used as CSS hook for wireframe integration.
data-lorem-init boolean Set automatically to prevent double-binding. Do not set manually.

Values

ValueResultExample
(empty)~50 words of lorem ipsum<p data-lorem></p>
5050 words<p data-lorem="50"></p>
3 sentences3 full sentences<p data-lorem="3 sentences"></p>
heading5 words (heading-length)<h2 data-lorem="heading"></h2>
5 items5 <li> elements (on <ul>/<ol>)<ul data-lorem="5 items"></ul>
cjkCJK placeholder corpus<p data-lorem="cjk"></p>
arabicArabic placeholder corpus<p data-lorem="arabic"></p>
cyrillicCyrillic placeholder corpus<p data-lorem="cyrillic"></p>

Word Count

Pass a number to get that many words.

Sentence Count

Use N sentences for full sentences (singular sentence also works).

Headings

Use heading for short, heading-length text (5 words).

List Items

On <ul> or <ol>, use N items to generate <li> elements.

    Multi-language Support

    The corpus auto-detects from the lang attribute on the element or any ancestor. You can also force a specific corpus by name.

    Language detection
    Language codesCorpus
    ja, zh, koCJK (Chinese/Japanese/Korean)
    ar, fa, ur, heArabic
    ru, uk, bg, srCyrillic
    any other / noneLatin (default)

    Production Transition

    Replace the content and remove data-lorem. No structural changes needed.

    Wireframe Integration

    In data-wireframe="lo" mode, elements with data-lorem-filled get abstract text-block styling: extra letter-spacing and reduced opacity.

    Dynamic Elements

    Elements added to the DOM after page load are automatically filled via a MutationObserver.
    ↑