Installation
Live Demos HubInstallation
Interactive Shadcn-quality hypermedia component for Hyperstack.
Interactive Preview
Installation & Quickstart
Set up the hyperreactive Hyperstack suite in your project in under 2 minutes. Zero NPM build step required.
Prerequisites
Tailwind CSS
v3 or v4 with standard design token variables
Any Backend
Go, Python, Rust, C# (.NET), PHP, Bun, Ruby, Java
Zero Node Modules
No React runtime, no JSX, no webpack/vite bundler
Step 1 — Include Core Scripts
Add HTMX 4 and the Hyperstack engines to your base HTML layout. htmx-bolt.js is the core reactive signal engine.
<!-- 1. HTMX 4 Core & Official Extensions --> <script src="https://unpkg.com/htmx.org@4.0.0/dist/htmx.min.js"></script> <script src="/vendor/hx-csp.min.js"></script> <script src="/vendor/hx-live.min.js"></script> <!-- 2. Hyperstack Core Reactive Signal Engine (~23KB) --> <script src="/htmx-bolt.js"></script> <!-- 3. Optional Micro-Engines (Load Only What You Need) --> <script src="/htmx-flash.js"></script> <!-- In-Memory Fuzzy Search & Columnar Queries --> <script src="/htmx-form.js"></script> <!-- Declarative Validation & Optimistic Rollback --> <script src="/htmx-vibe.js"></script> <!-- FLIP Layout Animations & Spring Physics --> <script src="/htmx-a11y.js"></script> <!-- WAI-ARIA Focus Trapping & 2D Matrix Tabindex --> <script src="/htmx-virtual.js"></script> <!-- 1D/2D Viewport Virtualization (100k+ rows) --> <script src="/htmx-grid.js"></script> <!-- Enterprise Data Grid with Column Drag & CSV --> <script src="/htmx-offline.js"></script> <!-- IndexedDB Mutation Queue & Auto-Sync --> <script src="/htmx-calc.js"></script> <!-- Topological Formula DAG & Cycle Detection --> <script src="/htmx-sim.js"></script> <!-- Kinetic Particle Physics & Swarm Boids --> <script src="/htmx-canvas.js"></script> <!-- Spatial Node Diagram Canvas & Wire Routing --> <script src="/htmx-devtools.js"></script> <!-- In-Browser Signal HUD & @diag Telemetry --> <script src="/appz.js"></script> <!-- 4-Layer Mobile OS & Hardware Bridge --> <script src="/hy-hook.js"></script> <!-- Hyperhooks Real-Time Webhooks & Streaming -->
Step 2 — Configure CSS Design Tokens
Hyperstack components use CSS custom properties for instant dark mode and theme switching. Add these variables to your stylesheet:
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%;
--radius: 0.5rem;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 47.4% 11.2%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
}
}
Step 3 — Reactive Grammar & Directives
Bolt provides a complete signal-based declarative grammar directly inside HTML attributes:
| Directive | Description | Example |
|---|---|---|
| hx-state | Defines local reactive component context | hx-state="{ count: 0, items: [] }" |
| hx-computed | Derived memoized properties | hx-computed="{ total: price * qty }" |
| hx-model | Two-way data binding with modifiers | hx-model.number="qty" |
| hx-for | Structural list rendering on template | <template hx-for="item in items"> |
| hx-if | Structural conditional DOM mounting | <template hx-if="user.isLoggedIn"> |
| hx-on:event | Event handlers with modifiers (.prevent, .debounce) | hx-on:click.prevent="count++" |
| hx-transition | Smooth enter/leave CSS transitions | hx-transition="fade" |
| hx-validate | Declarative input validation rules | hx-validate="required|email|min:5" |
| hy-hook | Declarative real-time webhooks & event streams | hy-hook="/api/stream" hy-action="merge" |
Step 4 — Complete Example
<!-- Reactive Shopping Cart with Signals, Computed Total, and hx-for list -->
<div hx-state='{
newItem: "",
items: [
{ id: 1, name: "Mechanical Keyboard", price: 120, qty: 1 },
{ id: 2, name: "Wireless Mouse", price: 60, qty: 2 }
]
}'
hx-computed='{
totalPrice: items.reduce((sum, i) => sum + (i.price * i.qty), 0)
}' class="p-6 border border-border rounded-xl bg-card space-y-4">
<h3 class="text-lg font-bold">Hyperreactive Shopping Cart</h3>
<!-- Two-way input binding -->
<div class="flex gap-2">
<input type="text" hx-model="newItem" placeholder="Add item name..." class="px-3 py-2 border rounded-md text-sm flex-1 bg-background">
<button hx-on:click='if(newItem.trim()) { items.push({ id: Date.now(), name: newItem, price: 40, qty: 1 }); newItem = ""; }' class="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm font-medium">Add</button>
</div>
<!-- List rendering with hx-for -->
<div class="divide-y border rounded-md overflow-hidden">
<template hx-for="(item, idx) in items">
<div class="p-3 flex items-center justify-between bg-card">
<span hx-text="item.name" class="font-medium text-sm"></span>
<div class="flex items-center gap-3">
<span class="text-sm text-muted-foreground">$<span hx-text="item.price"></span></span>
<input type="number" hx-model.number="item.qty" min="1" class="w-16 px-2 py-1 border rounded text-xs bg-background">
<button hx-on:click="items.splice(idx, 1)" class="text-destructive text-xs hover:underline">Remove</button>
</div>
</div>
</template>
</div>
<!-- Computed reactive total -->
<div class="flex justify-between items-center pt-2 font-bold text-base">
<span>Total Amount:</span>
<span class="text-primary">$<span hx-text="totalPrice">0</span></span>
</div>
</div>
HTML Source
<div class="space-y-10 max-w-4xl py-6">
<!-- Title & Subtitle -->
<div class="space-y-3">
<h1 class="text-4xl font-extrabold tracking-tight text-foreground">Installation & Quickstart</h1>
<p class="text-lg text-muted-foreground leading-relaxed font-medium">
Set up the hyperreactive Hyperstack suite in your project in under 2 minutes. Zero NPM build step required.
</p>
</div>
<!-- Section: Prerequisites -->
<div class="space-y-4">
<h2 class="text-2xl font-bold tracking-tight text-foreground border-b border-border pb-2">Prerequisites</h2>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div class="p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm">
<div class="font-semibold text-sm mb-1 text-foreground">Tailwind CSS</div>
<div class="text-xs text-muted-foreground">v3 or v4 with standard design token variables</div>
</div>
<div class="p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm">
<div class="font-semibold text-sm mb-1 text-foreground">Any Backend</div>
<div class="text-xs text-muted-foreground">Go, Python, Rust, C# (.NET), PHP, Bun, Ruby, Java</div>
</div>
<div class="p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm">
<div class="font-semibold text-sm mb-1 text-foreground">Zero Node Modules</div>
<div class="text-xs text-muted-foreground">No React runtime, no JSX, no webpack/vite bundler</div>
</div>
</div>
</div>
<!-- Section: Step 1 — Include Core Scripts -->
<div class="space-y-4">
<h2 class="text-2xl font-bold tracking-tight text-foreground border-b border-border pb-2">Step 1 — Include Core Scripts</h2>
<p class="text-sm text-muted-foreground leading-relaxed">
Add HTMX 4 and the Hyperstack engines to your base HTML layout. <code class="bg-muted px-1.5 py-0.5 rounded text-xs font-mono">htmx-bolt.js</code> is the core reactive signal engine.
</p>
<div class="bg-[#1e293b] text-[#e2e8f0] rounded-xl p-4 font-mono text-xs overflow-x-auto leading-relaxed shadow-sm">
<pre><!-- 1. HTMX 4 Core & Official Extensions -->
<script src="https://unpkg.com/htmx.org@4.0.0/dist/htmx.min.js"></script>
<script src="/vendor/hx-csp.min.js"></script>
<script src="/vendor/hx-live.min.js"></script>
<!-- 2. Hyperstack Core Reactive Signal Engine (~23KB) -->
<script src="/htmx-bolt.js"></script>
<!-- 3. Optional Micro-Engines (Load Only What You Need) -->
<script src="/htmx-flash.js"></script> <!-- In-Memory Fuzzy Search & Columnar Queries -->
<script src="/htmx-form.js"></script> <!-- Declarative Validation & Optimistic Rollback -->
<script src="/htmx-vibe.js"></script> <!-- FLIP Layout Animations & Spring Physics -->
<script src="/htmx-a11y.js"></script> <!-- WAI-ARIA Focus Trapping & 2D Matrix Tabindex -->
<script src="/htmx-virtual.js"></script> <!-- 1D/2D Viewport Virtualization (100k+ rows) -->
<script src="/htmx-grid.js"></script> <!-- Enterprise Data Grid with Column Drag & CSV -->
<script src="/htmx-offline.js"></script> <!-- IndexedDB Mutation Queue & Auto-Sync -->
<script src="/htmx-calc.js"></script> <!-- Topological Formula DAG & Cycle Detection -->
<script src="/htmx-sim.js"></script> <!-- Kinetic Particle Physics & Swarm Boids -->
<script src="/htmx-canvas.js"></script> <!-- Spatial Node Diagram Canvas & Wire Routing -->
<script src="/htmx-devtools.js"></script> <!-- In-Browser Signal HUD & @diag Telemetry -->
<script src="/appz.js"></script> <!-- 4-Layer Mobile OS & Hardware Bridge -->
<script src="/hy-hook.js"></script> <!-- Hyperhooks Real-Time Webhooks & Streaming --></pre>
</div>
</div>
<!-- Section: Step 2 — Setup Tailwind CSS Variables -->
<div class="space-y-4">
<h2 class="text-2xl font-bold tracking-tight text-foreground border-b border-border pb-2">Step 2 — Configure CSS Design Tokens</h2>
<p class="text-sm text-muted-foreground leading-relaxed">
Hyperstack components use CSS custom properties for instant dark mode and theme switching. Add these variables to your stylesheet:
</p>
<div class="bg-[#1e293b] text-[#e2e8f0] rounded-xl p-4 font-mono text-xs overflow-x-auto leading-relaxed shadow-sm">
<pre>@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%;
--radius: 0.5rem;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 47.4% 11.2%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
}
}</pre>
</div>
</div>
<!-- Section: Step 3 — Reactive Directives Cheat Sheet -->
<div class="space-y-4">
<h2 class="text-2xl font-bold tracking-tight text-foreground border-b border-border pb-2">Step 3 — Reactive Grammar & Directives</h2>
<p class="text-sm text-muted-foreground leading-relaxed">
Bolt provides a complete signal-based declarative grammar directly inside HTML attributes:
</p>
<div class="overflow-x-auto rounded-xl border border-border bg-card shadow-sm">
<table class="w-full text-left text-sm border-collapse">
<thead class="bg-muted/50 border-b border-border text-foreground font-semibold">
<tr>
<th class="py-3 px-4">Directive</th>
<th class="py-3 px-4">Description</th>
<th class="py-3 px-4">Example</th>
</tr>
</thead>
<tbody class="divide-y divide-border text-muted-foreground text-xs font-mono">
<tr class="hover:bg-muted/30">
<td class="py-2.5 px-4 text-primary font-bold">hx-state</td>
<td class="font-sans text-muted-foreground">Defines local reactive component context</td>
<td>hx-state="{ count: 0, items: [] }"</td>
</tr>
<tr class="hover:bg-muted/30">
<td class="py-2.5 px-4 text-primary font-bold">hx-computed</td>
<td class="font-sans text-muted-foreground">Derived memoized properties</td>
<td>hx-computed="{ total: price * qty }"</td>
</tr>
<tr class="hover:bg-muted/30">
<td class="py-2.5 px-4 text-primary font-bold">hx-model</td>
<td class="font-sans text-muted-foreground">Two-way data binding with modifiers</td>
<td>hx-model.number="qty"</td>
</tr>
<tr class="hover:bg-muted/30">
<td class="py-2.5 px-4 text-primary font-bold">hx-for</td>
<td class="font-sans text-muted-foreground">Structural list rendering on template</td>
<td><template hx-for="item in items"></td>
</tr>
<tr class="hover:bg-muted/30">
<td class="py-2.5 px-4 text-primary font-bold">hx-if</td>
<td class="font-sans text-muted-foreground">Structural conditional DOM mounting</td>
<td><template hx-if="user.isLoggedIn"></td>
</tr>
<tr class="hover:bg-muted/30">
<td class="py-2.5 px-4 text-primary font-bold">hx-on:event</td>
<td class="font-sans text-muted-foreground">Event handlers with modifiers (.prevent, .debounce)</td>
<td>hx-on:click.prevent="count++"</td>
</tr>
<tr class="hover:bg-muted/30">
<td class="py-2.5 px-4 text-primary font-bold">hx-transition</td>
<td class="font-sans text-muted-foreground">Smooth enter/leave CSS transitions</td>
<td>hx-transition="fade"</td>
</tr>
<tr class="hover:bg-muted/30">
<td class="py-2.5 px-4 text-primary font-bold">hx-validate</td>
<td class="font-sans text-muted-foreground">Declarative input validation rules</td>
<td>hx-validate="required|email|min:5"</td>
</tr>
<tr class="hover:bg-muted/30">
<td class="py-2.5 px-4 text-primary font-bold">hy-hook</td>
<td class="font-sans text-muted-foreground">Declarative real-time webhooks & event streams</td>
<td>hy-hook="/api/stream" hy-action="merge"</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Section: Step 4 — Complete Working Example -->
<div class="space-y-4">
<h2 class="text-2xl font-bold tracking-tight text-foreground border-b border-border pb-2">Step 4 — Complete Example</h2>
<div class="bg-[#1e293b] text-[#e2e8f0] rounded-xl p-4 font-mono text-xs overflow-x-auto leading-relaxed shadow-sm">
<pre><!-- Reactive Shopping Cart with Signals, Computed Total, and hx-for list -->
<div hx-state='{
newItem: "",
items: [
{ id: 1, name: "Mechanical Keyboard", price: 120, qty: 1 },
{ id: 2, name: "Wireless Mouse", price: 60, qty: 2 }
]
}'
hx-computed='{
totalPrice: items.reduce((sum, i) => sum + (i.price * i.qty), 0)
}' class="p-6 border border-border rounded-xl bg-card space-y-4">
<h3 class="text-lg font-bold">Hyperreactive Shopping Cart</h3>
<!-- Two-way input binding -->
<div class="flex gap-2">
<input type="text" hx-model="newItem" placeholder="Add item name..." class="px-3 py-2 border rounded-md text-sm flex-1 bg-background">
<button hx-on:click='if(newItem.trim()) { items.push({ id: Date.now(), name: newItem, price: 40, qty: 1 }); newItem = ""; }' class="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm font-medium">Add</button>
</div>
<!-- List rendering with hx-for -->
<div class="divide-y border rounded-md overflow-hidden">
<template hx-for="(item, idx) in items">
<div class="p-3 flex items-center justify-between bg-card">
<span hx-text="item.name" class="font-medium text-sm"></span>
<div class="flex items-center gap-3">
<span class="text-sm text-muted-foreground">$<span hx-text="item.price"></span></span>
<input type="number" hx-model.number="item.qty" min="1" class="w-16 px-2 py-1 border rounded text-xs bg-background">
<button hx-on:click="items.splice(idx, 1)" class="text-destructive text-xs hover:underline">Remove</button>
</div>
</div>
</template>
</div>
<!-- Computed reactive total -->
<div class="flex justify-between items-center pt-2 font-bold text-base">
<span>Total Amount:</span>
<span class="text-primary">$<span hx-text="totalPrice">0</span></span>
</div>
</div></pre>
</div>
</div>
<!-- CTA -->
<div class="pt-4 flex gap-4">
<a href="/docs/components/button" class="inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90">
Browse Components →
</a>
</div>
</div>