Harmless

GitHub | NPM | API doc

A minimalistic reactive web frontend framework written in TypeScript.

Features

• Fine-grained reactive DOM updates via promises, observables and signals using a framework-independent signal implementation.
• Based on standard JSX using the automatic runtime (aka react-jsx mode), so no special transpiler plugin needed.
• Supports dependency injection via a framework-independent DI implementation.
• Supports native HTML, SVG and MathML elements with reactive properties, attributes and styles.
• Provides built-in components for flow control, like If, Choose and Route.
• Provides keyed list rendering with For.
• Easily testable with any testing framework.
• It's just a library without any build system requirements. Use whatever you like.
• No dependency nightmare. The only dependencies are four companion packages for DI, observables, signals and scopes.

Some features are intentionally missing to keep Harmless small, focused and... well... harmless:

• No server rendering. Harmless is a client-only library.
• No API for creating Web Components. Harmless components are not custom elements, but Harmless can be used to render their content.
• No CLI tools. Harmless is just a library and doesn't dictate how to structure your project or how to work with it.

Quick Start

Install Harmless in your application:

npm install @kayahr/harmless

Configure TypeScript's automatic JSX runtime:

{
    "compilerOptions": {
        "jsx": "react-jsx",
        "jsxImportSource": "@kayahr/harmless",
        "lib": [ "ES2022", "DOM", "ESNext.Disposable" ]
    }
}

Then render a component and append the returned DOM node:

import { render } from "@kayahr/harmless";
import { createSignal } from "@kayahr/signal";

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

    return <button on:click={() => setCount(value => value + 1)}>
        Clicks: {count}
    </button>;
}

document.body.append(render(<Counter />));

See the documentation for more details.