Skip to main content

Sinho

A lightweight signal-based library for building web components with a React-like API.

DocumentationAPI
  • 🌌 Web standards with custom HTML elements
  • ⚛ī¸ React-like API
  • ✒ī¸ Declarative templating with JSX (no additional parsing)
  • đŸšĨ Fine-grained reactivity with signals
  • 🛟 Type-safe components out of the box with TypeScript
  • đŸĒļ Lightweight (~4KB minified and compressed)
import { Component, useSignal } from "sinho";

class Counter extends Component("x-counter") {
  render() {
    const [value, setValue] = useSignal(0);

    return (
      <>
        <p>Counter: {value}</p>
        <p>
          <button onclick={() => setValue((n) => n + 1)}>Increment</button>{" "}
          <button onclick={() => setValue((n) => n - 1)}>Decrement</button>
        </p>
      </>
    );
  }
}