HellaJS Overview

HellaJS is a collection of simple packages for building fast and lightweight user interfaces. It’s designed to be modular, so you can choose the parts you need. The core package provides reactivity and additional packages can be used for routing, state management, and more.

const Counter = () => {
  const count = signal(0);

  return (
    <button onclick={() => count(count() + 1)}>{count}</button>
  );
};

mount(Counter, "#counter");

Disclaimer

HellaJS is experimental and not yet ready for production use. The API is subject to change, and there are no guarantees of stability. Use at your own risk!

Philosophy

• Quick: Comparable speed to the most popular frameworks.
• Lightweight: Tiny bundles due to its modular architecture.
• Efficient: Low memory consumption and fast first paint.
• Simple: Familiar and friendly developer experience.
• Composable: Largely unopinionated and easily extendable.
• Tested: Over 145 tests and 95%+ test coverage.
• Documented: Clear and concise documentation with examples.

Core Concepts

The development experience with JSX is familiar to anyone coming from React or Solid, but it’s less opinionated and requires no compiler if you use html proxy elements.

The core concepts are reactivity and granular DOM updates. mount is a one-time operation, and elements only react when their text content or an attribute is a signal or derived function.

Instead of a virtual DOM, HellaJS uses a lightweight node registry, and components are automatically cleaned up after they are removed from the DOM.

Packages

core

dom

css

resource

router

store

What’s Next?

Check out the Quick Start guide or Todo Tutorial. You’ll learn how to set up your project, create components, and manage state. If you’re looking for more advanced topics, see the concept pages, they cover the core ideas behind HellaJS, including reactivity, templating, and more.