`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?

After years of building within closed ecosystems like React, Vue, or Svelte—spending countless hours mastering their internal rules and extra development time on abstractions—we must face an inevitable truth: all those complex "wrappers" must ultimately be translated back into Pure JavaScript for the browser to understand.

That extra development time and the cognitive load of "learning the framework" instead of "learning the language" is exactly what SigPro eliminates. If the final destination is always JS, why not use a Pure JS-based system that drastically simplifies coding with a readable, vanilla, and remarkably fast architecture?

🎯 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.

⚡ Real-World Benchmarks

SigPro isn't just "fast on paper." In the industry-standard JS Framework Benchmark, it consistently outperforms the most popular libraries by operating at near-native speeds with almost zero memory overhead.

🚀 Execution Speed (CPU)

Lower is better. Measured in milliseconds (ms).

Benchmark Test	SigPro	SolidJS	Vue 3	React 18
Surgical Update (10th row)	46.8ms	~48ms	~75ms	~158ms
Direct Selection (on click)	17.5ms	~18ms	~32ms	~65ms
Initial Render (1k rows)	~35ms	~32ms	~45ms	~70ms

🧠 Memory Footprint

Lower is better. Measured in Megabytes (MB) after 1k rows.

Metric	SigPro	Vanilla JS	Svelte	React
Ready Memory (Idle)	1.05 MB	1.01 MB	~2.8 MB	~10.4 MB
Run Memory (1k rows)	4.90 MB	4.25 MB	~10.2 MB	~28.5 MB

The Verdict: SigPro delivers Vanilla-like memory consumption while maintaining Surgical reactivity that rivals (and often beats) SolidJS in granular updates.

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>

7.4 KiB Raw Blame History

SigPro ⚛️