Skip to content
/ sinho Public

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

License

Notifications You must be signed in to change notification settings

yishn/sinho

Repository files navigation

🚥 Sinho

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

  • 🌌 Web standards with custom HTML elements
  • ⚛️ React-like API
  • ✒️ Declarative templating with JSX (no additional parsing)
  • 🚥 Fine-grained reactivity with signals
  • 🛟 Type-safe components with TypeScript
  • 🪶 Lightweight (~4KB minified and compressed)
import { Component, useSignal, defineComponents } 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>
      </>
    );
  }
}

defineComponents(Counter);