Getting Started

hyperfixi is a tree-shakeable hyperscript runtime with 43 commands,
flexible bundle sizes, and ~85% compatibility with _hyperscript.

What is hyperfixi?

hyperfixi lets you add interactivity to your HTML using a readable, event-driven syntax directly in your markup:

<button _="on click toggle .active on me">
  Toggle Active
</button>

No JavaScript files to create. No event listeners to wire up. Just declare what should happen, and it happens.

Key Features

  • 43 Commands: Complete command set for DOM manipulation, animations, control flow, async operations, and more
  • Flexible Bundles: From 5KB lite bundle to 280KB full-featured bundle
  • ~85% Compatibility: Works with most existing _hyperscript code
  • 8100+ Tests: Comprehensive test coverage
  • Tree-Shakeable: Vite plugin generates minimal bundles automatically

Quick Example

Here's a simple counter:

<button _="on click increment :count then put :count into me">
  Clicks: 0
</button>

And a more complex example with async operations:

<button _="on click
  add .loading to me then
  fetch /api/data as json then
  put result.message into #output then
  remove .loading from me">
  Load Data
</button>

Next Steps

  1. Installation - Add hyperfixi to your project
  2. Bundle Selection - Choose the right bundle size
  3. Commands - Learn the command syntax
  4. Expressions - Understand selectors and values

Installation Preview

The fastest way to try hyperfixi:

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

Or with npm:

npm install @hyperfixi/core

See the full installation guide for all options including the Vite plugin for automatic tree-shaking.

Multilingual Support

Need to write hyperscript in languages other than English? Check out LokaScript for multilingual support with 24 languages and grammar transformation.

Edit this page on GitHub