SigPro ⚛️

The Atomic Reactivity Engine for the Modern Web.

SigPro is an ultra-lightweight rendering engine designed for extreme performance. By eliminating the Virtual DOM and heavy compilers, it achieves surgical reactivity in less than 2KB.

Explore the Docs → | View on GitHub

---

Why SigPro?

While other frameworks "guess" what changed by comparing massive DOM trees (Diffing), SigPro already knows.

• 🎯 Atomic Precision: Powered by a Signal-based architecture. State is bound directly to DOM nodes—when a value changes, only that specific node updates.
• 🚀 Zero-Hydration Bottlenecks: No 100KB bundles or complex build steps. SigPro is pure, optimized JavaScript tailored for the browser's native engine.
• 🍦 Pure Vanilla JS Performance: High-octane performance without the need for transpilers or heavy transformations. It runs natively in the browser just as well as it does in complex build pipelines.
• 🛠️ Build-Tool Agnostic: Total freedom. Use it with Vite, Webpack, or Rollup for enterprise projects, or simply import it via a <script> tag for rapid prototyping. No tooling required.
• 🚀 Vite-Powered DX: First-class Vite support with file-based routing out of the box. The official sigpro/vite plugin automatically scans your src/pages directory and generates reactive routes—no manual route configuration needed.
• 📈 Zero-Scale Bloat: Unlike other frameworks where the bundle grows exponentially, SigPro's footprint remains flat and predictable. You only pay for the code you write.
• 💎 Premium DX (Developer Experience): Forget boilerplate imports. SigPro injects an elegant, functional syntax (Div(), Button(), Span()) directly into your scope for a "Zero-Import" workflow.
• 📦 Fully Loaded: Built-in Hash Routing, native localStorage persistence, and automatic lifecycle management (cleanups) included in less than 2KB.
• 🌳 Tree-Shakable: Optimized for modern bundlers. Import only what you use, or load the full engine for rapid prototyping.

---

Elegance in Action

Create reactive, persistent components with a syntax that feels like Vanilla JS, but works like magic:

<div id="app"></div>

const Counter = () => {
  // Simple signal
  const value = $(100);
  // One-line persistence: state survives page reloads automatically
  const count = $(0, "user-counter-pref");
  // Computed: automatically updated when count() or value() changes
  const doubleValue = $(()=> value() * count());

  // Create fast HTML with pure JS
  return Div({ class: "card" }, [
    H1(`Count: ${count()}, Reference: ${value()}, Double x Ref: ${doubleValue()}`),
    P("Atomic updates. Zero re-renders of the parent tree."),
    Button({ onclick: () => count(c => c + 1)}, "Increment +1")
  ]);
};

$mount(Counter, "#app");

---

Performance Without Compromise

Feature	SigPro	React / Vue	Svelte
Payload (Gzipped)	< 1.8KB	~30KB - 50KB	~5KB (Compiled Runtime)
State Logic	Atomic Signals	Virtual DOM Diffing	Compiler Dirty Bits
Update Speed	Direct Node Access	Component Re-render	Block Reconciliation
Native Persistence	Included ($)	Requires Plugins	Manual
Dependencies	Zero	Many	Build Toolchain
Lifecycle Mgmt	Automatic (Cleanup Root)	Manual / Hook-based	Manual / Hook-based
Routing	Reactive Hash ($router) + File-based (Vite)	Virtual Router (External)	File-based / External
Learning Curve	Zero (Vanilla JS)	Steep (JSX/Templates)	Medium (Directives)

---

Scalable Architecture with Vite

SigPro scales from micro-widgets to full enterprise dashboards. With the official Vite plugin, routing becomes effortless:

src/
├── 📂 pages/              # File-based routing (auto-scanned)
│   ├── index.js           # → /
│   ├── about.js           # → /about
│   ├── blog/
│   │   ├── index.js       # → /blog
│   │   └── [slug].js      # → /blog/:slug
│   └── docs/
│       └── [...all].js    # → /docs/*
├── 📂 components/         # Reusable components
└── 📄 main.js             # App Entry & Mounting

Vite Plugin Setup:

// vite.config.js
import { defineConfig } from 'vite';
import { sigproRouter } from 'sigpro/vite';

export default defineConfig({
  plugins: [sigproRouter()]
});

The plugin automatically:

• Scans your src/pages directory recursively
• Generates route definitions from file paths
• Supports dynamic segments ([param]) and catch-all routes ([...param])
• Provides automatic 404 fallback
• Enables lazy-loading out of the box

---

Quick Start

npm install sigpro

With Vite (Recommended for larger apps):

npm create vite@latest my-app -- --template vanilla
cd my-app
npm install sigpro

Or without build tools:

<script src="https://unpkg.com/sigpro"></script>

---

License

MIT © 2026 SigPro Team. Engineered for speed, designed for clarity, built for the modern web.