Hedystia

Appearance

Getting Started ​

@hedystia/view is a reactive UI engine that creates real DOM nodes directly — no Virtual DOM. It uses fine-grained signals for reactivity, meaning components run once and only the specific DOM nodes that depend on changed signals are updated.

Installation ​

bash
bun add @hedystia/view

TypeScript Configuration ​

Configure your tsconfig.json to use the @hedystia/view JSX runtime:

json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@hedystia/view",
    "moduleResolution": "bundler",
    "target": "esnext",
    "module": "esnext",
    "strict": true
  }
}

Your First Component ​

tsx
import { sig, mount } from "@hedystia/view";

function Counter() {
  const [count, setCount] = sig(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>
        Increment
      </button>
    </div>
  );
}

mount(Counter, document.getElementById("root")!);

Key Concepts ​

Components run once. The Counter function above executes a single time. After that, only the reactive expressions update the DOM.

  • Reactive text: Pass a signal accessor like {count} or {() => count()} as a child — the runtime creates an effect that updates the text node when the signal changes.
  • Reactive style: Use style={() => ({ color: active() ? "red" : "blue" })} — the function creates an effect that updates the element's style.
  • Static capture: {count()} read during component execution (not inside an accessor/child function) captures the value once and never updates.

Mounting ​

mount attaches a component to a DOM element and returns a ViewApp with a dispose method:

tsx
import { mount } from "@hedystia/view";

const app = mount(App, document.getElementById("root")!);

// Later, to unmount:
app.dispose();

Next Steps ​