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!

Updating an Element

When your element has changed, call it's .update() function to replace the element with a new one using DOM diffing:

var element = bel`<div>hello</div>`

// ... later ...

element.update(bel`<div>changed!</div>`)

Data Down

Any time the data changes, re-render your element with the new data:

function render (msg) {
  return bel`<div>${msg}</div>`
}
var element = render('hello')

// ... later ...

element.update(render('changed!'))

Scaling

As your element grows more complex, simply move that portion to another function and keep passing the data down:

var bears = ['grizzly', 'polar']
var element = render(bears)

function render (bears) {
  return bel`<ul>
    ${bears.map(function (bear) {
      return bel`<li>${button(bear)}</li>`
    })}
  </ul>`
}

function button (label) {
  return bel`<button>${label}</button>`
}