Hyperactive is a powerful set of tools to build reactive web applications.
We're currently working on a 2.0 release, which will include fully reactive client-side rendering. To try the latest version, you can get hyper:
npm install https://gethyper.dev yarn add https://gethyper.dev pnpm add https://gethyper.dev bun install https://gethyper.devHyperactive is also available on NPM.
This is not a release version, so expect some bugs.
import { renderHTML } from "@hyperactive/hyper"; import { div, p, h1, br } from "@hyperactive/hyper/elements"; assertEquals( renderHTML( section( { class: "container" }, div( img({ src: "/hero.jpg" }), h1("Hello World"), ), ), ), `<div class="container"><div><img src="/hero.jpg" /><h1>Hello World</h1></div></div>`, );
Please install @types/web to use Hyperactive in the browser. Your package manager will automatically install the correct version of @types/web for you by default. See the versions table for the correct version of @types/web for each version of Hyperactive.
bun install @types/webimport { State, renderDOM } from "@hyperactive/hyper"; import { div, p, button } from "@hyperactive/hyper/elements"; const s = new State(0); const root = document.getElementById("root"); renderDOM( root, div( p("You clicked ", s, " times"), button( { on: { click: () => s.update(s.value + 1) } }, "Increment" ), ), );