Lorem ipsum generator

How to use this tool

Lorem ipsum is scrambled Latin derived from a first-century BC text by Cicero, de Finibus Bonorum et Malorum. Typesetters and designers have used it for decades — Letraset's transfer sheets popularised it in the 1960s — for a simple reason: it looks like natural language — with realistic word lengths, sentence rhythm and letter distribution — without being readable.

That unreadability is the entire point. Put real, legible English into a mockup and stakeholders start editing the copy. Put obvious filler like "xxxxx" in and you lose the visual texture that makes a layout look real. Lorem ipsum sits precisely between the two, keeping a design review focused on spacing, hierarchy and typography.

How much placeholder text do you actually need?

Match the amount to what the real content will be, not to what fills the box neatly. A layout that only looks good with exactly three tidy paragraphs will break the moment a client writes five, or one. Deliberately test the extremes: generate a single short sentence to see how the design handles sparse content, then generate ten paragraphs to check that long content still flows.

The same applies to headings. Real headlines are rarely the perfect length — generate a few words for a short one and a full sentence for a long one, and make sure neither breaks your layout.

The one rule: never ship it

Placeholder text that reaches production is a classic embarrassment, and it carries real costs. Google indexes it, so your page can end up ranking for "lorem ipsum" instead of your actual topic. It looks unfinished to visitors, damaging trust at exactly the moment you want it. On e-commerce or service sites it can even create legal exposure if it stands in for terms, pricing or product descriptions.

Make it a pre-launch step: search your whole codebase for "lorem" and "ipsum" before every deploy. The launch checklist on our Dev Essentials page covers this alongside the other checks worth doing before a site goes live.

When to skip lorem ipsum entirely

Filler text is right for early layout exploration, but there is a growing case for designing with real or realistic content instead — sometimes called content-first design. Real copy exposes problems dummy text hides: a product name that is far longer than expected, a category with only one item, a testimonial that runs to two hundred words.

A practical middle path is to use lorem ipsum while you are working out spacing and hierarchy, then swap in the closest thing to real content you can get before signing the design off. If the layout survives both, it will survive production.

Deterministic placeholder text for tests, stories and server rendering

Generating random lorem ipsum inside a component is convenient, and it causes two real bugs. With server-side rendering, Math.random() runs once on the server and again in the browser during hydration, so the text differs and React reports a hydration mismatch. In visual regression tests and Storybook snapshots, every run produces new words, every screenshot differs, and the diffs become noise people learn to ignore.

Math.random() can't be seeded, so the fix is a small seeded generator: the same seed gives the same words on every machine and every run.

// mulberry32: a tiny seeded PRNG. Same seed, same sequence, every run.
function mulberry32(seed) {
  return () => {
    seed = (seed + 0x6d2b79f5) | 0;
    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

const WORDS = 'lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'.split(' ');

export function lorem(seed, minWords, maxWords) {
  const rand = mulberry32(seed);
  const n = minWords + Math.floor(rand() * (maxWords - minWords + 1));
  const words = Array.from({ length: n }, () => WORDS[Math.floor(rand() * WORDS.length)]);
  return words.join(' ').replace(/^./, c => c.toUpperCase()) + '.';
}

// Fixtures that cover both extremes, identical on server, client and CI
export const cards = [
  { id: 1, title: lorem(1, 2, 3), body: lorem(11, 8, 12) },
  { id: 2, title: lorem(2, 12, 16), body: lorem(12, 60, 80) },
];

console.log(lorem(42, 4, 8));
// "Sed dolore incididunt sit eiusmod consectetur tempor." on every run

Build placeholder content from a seed in your fixtures rather than calling Math.random() during render, and make the fixtures deliberately uneven, as above: a two-word title beside a sixteen-word one, a short body beside an eighty-word one. Add one string with a very long unbroken word or URL, because that is the case most likely to burst out of a card; overflow-wrap: anywhere is usually the fix. MDN confirms that Math.random()'s seed can't be chosen or reset, and React's hydrateRoot reference lists the usual causes of hydration errors.