Blueprint.js


$new('article')
	.style({
		background: '#fff',
		color: '#000'
	})
	.text('Shall we begin?')
	.element()

Why does this exist?

I often needed to create new HTML elements in JavaScript for many of my projects, and it was tedious to use the built in methods. document.createElement, className, and setAttribute all started to haunt my dreams. These method and property names all felt so inconsistent, but the worst was trying to create complex, nested elements.

Easy Writing, Easy Reading

Blueprint makes the code for generating HTML elements both easier to write, and easier to read. Take a look at this snippet and guess what it does:


$new('div.foo')
	.text('Hello World')
	.element()

If you guessed that it would create a new element equivalent to this HTML:


<div class='foo'>Hello World</div>

Congratulations! You have earned a gold star and my undying respect. Blueprint is designed to be familiar and easy to pick up. But how does this work? And how far can it go?

Chain Gang

Blueprint relies on a technique called method chaining. Using this, you can rapidly create an element and define all of the information you'd usually be able to put into the HTML version all at once. You don't have to store the element as a variable or remember wildly inconsistent ways to modify it. You can just make your element.

And because JavaScript has supported this for a long time, it'll work in Internet Explorer and without having to do any compilation. In the case of Blueprint, it also allows you to very easily create nested elements.

Children & Nests

If you need to create an element with children in Blueprint, it's as easy as calling .append. For example, if you needed to create a list of a few items, you could do this:


$new('ol')
	.append(
		$new('li').text('Foo'),
		$new('li').text('Bar'),
		$new('li').text('Baz')
	)
	.element()

Which is equivalent to creating this HTML:


<ol>
	<li>Foo</li>
	<li>Bar</li>
	<li>Baz</li>
</ol>

All of the methods you use to define a single element can also be used to define the children. You can also add children of children. (Keep the HTML family alive with grandkids!)