HTML templating without the render loop.
maik
started as a fork of
hyperHTML but quickly
dissolved. It has support for Rx.Observables
as a new native 'primitive',
and provides tag functions like html
and svg
just like
lit-html does. In contrast to
lit-html
, html
and svg
are lazy.
Just play with it using true ESM modules:
<script type="module">
import { bind } from 'https://unpkg.com/maik.h/default-maik.js'
let render = bind(document.body)
render`<div>Hi, how are you?</div>`
</script>
Or, old-school:
<script src="https://unpkg.com/maik.h/default-maik-bundle.js"></script>
<script>
let { bind } = maik
let render = bind(document.body)
render`<div>Hi, how are you?</div>`
</script>
The API is really, really thin, so we just start off with another example.
// Assume Rx and maik are **globally** available
let { bind, html } = maik
let clock = Rx.Observable.interval(1000).map(() =>
new Date().toLocaleTimeString()
)
// `html` partials are lazy, they don't do anything until you attach them.
// That basically means, the clock is not ticking right now.
let greeting = html`<h1>Hello, world!</h1>`
let theTime = html`<h2>It is ${clock}.</h2>`
let render = bind(document.body)
// We call `render` once, and the clock is ticking
render`
<div>
${greeting}
${theTime}
</div>
`
npm install maik.h
like you always do and import it directly:
<script type="module">
import { bind, html } from 'node_modules/maik.h/default-maik.js'
</script>
- Maximally 3.8KB (minzipped).
- Uses ESM modules.
- Direct, native DOM manipulation. No VDOM.
- No framework, just a lib.
- Efficient for list of items.
keyed
lists builtin. - If you opt-in to use Rx, you can avoid building around a render loop.