A reactive client-side framework for building web interfaces.

⮺ HellaJS Docs

import { signal } from "@hellajs/core";
import { html, mount } from "@hellajs/dom";

// Runtime element proxies
const { div, button, h1 } = html;

function Counter() {
  // Reactive signals
  const count = signal(0);
  // Derived state
  const countClass = () => count() % 2 === 0 ? "even" : "odd";
  const countLabel = () => `Count: ${count()}`;
  
  // Render DOM Nodes
  return div(
    // Functions make element attributes and text reactive
    h1({ class: countClass },
      countLabel
    ),
    // Events are delegated to the mount element
    button({ onclick: () => count(count() + 1) },
      "Increment"
    )
  );
}

// Mount the app
mount(Counter, '#counter');

Core is the only dependency required to use HellaJS packages.

⮺ Core Docs

npm install @hellajs/core

⮺ DOM Docs

npm install @hellajs/dom

⮺ Resource Docs

npm install @hellajs/resource

⮺ Router Docs

npm install @hellajs/router

⮺ Store Docs

npm install @hellajs/store

HellaJS is designed to be comprehensive, lightweight, and simple. Inspiration for the reactive API comes from Angular, while SolidJS influences the functional approach and granular DOM updates. It's tree-shakeable with zero dependencies and produces small bundles. HellaJS should be compatible with any bundler, but there's no need for a compiler or any other build step.

Create powerful state using reactive functions like signal, computed, effect, store, and resource. Reactivity is highly composable and works well for basic or complex state management.

Build templates using proxy html elements. Use the spread operator to define attributes and child nodes. Handle lists with forEach and conditional logic as if/else / switch with show.

There's no virtual DOM and mount is a one-time render. Updates are triggered only for the parts of the DOM that depend on the changed state, minimizing unnecessary re-renders.

HellaJS supports a variety of modern workflows out of the box. Use it as a comprehensive standalone client-side framework with router, or with server-side rendering (SSR) frameworks like Astro to add reactive islands with no plugin or extra configuration steps required.

For best performance, serve hella.esm.min.js.gz from your server or CDN.

npm install @hellajs/core

CommonJS

const { html } = require("@hellajs/core");

ES Modules / TypeScript

import { html } from "@hellajs/core";

Import directly from a server or CDN:

Single File

<!-- Unminified -->
<script type="module" src="https://.../hella.esm.js"></script>
<!-- Minified -->
<script type="module" src="https://.../hella.esm.min.js"></script>

Per-Module

// Unminified
import { html } from "https://.../esm/html.js";
// Minified
import { html } from "https://.../esm-min/html.js";

⮺ HellaJS Docs