node package manager


Elegant HTML generation. No templating. Just Javascript.

Create DOM Elements with nestable arrays that reflect the structure of HTML:

["#content", [
["h1.prominent", "Blogs"],
["ul", [
["li a", { href: "" }, "FunctionSource"],
["li a", { href: "" }, "Javascript, Javascript"],
["li a", { href: "" }, "John Resig"]

Results in:

<div id="content">
<h1 class="prominent">Blogs</h1>
<li><a href="">FunctionSource</a></li>
<li><a href="">Javascript, Javascript</a></li>
<li><a href="">John Resig</a></li>

It all happens with one function: Creatable.create

Creatable.create([TAGNAME, ATTRIBUTES, CHILDREN|CONTENT]) // returns a native DOM element 
Creatable.create(["a", { href: "" }, "Google"]);
  • Switching in and out of Javascript and whatever templating language you use is ugly.
  • No special templating language syntax. 100% pure Javascript.
  • Implement view composition using plain, old functions.
  • Properly formatted input still reflects the actual structure of HTML for readability.


Creatable.create(["div#footer", [
["p.fine-print", "Don't forget to read this!"]
<div id="footer">
<p class="fine-print">Don't forget to read this!</p>
["p", "First paragraph!!!"],
["p", "Second paragraph!!!"],
["p", "Third paragraph I'm bored"]
<p>First paragraph!!!"</p>
<p>Second paragraph!!!"</p>
<p>Third paragraph I'm bored</p>
Creatable.create(['p', 'Something <strong>important</strong> to say.'])
<p>Something &lt;strong&gt;important&lt;/strong&gt; to say.</p>

You can unescape HTML by adding { html: true }

Creatable.create(['p', { html: true }, 'Something <strong>important</strong> to say.'])
<p>Something <strong>important</strong> to say.</p>
var links = [
{ url: "", label: "FunctionSource" },
{ url: "", label: "Javascript, Javascript" },
{ url: "", label: "John Resig" }
var buildLinkItem = function(model) {
return ["li", [
["a", { href: model.url }, model.label]
Creatable.create(["ul",, buildLinkItem)])
<li><a href="">FunctionSource</a></li>
<li><a href="">Javascript, Javascript</a></li>
<li><a href="">John Resig</a></li>
Creatable.create(["#myModule", [
["h1", "This is a header"],
"Some text.",
$("<div><p>Go, Go jQuery</p></div>")
<div id="myModule">
<h1>This is a header</h1>
Some text.
<div><p>Go, Go jQuery</p></div>
var html = Creatable.createHtml(['a#go.small.button', 'test']);
console.log(html); //<a id="go" class="small button">test</a> 

Unit Tests

creatable has full unit test coverage using mocha.


Just include creatable.js in your HTML:

<script src="creatable.js"></script>