Sinwan A fast reactive UI library for JSX, fine-grained reactivity, SSR, and hydration.

Sinwan gives you signals, component lifecycle hooks, a direct DOM renderer, and a React-shaped JSX runtime without a virtual DOM.

Install

npm install sinwan

bun add sinwan

JSX Setup

Use the automatic JSX runtime:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "sinwan"
  }
}

Quick Start

import { createComponent, mount, signal } from "sinwan";

const Counter = createComponent(() => {
  const count = signal(0);

  return (
    <button onClick={() => (count.value += 1)}>
      Count: {count}
    </button>
  );
});

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

Features

• Fine-grained reactivity: signal, computed, effect, batch, nextTick
• JSX runtime: sinwan/jsx-runtime and sinwan/jsx-dev-runtime
• Components: createComponent, lifecycle hooks, provide/inject, <Show>, <For>
• DOM renderer: reactive text, attributes, events, refs, namespaces, and cleanup
• Server rendering: renderToString, streamPage, hydratable strings and streams
• Hydration: reuse server-rendered DOM with hydrate

SSR and Hydration

// Server
import { renderToHydratableString } from "sinwan/server";

const html = await renderToHydratableString(App, { initial: 5 });

// Client
import { hydrate } from "sinwan";

hydrate(App, document.getElementById("app")!, { initial: 5 });

Documentation

• Documentation v1
• API reference
• Changelog
• Troubleshooting

Development

bun test
bun run typecheck
bun run build

Author

Mohammed Ben Cheikh

License

MIT - see LICENSE.