/dummyjs

dummyjs.com placeholder text & images for HTML prototyping

Primary LanguageJavaScript

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://dummy.paulcollett.com/

😄 Usage

Intall for use in React and JS apps:

yarn add dummyjs --dev # for use with yarn, or:
npm install dummyjs --save-dev # for use with npm

And, import:

const Dummy = require('dummyjs'); // es5 or node
import Dummy from 'dummyjs'; // es6

Or simply, add the script to your html page:

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

📖 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://dummy.paulcollett.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