as-html

Simple html templates with es6 quasi literals. You can also minify the templates using babel-plugin-as-html.

Inspired by http://www.2ality.com/2015/01/template-strings-html.html.

Installation

Npm

$ npm install as-html

Example

// commonjs
var html = require('as-html')
 
// es6
import html from 'as-html'
 
// examples
let planet = 'world'
 
html`
  <div>Hello ${planet}</div>
` //-> '<div>Hello world</div>'
 
// safe by default
planet = 'crazy<planet>'
 
html`
  <div>Hello ${planet}</div>
` //-> '<div>Hello crazy&lt;planet&gt;</div>'
 
// or insert html by prefixing with a bang!
html`
  <div>Hello !${planet}</div>
` //-> '<div>Hello crazy<planet></div>'
 
// arrays are supported as well (automatically unescaped)!
let planets = ['a', 'b', 'c']
 
html`
  <div>
    ${planets.map(planet => html`
      <b>${planet}</b>
    `)}
  </div>
` //-> '<div><b>a</b><b>b</b><b>c</b></div>'

Contributions

• Use npm test to run tests.

Please feel free to create a PR!