The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×


    Quickly create an interactive HTML mock-up by auto sourcing lorem ipsum/images generators, with minimal html markup, and no server side code
    Filed under 

    • 🔾21%Overall
    • 463
    • 58.3 days
    • 🕩37
    • 👥6

    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

           <script src="/bower_components/jquery/jquery.min.js"></script>
           <script src="/bower_components/roughdraft/roughdraft.min.js"></script>
           <!-- Your HTML Goes Here! -->

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


    • data-draft-repeat
    • data-draft-text
    • data-draft-image
    • data-draft-date
    • data-draft-number
    • data-draft-user

    Please see Full Usage Wiki for more information


    Lorem Ipsum remote APIs ("library")

    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.

    • "lorem"
    • "" -- courtesy of
    • "" -- courtesy of
    • "" -- courtesy of
    • "" -- courtesy of
    • add your favorite ipsum generator with JSON converter/add to repository library

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

          author: 'lorem',
          customIpsum: true,
          customIpsumPath: '/bower_components/roughdraft.js/roughdraft.thesaurus.json'

    Image generators

    User generator

    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.

    Show All