JSX Alternative HTM 3.0 Released, with Static Subtree Caching and TypeScript Support

The Hyperscript Tagged Markup (HTM) library, which proposes an under-1KB, transpiler-free alternative to JSX, released its third major iteration. HTM 3.0 now optimizes template rendering by automatically detecting and caching static sections of a template. HTM 3.0 also provides TypeScript typing files, and contains documentation updates.

HTM 3.0 can now detect and cache static nodes. A node is considered static by HTM if it has no dynamic parts; this occurs when the node or the node’s children do not depend on any values passed through the template string. The release note provides the following example:

html`
 <div>
   <p class="a">
     This is a <em>static</em> subtree.
   </p>
   <p class="b">
     This is ${"not"}.
   </p>
 </div>
`;

In that example, the subtree rooted at <p class="a"> is considered static by HTM, while the subtree rooted at <p class="b"> is not. The release note explains:

When the template is evaluated for the first time HTM caches the <p class="a"> subtree created by the hfunction and reuses that value on subsequent evaluations.

Static subtree caching enables UI libraries to skip rendering referentially-equal nodes, possibly increasing rendering performance. Jason Miller, HTM and Preact’s maintainer, hinted on Twitter at some performance gains also when server-rendering:

It will reduce memory consumption and render time for static subtrees, same as on the client.

The difference in rendering performance can be observed from the following demo:

The demo shows that the initial render takes considerably more time than subsequent ones. While similar optimizations may exist for specific UI libraries, HTM 3 enables them for any library (like React, Preact, or lit-html) which exposes an hyperscript function h of the shape (type, props, ...children) => X. In fact, HTM 3 can be used with the bare-bones rendering technique consisting in updating innerHTML.

Joachim Viide commented on Twitter:

HTM’s caching is like https://babeljs.io/docs/en/babel-plugin-transform-react-constant-elements…, though a bit less smart but done fully at runtime. In both cases (React+plugin and React+HTM) static VDOM node objects get recycled between renders, and React can use that info (“old_vnode === new_vnode”) to short-circuit diffing.

HTM also ships with a prebuilt, optimized bundle of HTM with Preact. The optimized bundle for the new HTM 3.0 now ships with the Preact X version, which includes hooks. HTM 3 also adds typing files for HTM and documentation updates.

Previous version HTM 2 brought improvements in size and speed, enabled server-rendering and adopted a syntax closer to JSX. With static subtree caching, HTM 3 remains lean with a bundle size around 700 bytes.

Developers can use HTM anywhere they can use JSX. HTM is available under the Apache 2.0 open source license. Miscellaneous demos and examples are available in the HTM GitHub project. Contributions and feedback may also be provided via the HTM GitHub project.