Create HTML templates using HTM (HyperScript Tagged Markup).

import { template, use } from 'htmplate'

const tmpl = template`
  <div class=container>
    <h1>Hellow World!</h1>
    <button>CLICK ME!</button>
  </div>
`

document.body.appendChild(use(tmpl))

👉 Try it out!

Installation

On node:

npm i htmplate

In the browser:

import { template, use } from 'https://esm.sh/htmplate'

Usage

👉 Define HTML templates using a JSX-like syntax:

const tmpl = template`<div>Hellow World!</div>`

The syntax is powered by HTM, so you get bonuses such as self-closing tags (<div/>), components (<${Foo}/>), syntax-highlighting (e.g. this VSCode plugin, though requires additional configuration), etc. See HTM's docs for more info.

👉 Use HTM templates (whether defined using template or not) to create elements:

document.body.appendChild(use(tmpl))