Home

bel is a simple element creator. It returns pure DOM elements but still uses efficient DOM diffing to update.

Because bel creates native DOM elements, they run standalone. No need to constantly update to keep in step with a framework or separate rendering library. Spend that time making each element do one thing better and better.

Tagged Template Strings

bel uses tagged template strings to compose elements. They are part of the JavaScript language and are available in modern browsers. There are build tools (like hyperxify) to compile for older browser targets.

Compose an Element

// Require bel
var bel = require('bel')

// Compose an element
var element = bel`<div>Hello!</div>`

// Add to the page
document.body.appendChild(element)

Compose Multiple Elements

With template strings, anything between the curly braces ${} is JavaScript:

var bel = require('bel')

var bears = ['grizzly', 'polar', 'brown']
var element = bel`<ul>
  ${bears.map(function (bear) {
    return bel`<li>${bear}</li>`
  })}
</ul>`

document.body.appendChild(element)

Attributes and Events

Attributes and event handlers can be added to elements in a natural way:

var button = bel`<button classs="primary" onclick=${function (e) {
  alert('button was clicked!')
}}>click me</button>`

Styling Elements

Specifying a style attribute will set the inline style in a Content Security Policy friendly way, using dom-css:

var css = {
  backgroundColor: 'red',
  transform: 'rotate(90deg)'
}
var element = bel`<div style=${css}>Hello!</div>`

It will even vendor prefix style properties that need it, like transform!