Lorem Forge

Lorem Forge

Typographer's Ipsum
← The Library
Practical Guides

Lorem Ipsum in VS Code: The Emmet `lorem` Shortcut

Everything about Emmet's lorem shortcut: lorem, lorem10, lorem*5, p>lorem, ul>li*5>lorem3 — with the full abbreviation reference for placeholder text in VS Code.

5 min

Lorem Ipsum in VS Code: The Emmet lorem Shortcut

Emmet's Built-in Lorem Generator

Emmet — the shorthand expansion toolkit built into VS Code (and most other editors) — includes a lorem shortcut that generates lorem ipsum without copying from an external source. For frontend developers who scaffold HTML regularly, it is the fastest route from empty markup to representative placeholder content.

The expansion works in any file where Emmet is active: .html, .jsx, .tsx, .vue, and any other file type configured in VS Code's emmet.includeLanguages setting.

Basic Usage

Type the abbreviation and press Tab (or trigger abbreviation expansion with your configured shortcut):

Abbreviation Output
lorem One paragraph of lorem ipsum (~30 words)
ipsum Identical to lorem — both work
lorem10 Exactly 10 words of lorem ipsum
lorem50 Exactly 50 words of lorem ipsum
lorem100 Exactly 100 words of lorem ipsum 
<!-- Type: lorem -->
<!-- Expands to: -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum!

Note that VS Code's Emmet lorem generator uses a slightly different lorem ipsum variant than the standard. The expanded text is algorithmically generated with a word pool — it will vary slightly between expansions.

Combining with HTML Abbreviations

The real power of Emmet's lorem shortcut is combining it with HTML expansion syntax to generate complete markup structures in a single expansion:

p>lorem

Expands to a <p> element containing one paragraph of lorem ipsum.

p>lorem30

Expands to a <p> element containing exactly 30 words.

p*3>lorem

Expands to three <p> elements, each with its own paragraph of lorem ipsum.

p*3>lorem20

Expands to three <p> elements each containing 20 words of lorem ipsum.

ul>li*5>lorem4

Expands to an unordered list with 5 items, each containing a 4-word lorem ipsum phrase — useful for navigation mockups:

<ul>
  <li>Lorem ipsum dolor sit.</li>
  <li>Amet consectetur adipisicing elit.</li>
  <li>Maxime mollitia molestiae quas.</li>
  <li>Vel sint commodi repudiandae.</li>
  <li>Consequuntur voluptatum laborum numquam.</li>
</ul>

Article and Blog Post Scaffolding

Quickly scaffold a complete article structure:

article>h1>lorem5^p*4>lorem

Expands to:

<article>
  <h1>Lorem ipsum dolor sit amet.</h1>
  <p>Lorem ipsum dolor sit amet...</p>
  <p>Unde omnis iste natus error...</p>
  <p>Sed ut perspiciatis unde omnis...</p>
  <p>Neque porro quisquam est qui...</p>
</article>

The ^ operator moves the cursor up one level in the abbreviation tree — needed to place p elements as siblings of h1 rather than children.

Card Component Scaffolding

.card*3>.card__image+.card__body>h3>lorem4^p>lorem20

Generates three card structures, each with an image placeholder div, a title, and a body paragraph. Useful for populating grid layouts quickly.

JSX / React Considerations

Emmet works in .jsx and .tsx files, but JSX syntax requires special handling for certain characters. The apostrophe in lorem ipsum words can cause JSX parsing errors inside JSX expressions. Use the generator above to get HTML-entity-encoded output if you are pasting lorem ipsum into JSX string props:

// Safe in JSX — no unescaped apostrophes
const description = "Lorem ipsum dolor sit amet consectetur adipisicing elit.";

// Potentially problematic if lorem ipsum contains apostrophes in JSX text nodes
// Modern lorem ipsum generators avoid this; Emmet's lorem does not contain apostrophes

Configuring Emmet in VS Code

If Emmet abbreviations are not expanding in your file type:

// settings.json
{
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact",
    "vue-html": "html"
  },
  "emmet.triggerExpansionOnTab": true
}

The Complete Quick Reference

lorem          → 1 paragraph
lorem10        → 10 words
lorem*3        → 3 separate paragraphs (unwrapped)
p>lorem        → <p> with 1 paragraph
p*5>lorem      → 5 <p> elements, 1 paragraph each
p*5>lorem20    → 5 <p> elements, 20 words each
h1>lorem5      → <h1> with 5-word lorem heading
ul>li*4>lorem4 → <ul> with 4 <li> items, 4 words each
div>h2>lorem4^p*2>lorem → <div> with heading and 2 paragraphs

For controlled, specific output — exact paragraph lengths, HTML-wrapped formats, multiple units, custom flavor — the Lorem Forge generator gives you options that Emmet's word pool cannot.

Key Takeaways

  • Emmet's lorem abbreviation expands to placeholder text in any Emmet-enabled file in VS Code
  • Append a number for exact word counts: lorem30, lorem100
  • Combine with HTML abbreviations for complete markup scaffolding: p*3>lorem, ul>li*5>lorem4
  • Emmet uses a word pool variant, not the exact standard lorem ipsum — output varies between expansions
  • For precise control over format, flavor, and length, use the Lorem Forge generator and paste the result

Further Reading