Hyperion

Signal-based UI framework with fine-grained reactivity and zero virtual DOM overhead.

Features

• Fine-grained Reactivity — Signals update only the DOM nodes that depend on them
• Zero Virtual DOM — Direct DOM manipulation for maximum performance
• Component Model — Functions wrapped with component() run once
• Lifecycle Hooks — onMount(), onCleanup(), effect()
• Server-side Rendering — Native SSR support with hydrate()
• TypeScript-first — Full type safety with JSX support
• Enterprise Hooks — Built-in support for enterprise patterns (table, upload, notifications, etc.)

Installation

npm i @hyperpackai/hyperion

Quick Start

import { createApp, component, signal } from "@hyperpackai/hyperion";

const count = signal(0);

const App = component(() => (
  <button onClick={() => count.value++}>
    Count: {count}
  </button>
));

createApp(App).mount("#root");

Usage

Signals

const count = signal(0);
const doubled = computed(() => count.value * 2);

effect(() => console.log("Count:", count.value));

Components

const Counter = component(() => (
  <div>
    <p>Count: {count}</p>
    <button onClick={() => count.value++}>+</button>
  </div>
));

Lifecycle

const App = component(() => {
  onMount(() => console.log("Mounted"));
  onCleanup(() => console.log("Cleaning up"));
  
  return <div>Hello</div>;
});

Documentation

• Hyperion Docs
• API Reference
• Signals Guide

Examples

See create-hyperpack templates for full examples.

License

MIT