dummyjs.com placeholder text & images for HTML prototyping
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dictionaries
dist
docs
src
website-assets
.editorconfig
.gitignore
CNAME
FUN_USAGES.txt
build.js
index.html
package-lock.json
package.json
readme.md

readme.md

Dummy.js – Crash test your front-end builds with:

Dynamic, ever changing, dummy text, placeholder images and more

dummy.js

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 image and text sizes. Throw in easy repeatable & cloning of elements and you have the perfect companion for your battle tested builds.

😎 Why

Going through the front-end creation process requires the frequent need to test with dynamic images and text of various sizes to battle test the html + css styling. This can be a time consuming manual step, but also a crucial one to simulating user generated 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.

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

Latest documentation and examples can be found at:

https://dummyjs.com/

😄 Usage

Add the script tag to your HTML page:

<script src="https://dummyjs.com/js"></script>

or for JS use in React and JS apps:

npm install dummyjs --save-dev
const Dummy = require('dummyjs'); // es5 or node
import Dummy from 'dummyjs'; // es6

📖 Dummy Text

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

Choose the amount of words:

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

Choose a random amount of words between 3 and 10:

<p data-dummy="3,10"></p>
Dummy.text(3,10)

🎨 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

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

Defaults to the size of the parent container

<img data-dummy />

Random size

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

Custom Text

<img data-dummy="400x300" data-text="person" />

Custom Colors

<img data-dummy="400x300" data-color="#0000ff" data-text-color="#fff" />

Output a Kitchen Sick of HTML

Useful for quick Base styling or testing CMS outputted HTML. Tags like ul, select, table, forms and more are automatically outputted with suitable contents.

Output a kitchen sick of headings, tables, images & form elements

<div data-html></div>
Dummy.html() // returns a string of html elements

Output a specific element:

<div data-html="table"></div>
Dummy.html('table') // returns a string of html elements

Or, multiple elements:

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

Repeat Elements

<div data-repeat="3">Team Member</div>

Repeat a random amount of times between 3 and 10:

<p data-repeat="3,10"></p>

Copy Elements

Duplicate elements into other areas of your webpage. Pass a CSS selector like .myelement or .post h3

<div data-copy=".pagination"></div>

More Docs and Examples are available at:

https://dummyjs.com/

Usage with jQuery and Vue

jQuery:

jQuery('p').dummy(30)

Vue.js: https://www.npmjs.com/package/vue-dummy

Issues and suggestions: https://github.com/paulcollett/dummyjs