Text Images Repeat Copy Sink


Dynamic placeholder content for improved frontend builds

Speed up and crash test your front-end builds and HTML prototypes with a range of dynamic placeholder content that helps you test for all the edge-cases with auto-changing image and text sizes.

Example: Lorem ipsum dolor sit
Start using this right now
Add this script to your HTML page
<script src="https://dummyjs.com/js"></script>
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>

Specify a number of dummy words
<em data-dummy="20"></em>
Random number of dummy words
<div data-dummy="3,6"></div>

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)
<img data-dummy width="400" height="300" />
or, you can also set the size with CSS
Random Size
<img data-dummy="400,100x100,400" />
Custom Text
<img data-dummy data-text="User Avatar" />
Custom Colors
<img data-dummy data-color="#0000ff" data-text-color="#fff" />
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
<div data-copy=".backstory-cite"></div>
* 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>

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

Combining the above into a real use case
Dynamic Filter Label
Dynamic Category
More →
Dynamic Title
Dynamic Description
More →

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
Not done yet...
More DummyJS Prototyping Features
Have a go!
Find easily next time
Add dummyjs to your GitHub starred list

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
Other Handy Prototyping Resources
…know of any more? Please msg me!