XHTM − eXtended HTM Tagged Markup

XHTM is alternative implementation of HTM without HTM-specific limitations. Low-level machinery is rejected in favor of readability and better HTML support.

Differences from HTM

• Self-closing tags support htm`<input><br>` → [h('input'), h('br')].
• HTML directives <!doctype>, <?xml?> etc. support #91.
• Optionally closed tags support <p>foo<p>bar → <p>foo</p><p>bar</p> #91.
• Interpolated props are exposed as arrays html`<a class="a ${b} c"/>` → h('a', { class: ['a ', b, ' c'] }).
• Calculated tag names #109 support.
• Ignoring null-like arguments (customizable) #129.
• Spaces formatting closer to HTML; elements with preserved formatting (#23).
• No integrations exported, no babel compilers.
• No cache.

Installation & Usage

xhtm is by default fully compatible with htm and can be used as drop-in replacement.

import htm from 'xhtm'
import { render, h } from 'preact'

html = htm.bind(h)

render(html`
  <h1>Hello World!</h1>
  <p>Some paragraph<br>
  <p>Another paragraph
`, document.getElementById('app'))

For htm manual, refer to htm docs.

Justification

Generally HTM is a better choice, since it has better performance and enables caching.
But if your app doesn't render components frequently or you need HTML support, then XHTM can be a good choice.
Originally that was just minimal HTML parser implementation (~60LOC), best from 10 variants in R&D branches.

🕉️