BT

InfoQ Homepage News Hyperscript Tagged Markup: A JSX Alternative Based on Standard JavaScript

Hyperscript Tagged Markup: A JSX Alternative Based on Standard JavaScript

Bookmarks

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.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

  • Thanks for the mention

    by Luciano Mammino /

    Your message is awaiting moderation. Thank you for participating in the discussion.

    I am glad you found my article and example indicative on how to use HTM :)
    I might experiment with this topic even more in the future, trying to cover how to achieve universal rendering (server + client side rendering) and other similar topics

  • Re: Thanks for the mention

    by Bruno Couriol /

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Thanks for the comment! Those are indeed exciting topics to address and cover. Feel free to stay in touch! I may in the future write an article dedicated to universal rendering, and it is always nice to have good examples to illustrate the approach to our readers.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.