Bundle Selection

Since 4.0, hyperfixi ships one prebuilt bundle: the engine, with every command. For anything smaller, the Vite plugin builds a bundle of only the commands your source uses. The figures below are measured from the installed @hyperfixi/core@7.5.1 build (raw and gzipped).

The Bundle

hyperfixi.js (96 KB / 34.0 KB gzipped)

All 53 commands, in upstream _hyperscript's grammar. It installs itself as window._hyperscript (and window.hyperfixi, the same object) and processes the page when it loads. It is @hyperfixi/engine's hyperfixi-hs.js, published under core's name.

<script src="https://unpkg.com/@hyperfixi/core/dist/hyperfixi.js"></script>

Tree-Shaking with Vite

Instead of the fixed bundle, the Vite plugin scans your source files and builds an engine that registers only the commands you actually use. This is the recommended approach for production builds.

npm install @hyperfixi/core @hyperfixi/vite-plugin

See the Vite Plugin guide for setup instructions.

Hypermedia Attributes

hyperfixi is hyperscript only. For hx-get / fx-action style attributes, load fixi or htmx 4 beside it; hyperscript then handles the behavior around the requests.

<script src="https://unpkg.com/@hyperfixi/core/dist/hyperfixi.js"></script>
<script src="https://unpkg.com/fixi-js"></script>

Nothing else to configure. The engine runs the hyperscript in content htmx (2 or 4) or fixi swaps in, and hands htmx the content a script puts in, so an hx-get that put inserts issues its request. This is upstream _hyperscript's htmx integration; fixi's is the engine's own addition. Load htmx with a plain or defer script tag (not async): the engine looks for it once, when it has processed the page.

On htmx 4 the engine also registers upstream's hs-include extension, which sends element-scoped variables with a request:

<script>htmx.config.extensions = 'hs-include'</script>

<form hx-post="/save" hs-include=":draftId" _="init set :draftId to 42">
  <input name="title">
</form>

hs-include takes :name (this element's variable), ^name (the nearest ancestor that has it), #id:name (another element's), a comma-separated list of those, or * (all of this element's). hs-include:inherited on a container applies to every request inside it.

Other Languages

Hyperscript written in any of 24 languages runs on this same bundle through @lokascript/hyperscript-adapter, which translates each script as the engine reads it. See the LokaScript docs for the per-language builds.

Retired Bundles

4.0 retired the 3.x bundles. What each became:

Next Steps

• Vite Plugin — Automatic tree-shaking for production
• Installation — All installation options
• Cookbook — Practical examples