Pithy.js

An internal DSL for generating HTML in JavaScript.

Examples

Basic elements

html.div('#main',[html.h1(null,'Hello, world!'),html.img({src:'foo.jpg'})]);

<divid="main"><h1>Hello, world!</h1><imgsrc="foo.jpg"/></div>

Loops etc.

Using Underscore.js or similar:

functiontodoItem(item){returnhtml.li({rel:item.id},[html.div('.title',item.title),html.button('.destroy','delete')]);}functiontodoList(list){returnhtml.ul('.todo-list',_.map(list,todoItem));}todoList([{id:1,title:'item one'},{id:2,title:'item two'},{id:3,title:'item three'}]);

<ulclass="todo-list"><lirel="1"><divclass="title">item one</div><buttonclass="destroy">delete</button></li><lirel="2"><divclass="title">item two</div><buttonclass="destroy">delete</button></li><lirel="3"><divclass="title">item three</div><buttonclass="destroy">delete</button></li></div>

Why use an internal DSL?

• It's a more convenient and safer alternative to string contatenation
• Very flexible, you can use all the power of JavaScript functions and control structures
• For small bits of HTML you might not want to switch contexts from code to a template
• Easier to debug than a templating engine
• You get full tool-chain support:
  • editor support: syntax highlighting, code tools etc etc
  • code analyzers: jslint, jshint
  • testing/coverage tools

When to use?

• Consider using where you might currently use string concatenation
• Avoid using for large HTML documents or in places where speed is critical
• Good for small snippets used for client-side page updates
• Bad for generating huge amounts of HTML on the server

Usage

I like to alias the 'pithy' library as 'html':

varhtml=require('pithy');

You can then just use html.tagname as a function to create the appropriate element. Please note, you actually get a html.SafeString object back, not a native JavaScript String. This might mess up your isString() tests. If you have a workaround please send a pull-request.

There is also a html.escape() function for escaping HTML (returns a html.SafeString). It will not escape a value that is already a html.SafeString object.