Introduction

Flexium is a fine-grained reactive UI framework. State changes are tracked via signals; only the DOM nodes that depend on a signal re-render when it updates. There's no virtual DOM, no reconciliation pass, no component re-runs.

Mental model

const [count, setCount] = use(0)

// `count` is a value (not a getter call).
// The text node `<span>{count}</span>` registers as a dependency.
// When setCount fires, only that text node is updated.

This is similar to SolidJS or Preact Signals, but with a React-style hooks API so the mental model maps directly from React.

What's in the box

Module	What it provides
flexium/core	Signals (use, createSignal, createComputed, createEffect), Context, Useable
flexium/dom	JSX runtime (f), render, Suspense, ErrorBoundary, Portal, lazy
flexium/router	Client-side router (Routes, Route, Outlet, Link, useRouter)
flexium/css	Atomic CSS-in-JS with build-time extraction
flexium/jsx-runtime	Standard JSX runtime — works with Vite/esbuild/Webpack out of the box

Why Flexium

• 13ns hook overhead when compiled with vite-plugin-flexium's compile-time pass. 550ns runtime fallback.
• 12 KB gzipped base bundle. Tree-shakeable.
• Hooks API — use(), useEffect, useRef shape. Migrate from React with familiar mental model.
• TypeScript first — full type inference across signals, props, JSX.
• Cross-platform — Web DOM, Canvas, and SSR from a unified primitives layer.

When to choose Flexium

• You want signal-based reactivity but prefer the hooks mental model.
• You care about bundle size (sub-20KB matters).
• You're building a single-page app or hybrid SSR/client app where signal-driven updates outshine virtual DOM diffing.
• You want compile-time optimizations without giving up the React-style ergonomics.

When to choose something else

• You need React ecosystem libraries (next-auth, AI SDK, etc.). These assume React internals.
• Your team is fully invested in RSC and Next.js App Router.
• You need wide third-party component library support (MUI, Chakra, etc.).

Next

→ Installation — scaffold a new project or add to an existing one.