HTM: A Zero‑Compiler JSX‑Like Syntax for JavaScript

HTM is a pure JavaScript implementation of a JSX‑like syntax that requires no compiler, allowing developers to write React/Preact code directly in the browser and compile it into production bundles using standard JavaScript template tags compatible with all modern browsers.

Project repository: https://github.com/developit/htm

Key metrics:

Direct browser usage: < 700 bytes

When used with Preact: < 500 bytes (thanks to gzip)

Using babel-plugin-htm for compilation: 0 bytes added

Syntax: JSX‑like but with enhancements:

Spread props: <div ...${props}>

Self‑closing tags: <div />

Components: <${Foo}> (where Foo is a component reference)

Boolean attributes: <div draggable />

Improvements over JSX:

Optional HTML quotes: <div class=foo>

Component closing tag syntax: <${Footer}>footer content<//>

Syntax highlighting and language support via the lit‑html VSCode extension

HTM 2.0 release highlights:

Performance increased by 20×

Bundle size reduced by ~10%

Runs everywhere, including native SSR

Syntax remains virtually identical to JSX

Cache speed improved by 20%

Better output quality

A brand‑new Babel plugin accompanies the release, offering a 1‑2 order‑of‑magnitude speed boost, removal of the JSDOM dependency, and support for custom output, while fixing numerous cache, edge‑case, and whitespace handling bugs.

New syntax? Yes, but it feels just like writing JSX. You only need to remember two things: Component usage: write <Foo> as <${Foo}> Expression interpolation: write {a} as ${a} Everything else remains the same as JSX.

Recommended reading: React v16.7 official release (no Hooks)

“UC International Technology” is dedicated to sharing high‑quality technical articles; follow their public account and share the content with friends.