Easily add dummy text to your website & templates!

<script src="http://dummytext.com/dt-1.0.min.js"></script><noscript>Powered by <A href="http://dummytext.com">DummyText.com"></a></noscript>

Scroll for details

What is DummyText.com?

Dummy Text.com is a super simple, free service that automatically adds placeholder text into your HTML templates, mockups, or websites during development. It's like LoremPixel for for text content.

The service will inject "lorem ipsum" text on-the-fly using client-side JavaScript; i.e. without permanently polluting your HTML markup with tags and text that would eventually have to be removed anyway.

Usage - How-to

Using a simple syntax, all you have to do is add a tag attribute to any number of HTML nodes that you want to fill with dummy content. This basic example will pull placeholder text into a <p>-tag:

<p data-dummytext=""></p>

Finally, at the bottom of your page, just before your closing </body>-tag, add this single line of code:

<script src="http://dummytext.com/dt-1.0.min.js"></script><noscript>Powered by <A href="http://dummytext.com">DummyText.com"></a></noscript>

After your page loads as usual, the injected JavaScript will parse your HTML markup and fill in content where and how you have specified using the data-dummytext attributes. Simple as that!

Customizing the injected content - examples

The data-dummytext attribute accepts a fairly simple string syntax allowing you to specify the type and amount of injected dummy content that goes into the container element.

The most bare-bone example is this – using no parameters, relying only on defaults – which will fill text into a <p>-tag. The defaults will generate 50 words of "lorem ipsum" text.

<p data-dummytext=""></p>View live demo

Getting a little more advanced, this example will populate a <ul> list container with 10 <li> items, each containing 20 words of text:

<ul data-dummytext="li-x10-w20"></ul>View live demo

This last example will populate a <div> container with two (2) paragraphs of text (each one contained in a <p>-tag). Each paragraph will contain 100 words, split into sentenses with a length of 12 words. Word count and sentence length values will be varied randomly by +/- 20 %:

<div data-dummytext="p-x2-w100-s12-v20"></div>View live demo

You can add attributes to as many tags as you like, thus combining an infinite number of dynamic content injectors:

<body> ... (multiple tags with attributes) ... </body>View live demo

How does the attribute syntax work?

As you have probably noticed already, the attribute text value consists of a number of optional parameters separated by dashes (-).

The first part of the string is the HTML tag name for your injected content items, e.g. <p>-tags or <li>-tags. If you just want plain text, you can leave it out. Please note, however, that even though you leave out the first tag name parameter, all additional parameters must start with a dash.

Parameter	Function	Example	Result	Default
TAG	Tag name	li	Create `<li>`-tag items	(none)
-x#	Item count	-x4	Add 4 items of the specified type	1
-w#	Words per item	-w36	Each item will consist of 36 words	50
-s#	Sentence length	-s8	The sentence length in each item will be 8 words	10
-v#	Variation %	-v30	All values will be varied with +/- 30 percent	0

Easy Attribute generator

Ok, so you would rather just click a few buttons and have the attribute string generated for you? No problem. Just pick and choose below, and you will have the appropriate attribute generated instantly.

Tag name

Item count

Word count

Sentence length

Variation %

<div></div>

Click the attribute above to select it for easy copy-and-paste.

How to Delete Dummy Text

When your site is ready for real-life content rather than lorem ipsum, simply remove the <script> tag at the end of your HTML page.

To easily get rid of the "data-dummytext" attributes as well, use a regular expression search-and-replace in your favorite HTML editor.

For example, in Visual Studio, just do a search and replace like this:

Search for	data-dummytext="(.*)"
Replace with	(empty string)

This will remove any "data-dummytext" attributes.

Got feedback?

We'd love to hear from you. Feel free to get in touch.