ObjGen Help - Live HTML Editor and Twitter Bootstrap Generator

The ObjGen Live HTML Element Generator allows the user to interactively shape, create and generate HTML elements and layouts. The generator supports the Bootstrap front-end framework giving the user a powerful way to create great looking prototypes and page snippets with an easy to use and understand modeling syntax.

Model highlights

  • Uses a HAML like syntax, but streamlined for rapid, interactive prototyping
  • HTML elements are defined on a line by line basis
  • HTML element names are automatically recognized by the ObjGen engine. Simply enter the name of the HTML element to define in the layout. No extra markup is required.
  • Use spaces/tabs to nest elements within each other to create more complex layouts.
  • Easily associate CSS class names to an element by typing their names. CSS class names can be separated either by using a space or a '.' character.
  • Element ids are specified by using a '#' character to prefix the id
  • Content is assigned by using the '=' operator.
  • Unless a valid HTML element type appears on a line, a <div> is assumed.
  • The live HTML element generator supports the Bootstrap fornt-end web framework by default.


  • Unless a valid HTML element type appears on a line, a <div> is assumed.
      =This is my content
will generate:
  <div class="well">
    <div>This is my content</div>
  • An element's type, id, classes, attributes and content can all be specified on the same line
   button#demo-button.btn.btn-primary(type="button")=Click Me!
will generate:
  <button id="demo-button" class="btn btn-primary" type="button">Click Me!</button>

Copyright © 2021 Everett Ward Systems