DummyJs – Dynamic dummy text and placeholder images

Start using this right now

Add this script to your HTML page

Hosted on GitHub Pages, SSL option is provided via CloudFlare’s free Universal SSL offering

Also available at unpkg.com/dummyjs

or, in React/Vue and Other JS Apps:

npm install dummyjs
const Dummy = require('dummyjs');
import Dummy from 'dummyjs'

Dummy Text

Use the attribute "data-dummy" for dummy text

<p data-dummy></p>
Dummy.text()

Specify a number of dummy words

<em data-dummy="20"></em>
Dummy.text(20)

Random number of dummy words

<div data-dummy="3,6"></div>
Dummy.text(3,6)

Dummy Images

DummyJs Images are rendered client side so NO one can to log your data
It's secure for your piece of mind to keep your unreleased product secret

Use the attribute "data-dummy" for a dummy image

Autosize to parent container

<img data-dummy />
Dummy.img() // Returns an image src

Specific Size

<img data-dummy="400x300" />
Dummy.img(400, 300)

or,

or, you can also set the size with CSS

Random Size

<img data-dummy="400,100x100,400" />
Dummy.img('400,100x100,400')

Custom Text

Custom Colors

If you ever need a placeholder image without the DummyJs script,
you can use: <img src="//img.dummyjs.com/200x200"/>

Repeatable Elements

Repeat an element `data-repeat="3"`

            <ul>
              <li data-repeat="3">My list item</li>
            </ul>
          

My list item

Combine with `data-dummy`

          <ul>
            <li data-dummy="3" data-repeat="3"></li>
          </ul>
          

Random Range `data-repeat="2,5"`

          <ul>
            <li data-dummy="1,3" data-repeat="2,5"></li>
          </ul>
          

Working with Bootstrap?

We've put together some examples of using DummyJs with Bootstrap

View Examples

Working with React, Vue and other JS Apps?

Here is how to get DummyJs into your JS and framework environments

Install DummyJs for Vue Install DummyJs for React & JS

Add us to your GitHub starred list —

Copy elements to different locations

Copy an existing element

* Use any css like selector

Useful for templating

<template id="my-template">
  <h4>Social Links</h4>
  <ul class="example-social-links">
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Twitter</a></li>
    <li data-repeat="2"><a href="#" data-dummy="2"></a></li>
  </ul>
</template>

<div data-copy="#my-template"></div>
<hr />
<div style="border: 3px dashed green; padding: 10px">
  <div data-copy="#my-template"></div>
</div>

Combining the above into a real use case

Dynamic Filter Label

Dynamic Category

←

Dynamic Title

Dynamic Description

←

Kitchen Sink

A quick way to test styling of common tags. Useful for:

Base styling
Testing CMS outputted HTML, like:
- Blog Posts
- Potential Page Content
- Product Descriptions

        <div data-html></div> 
      
        Dummy.html() // returns HTML elements as a string
      
        <div data-html="form"></div> 
      
        Dummy.html('form') // returns as a string
      
        <div data-html="h1,p,ul,table,select"></div> 
      
        Dummy.html('h1,p,ul,table,select') // returns as a string

Also, target specific elements with jQuery

$('p').dummy('30')
$('img').dummy('300,400')

Not done yet...

More DummyJS Prototyping Features

Have a go!

Test DummyJS on JSFiddle

Find easily next time

Add dummyjs to your GitHub starred list

Backstory

In a continuous effort to streamline the front-end build process, I was finding the frequent need to test images and text of various sizes. This was a time consuming manual step but also a crucial in simulating dynamic content, testing word wrapping, repeating of elements, etc. To battle test the front end for these edge cases not only quicker, but more thoroughly, the first version of DummyJs was realized to add a layer of automation to this process.

Packaging up DummyJs was both a step in providing quicker access to the script tag and opening it up for community use ♥.

From here DummyJS has extended to double as a robust tool in JS first development environments, like React and Vue and also Node JS.

Hopefully DummyJs can be the tool you need to crash test your next build!

Paul Collett

paulcollett.com

Other Handy Prototyping Resources

JSONPlaceholder →
Fake Online REST API for Testing and Prototyping

…know of any more? Please msg me!