Get new jQuery plugins just once a week



September 25, 2014

Create an interactive HTML mock-up by lorem ipsum/images generators

Roughdraft.js is a jQuery plugin to quickly create an interactive HTML mock-up by auto sourcing lorem ipsum/images generators, with minimal html markup, and no server side code.

Created by ndreckshage



RoughDraft-js jQuery plugin


RoughDraft.js v0.1.5

Quickly mockup / prototype HTML pages with auto-generated content, without additional JavaScript or server side code.

  <div data-draft-repeat="30">
    <img data-draft-image="300/300" />
      <p data-draft-text="1/s"></p>
      <span data-draft-user="first"></span>
      <span data-draft-user="state"></span>
      <i data-draft-date="F-r"></i>
      <button class="btn" data-draft-number="$/2-3"></button>


See API below for more details.


Important: Depends on jQuery. Must be loaded after.

  1. Download RoughDraft.js or install via Bower

    bower install --save-dev roughdraft.js
  2. Create a new mockup


    <!-- Your HTML Goes Here! -->


    Recommendation: This is meant to be used as a living frontend styleguide and should not be loaded in Production.


Please see Full Usage Wiki for more information


Lorem Ipsum remote APIs ("library") + "lorem" : "" + "bacon" : "" + "hipster" : ""

Lorem Ipsum (local only) ("bookstore") NOTE —— all with author permission. If you want to commit a new library, please make sure you have the author permission.

Note: To save load time you can specify a thesaurus that will be used instead of making an HTTP call for lorem ipsum text.

javascript $(window).roughDraft({ author: 'lorem', customIpsum: true, customIpsumPath: '/bower_components/roughdraft.js/roughdraft.thesaurus.json' });

Image generators + "placekitten" : " + params" + "placehold" : " + params" + "placedog" : " + params" + "baconmockup" : " + params"

User generator + Created an API of the php port of Faker that I am hosting at

Class name sequencer Style patterns with expectable class name sequence of your choice.

To use the feature, simply add a class name containing *alfa* and that node's siblings will have similar class name following NATO phonetic alphabet.

Want to Contribute?

Ideas, information, contributor list, etc.


Related posts:

Mason js
Color Picker Slider

To install using Bower
bower install roughdraft.js

RoughDraft-js jQuery plugin

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever