Commit c8d1b66

The syntax is inspired by [lit-html], but includes features familiar to anyone who works with JSX:

import htm from 'https://unpkg.com/htm?module'

import { html, render } from 'https://unpkg.com/htm/preact?module'

Since `htm` is a generic library, we need to tell it what to "compile" our templates to.

The target should be a function of the form `h(tag, props, ...children)`, and can return anything.

function h(tag, props, ...children) {

return { tag, props, children };

}

To use that `h()` function, we need to create our own `html` tag function by binding `htm` to our `h()` function:

import htm from 'htm';

const html = htm.bind(h);

Now we have an `html()` template tag that can be used to produce objects in the format we created above.

Here's the whole thing for clarity:

import htm from 'htm';

function h(tag, props, ...children) {

return { tag, props, children };

}

const html = htm.bind(h);

console.log( html`<h1 id=hello>Hello world!</h1>` );

Curious to see what it all looks like? Here's a working app!

It's a single HTML file, and there's no build or tooling. You can edit it with nano.

Notice there's only one import - here we're using the prebuilt Preact integration since it's easier to import and a little bit smaller.

The same example works fine without the prebuilt version, just using two imports:

import { h, Component, render } from 'preact';

import htm from 'htm';

const html = htm.bind(h);

render(html`<${App} page="To-Do's" />`, document.body);

Since `htm` is designed to meet the same need as JSX, you can use it anywhere you'd use JSX.

**Generate HTML using [vhtml]:**

import htm from 'htm';

import vhtml from 'vhtml';

const html = htm.bind(vhtml);

console.log( html`<h1 id=hello>Hello world!</h1>` );

**Webpack configuration via [jsxobj]:** ([details here](https://webpack.js.org/configuration/configuration-languages/#babel-and-jsx))

import htm from 'htm';

import jsxobj from 'jsxobj';

const html = htm.bind(jsxobj);

console.log(html`

`);

[lit-html]: https://github.com/Polymer/lit-html

[vhtml]: https://github.com/developit/vhtml

[jsxobj]: https://github.com/developit/jsxobj