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

Why Sinwan?

Sinwan combines the developer experience of React's JSX with the performance of fine-grained reactivity — no virtual DOM diffing, no reconciliation overhead. Signals drive surgical DOM updates directly.

• No virtual DOM — components return plain element trees; the renderer patches the DOM at the exact node that changed.
• Fine-grained reactivity — signal, computed, and effect track dependencies automatically. Only the effects that read a changed signal re-run.
• React-compatible JSX — use the same JSX syntax, component props, and TypeScript types you already know. jsxImportSource: "sinwan" and you're done.
• SSR + hydration — renderToString / streamPage on the server, hydrate on the client. Hydratable strings and streaming supported.
• Single dependency — only csstype at runtime. No React, no Solid, no Vue.

Install

npm install sinwan

bun add sinwan

JSX Setup

Use the automatic JSX runtime:

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

Quick Start

import { cc } from "sinwan/component";
import { signal } from "sinwan/reactivity";
import { mount } from "sinwan/renderer";

const Counter = cc(() => {
  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, untrack, on, observable
• JSX runtime: sinwan/jsx-runtime and sinwan/jsx-dev-runtime
• Components: cc, 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/react";

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

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

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

Documentation

• Documentation v1

Development

bun test
bun run typecheck
bun run build

Author

Mohammed Ben Cheikh

License

MIT - see LICENSE.