bel

bel

A simple library for composable DOM elements using tagged template strings.

usage

For a more in depth tutorial on getting started, please check out the wiki.

A Simple Element

Create an element:

// list.js
var bel = require('bel')

module.exports = function (items) {
  return bel`<ul>
    ${items.map(function (item) {
      return bel`<li>${item}</li>`
    })}
  </ul>`
}

Then pass data to it and add to the DOM:

// app.js
var createList = require('./list.js')
var list = createList([
  'grizzly',
  'polar',
  'brown'
])
document.body.appendChild(list)

Data Down, Actions Up

// list.js
var bel = require('bel')

// The DOM is built by the data passed in
module.exports = function (items, onselected) {
  function render () {
    return bel`<ul>
    ${items.map(function (item) {
      return bel`<li>${button(item.id, item.label)}</li>`
    })}
    </ul>`
  }
  function button (id, label) {
    return bel`<button onclick=${function () {
      // Then action gets sent up
      onselected(id)
    }}>${label}</button>`
  }
  var element = render()
  return element
}

// app.js
var bel = require('bel')
var list = require('./list.js')

module.exports = function (bears) {
  function onselected (id) {
    // When a bear is selected, rerender with the newly selected item
    // This will use DOM diffing to render, sending the data back down again
    element.update(render(id))
  }
  function render (selected) {
    return bel`<div className="app">
      <h1>Selected: ${selected}</h1>
      ${list(bears, onselected)}
    </div>`
  }
  // On first render, we haven't selected anything
  var element = render('none')
  return element
}

similar projects

• vel
  minimal virtual-dom library
• base-element
  An element authoring library for creating standalone and performant elements
• virtual-dom
  A Virtual DOM and diffing algorithm
• hyperscript
  Create HyperText with JavaScript.

license

(c) 2016 Kyle Robinson Young. MIT License