SigPro ⚡
The Ultra-Lightweight, Reactive Plugin-Based Framework.
SigPro 2 is a modern, minimalist JavaScript framework designed for developers who want the power of reactivity without the overhead of heavy runtimes. It weighs less than 4KB, uses a signal-based architecture, and is fully extensible through a modular plugin system.
🚀 Key Features
- Nano-Sized: Optimized for speed and minimal bundle impact.
- Signal-Based Reactivity: Surgical DOM updates—only what changes is re-rendered.
- Plugin Ecosystem: Modular by design. Only load what you need (Router, Fetch, Storage, etc.).
- File-Based Routing: Automated route generation via Vite.
- Zero Boilerplate: No complex build steps or proprietary syntax. Just JavaScript.
📦 Installation
Install the core engine and the essential plugins.
::: code-group
npm install sigpro
bun add sigpro
:::
🛠️ Quick Start
1. Configure Vite
Add the automatic router to your vite.config.js.
import { defineConfig } from 'vite';
import { sigproRouter } from 'sigpro/vite';
export default defineConfig({
plugins: [sigproRouter()]
});
2. Initialize the App
Register plugins and mount your application shell.
// src/main.js
import { $ } from 'sigpro';
import { Router, Fetch, UI } from 'sigpro/plugins';
$.plugin([Router, Fetch, UI]).then(() => {
import('./App.js').then(app => $.mount(app.default, '#app'));
});
🧩 Official Plugins
SigPro is powered by a "Pay-only-for-what-you-use" architecture.
🚦 Router (_router)
Automated file-based routing. Just create a file in src/pages/ and it becomes a route.
import { routes } from 'virtual:sigpro-routes';
const App = () => main(_router(routes));
📡 Fetch (_fetch)
Reactive data fetching with built-in loading and error states.
const { $data, $loading } = _fetch('https://api.example.com/data');
💾 Storage (_storage)
Automatic synchronization between Signals and localStorage.
const $theme = _storage($('light'), 'app_theme');
🐞 Debug (_debug)
Beautifully formatted console logs for tracking state changes in real-time.
_debug($mySignal, "User Profile");
📂 Project Structure
A typical SigPro project follows this clean convention:
my-app/
├── src/
│ ├── pages/ # Automatic Routes
│ │ ├── index.js # -> #/
│ │ └── about.js # -> #/about
│ ├── plugins/ # Custom Plugins
│ ├── App.js # Main Layout
│ └── main.js # Entry Point
├── vite.config.js
└── package.json
🎨 Example Component
SigPro uses standard JavaScript functions and a clean, declarative syntax.
export default () => {
const $count = $(0); // Create a Signal
return div({ class: 'p-8 text-center' }, [
h1("Hello SigPro!"),
p(`Current count is: ${$count()}`),
_button({
onclick: () => $count(c => c + 1),
class: 'btn-primary'
}, "Increment")
]);
};
📖 Documentation
Since SigPro is self-hosting its own documentation, you can view the live interactive guides at:
https://your-gitea-pages-url.com/
📄 License
MIT © 2026 SigPro Team.