hyperf

Fast & tiny elements / fragments builder with reactivity support.

const el = h`<div foo=${foo}>${bar}</div>`

Create an element (or document fragment) via tagged literal (html syntax support via xhtm). Fields support reactive values, like Promise, AsyncIterable, Observable, Signal etc., see sube.

import h from './hyperf.js'
import { signal } from '@preact/signals'

const text = signal('foo')

const a = h`<a>${ text }</a>`
// <a>foo</a>

text.value = 'bar'
// <a>bar</a>

const frag = h`<x ...${{x: 1}}>1</x><y>2</y>`

a.append(frag)
// <a><x x="1">1</x><y>2</y></a>

text = null // cleanup refs/observables

const el = h(tag, attrs, ...content)

Hyperscript syntax support. To enable JSX just provide a directive for your builder (webpack or esbuild):

import h from 'hyperf' /* jsx h */

const a1 = <a>...</a>
const a2 = <a>Content: { value }</a>

document.querySelector('#container').append(a1, a2)

Refs / alternatives

lit-html, htm, htl, hyperscript, incremental-dom, snabbdom, nanomorph, uhtml, uele, bruh, document-persistent-fragment, doma, mini-jsx and others.