# Installation & Setup 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. ## 1. Installation Choose the method that best fits your workflow:
```bash npm install sigpro or bun add sigpro ```
```html ```
--- ## 2. Quick Start Examples SigPro uses **lowercase** Tag Helpers (e.g., `div`, `button`) to keep the syntax close to raw HTML, while still being pure JavaScript functions.
```javascript // App.js – Use named imports for the core, activate helpers if needed import { $, mount } from "sigpro"; const App = () => { const count = $(0); return div({ class: "card p-4" }, [ h1(() => `Count is: ${count()}`), button( { class: "btn btn-primary", onclick: () => count(count() + 1) }, "Increment", ), ]); }; mount(App, "#app"); ```
```html
```
--- ## 3. Why no build step? 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. - **Development:** Just save and refresh. Pure JS, no "transpilation" required. - **Performance:** Extremely lightweight. Use any modern bundler (Vite, esbuild) only when you are ready to minify and tree-shake for production. ## 4. Key Advantages - **Extreme Performance**: No Virtual DOM reconciliation. SigPro updates the specific node or attribute instantly when a signal changes. - **Fine-Grained Reactivity**: State changes only trigger updates where the data is actually used, not on the entire component. - **Native Web Standards**: Everything is a standard JS function. No custom template syntax to learn. - **Zero Magic**: No hidden compilers. What you write is what runs in the browser. - **Global by Design** (with control): Tag helpers and core functions can be globally available (IIFE) or imported on demand (ESM) – you choose. --- ## 5. Summary SigPro isn't just another framework; it's a bridge to the native web. By using standard ES Modules and functional DOM generation, you get the benefits of a modern reactive library with the weight of a utility script. **Because, in the end... why fight the web when we can embrace it?**