Skip to content
Easy markup string building in Javascript, inspired by Jim Weirich's Builder library
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Easy markup string building in Javascript, inspired by Jim Weirich’s Builder library – scratched an itch for me as I kept screwing html up when constructing it with javascript string methods, didn’t like implementing templates in JS and the Builder style was a good fit for rapid dev.

Currently I don’t use this in production so it’s not got an extensive test suite, hasn’t had multi-browser QA and doesn’t support all html tags – in fact it’s generally horrible but vaguely usuable. Caveat Emptor etc. Would welcome any ideas, better yet fork the repo and fix something if it’s really bugging you and send me a pull request.

Supported Tags

TABLE, TR, TD, DIV, SPAN, P, UL, OL, LI, IMG, BR, A, H1, H2, H3, H4


// alias markupBuilder for convenience
var b = markupBuilder();

//basic tag
//generates string  ''<div></div>'

test_div = b.div();

//basic tag with text
//generates string 

test_span = b.span("hello world");

// self closing tag with attributes
// generates string  '<img src="moon.gif" width="200" height="100" />'

test_img = b.img({src:"moon.gif",width:"200",height:"100"});

// standard list
// generates string '<ul><li>apples</li><li>oranges</li><li>pears</li></ul>'

standardList = b.ul(

// list from array
// generates string '<ul><li>apples</li><li>oranges</li><li>pears</li></ul>'

myItems = ["apples","oranges","pears","grapes","bananas"];  
arraylist = b.ul(

// put them all together for complex markup
complexMarkup =   b.table(
                          src: "moon.gif",
                          width: "200",
                          height: "100"

TODO: autogenerate methods for all html tags
TODO: pass in yaml for list/table generation
TODO: wrapping array/yaml data in multiple tags
TODO: tables from multi-dimensional arrays

Something went wrong with that request. Please try again.