SigPro is designed to be drop-in ready. Whether you are building a complex application with a bundler or a simple reactive widget in a single HTML file, SigPro scales with your needs.
Choose the method that best fits your workflow:
npm install sigpropnpm add sigproyarn add sigprobun add sigpro<script type="module">
// Import the core and UI components
import { $ } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
import { UI } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/ui/+esm';
// Initialize UI components globally
UI($);
</script>SigPro uses PascalCase for Tag Helpers (e.g., Div, Button) to provide a clean, component-like syntax without needing JSX.
// File: App.js
import { $ } from 'sigpro';
export const App = () => {
const $count = $(0);
// Tag Helpers like Div, H1, Button are available globally
return Div({ class: 'card p-4' }, [
H1(["Count is: ", $count]),
Button({
class: 'btn btn-primary',
onclick: () => $count(c => c + 1)
}, "Increment")
]);
};
// File: main.js
import { $ } from 'sigpro';
import { App } from './App.js';
$mount(App, '#app');<!DOCTYPE html>
<html lang="en">
<body>
<div id="app"></div>
<script type="module">
import { $ } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
const $name = $("Developer");
// No need to import Div, Section, H2, Input... they are global!
const App = () => Section({ class: 'container' }, [
H2(["Welcome, ", $name]),
Input({
type: 'text',
class: 'input input-bordered',
$value: $name, // Automatic two-way binding
placeholder: 'Type your name...'
})
]);
$mount(App, '#app');
</script>
</body>
</html>One of SigPro's core strengths is its Global API, which eliminates "Import Hell".
$ Function: Once loaded, it attaches itself to window.$. It handles state, effects, and DOM mounting.Div, Span, Button, Input, etc.) are automatically registered in the global scope.UserCard) or prefixes like _Input to keep your code organized and distinguish your logic from standard tags.Because SigPro uses native ES Modules and standard JavaScript functions to generate the DOM, you don't actually need a compiler like Babel or a transformer for JSX.
SigPro stands out by removing the "Build Step" tax and the "Virtual DOM" overhead. It is the closest you can get to writing raw HTML/JS while maintaining modern reactivity.
| Feature | SigPro | SolidJS | Svelte | React | Vue |
|---|---|---|---|---|---|
| Bundle Size | ~2KB | ~7KB | ~4KB | ~40KB+ | ~30KB |
| DOM Strategy | Direct DOM | Direct DOM | Compiled DOM | Virtual DOM | Virtual DOM |
| Reactivity | Fine-grained | Fine-grained | Compiled | Re-renders | Proxies |
| Build Step | Optional | Required | Required | Required | Optional |
| Learning Curve | Minimal | Medium | Low | High | Medium |
| Initialization | Ultra-Fast | Very Fast | Fast | Slow | Medium |
$ function are available globally to eliminate "Import Hell" and keep your code clean.SigPro isn't just another framework; it's a bridge to the native web. By using standard ES Modules and functional DOM generation, you gain the benefits of a modern library with the weight of a utility script.
Because, in the end... why fight the web when we can embrace it?
`,25)])])}const E=i(l,[["render",e]]);export{g as __pageData,E as default};