Hyperscript Tagged Markup: A JSX Alternative Based on Standard JavaScript

The Hyperscript Tagged Markup (HTM) library, which proposes an alternative to JSX, released its second major iteration. HTM 2.0 is a rewrite that is faster and smaller than HTM 1.x, has a syntax closer to JSX, and now supports Server-Side Rendering (SSR). With HTM 2.0, developers may enjoy simplified React/Preact workflows for modern browsers.

HTM 2.0 contributors have optimized for performance and size. The release notes explain:

HTM is now 20 times faster, 10% smaller, has 20% faster caching, runs anywhere (native SSR!). The Babel plugin got an overhaul too! It's 1-2 orders of magnitude faster, and no longer requires JSDOM (...).

HTM also ships with a prebuilt, optimized bundle of htm with preact. The library's authors explain:

The original goal for htm was to create a wrapper around Preact that felt natural for use untranspiled in the browser. I wanted to use Virtual DOM, but I wanted to eschew build tooling and use ES Modules directly.

HTM 2.0 strives to deliver a syntax closer to JSX, building on HTM's primary goal of developer-friendliness, as detailed by the library's authors.

HTM 2.0 tag template syntax mostly mirrors that of JSX. It features spread properties (<div ...${props}>), self-closing tags: (<div />), components (<${Foo}>, where Foo is a component reference), and boolean attributes (<div draggable />). HTM 2.0 syntax is also similar to alternative templating syntaxes hyperHMTL and lit-html.

Luciano Mammino, a developer who successfully used HTM for quick prototyping with Preact, comments:

I will also use htm, a library that can be easily integrated with Preact to define DOM elements in a very expressive and react-like way (like JSX), without having to use transpilers like Babel.

HTM relies on standard JavaScript's Tagged Templates, which are natively implemented in all modern browsers. With HTM (see html template tag in following example), developers can describe DOM trees in render functions, with a syntax similar to that of JSX:

  render(props, state) {
    return html`
      <div class="container mt-5">
        <div class="row justify-content-center">
          <div class="col">
            <h1>Hello from your new App</h1>
            <div>
              ${state.loading &&
                html`
                  <p> Loading time from server...</p>
                `} ${state.time &&
                html`
                  <p>⏱ Time from server: <i>${state.time}</i></p>
                `}
            </div>
            <hr />
          </div>
        </div>
      </div>
    `
  }

The HTM module must be used in connection with a HyperScript function:

import htm from 'htm';
 
function h(type, props, ...children) {
  return { type, props, children };
}
 
const html = htm.bind(h);
 
console.log( html`<h1 id=hello>Hello world!</h1>` );
// {
//   type: 'h1',
//   props: { id: 'hello' },
//   children: ['Hello world!']
// }

The HyperScript h function can be customized for server-side rendering to render HTML strings instead of virtual DOM trees. Developers can use HTM anywhere they can use JSX.

HTM 2.0 is ready for production use. HTM is available under the Apache 2.0 open source license. Contributions and feedback may be provided via the htm GitHub project.