xhtm

Extensible HTM

Usage no npm install needed!

<script type="module">
  import xhtm from 'https://cdn.skypack.dev/xhtm';
</script>

README

XHTM − eXtended HTM Tagged Markup

travis size version stability

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

Originally that was just state of art HTML parser implementation ( ~60LOC, best from 10 variants in R&D branches), but turned out it has ideal qualities for spect/h (tiny size, no cache, HTML support, extensibility).

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.
  • No integrations exported, no babel compilers.
  • No cache.

Installation & Usage

NPM

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.

🕉️