Skip to content
BranchesTags

Latest commit

 

History

3,619 Commits

Folders and files

NameName
Last commit message
Last commit date
.github/workflows
.github/workflows
 
 
benchmarks
benchmarks
 
 
dist
dist
 
 
docs
docs
 
 
e2e
e2e
 
 
extension
extension
 
 
go
go
 
 
public
public
 
 
releases
releases
 
 
schema
schema
 
 
scripts
scripts
 
 
skills/htmxui
skills/htmxui
 
 
src
src
 
 
test-results
test-results
 
 
tests
tests
 
 
views
views
 
 
.gitignore
.gitignore
 
 
CHANGELOG.md
CHANGELOG.md
 
 
CHECKSUMS.sha256
CHECKSUMS.sha256
 
 
README.md
README.md
 
 
SECURITY.md
SECURITY.md
 
 
bun.lock
bun.lock
 
 
bunfig.toml
bunfig.toml
 
 
demos.ts
demos.ts
 
 
hmlr.mx
hmlr.mx
 
 
htmfx.mx
htmfx.mx
 
 
llms.txt
llms.txt
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
playwright.config.ts
playwright.config.ts
 
 
postcss.config.js
postcss.config.js
 
 
scope.mx
scope.mx
 
 
server.go
server.go
 
 
server.ts
server.ts
 
 
tailwind.config.js
tailwind.config.js
 
 
worker.ts
worker.ts
 
 
wrangler.toml
wrangler.toml
 
 

Repository files navigation

HTMXUI — The Hypermedia Platform for Go, Rust, Python & .NET

A hyperreactive, lean, hypermedia-first frontend platform built for backend engineers and AI agent swarms.

Zero Virtual DOM. Zero Hydration Mismatches. Zero Node/NPM build step required. Server remains the single source of truth.

CI Status Release Cloudflare Deployment License Checksums

⚡ Live Demos on Cloudflare  •  📖 Documentation  •  👥 About Us  •  ⭐ GitHub

Important

📢 The Modern Web Without JavaScript Fatigue

Skip Complex JS. Avoid Node.js Bloat. Build with HTMXUI.
The web was meant to be simple. While single-page apps (SPAs) introduced 500MB node_modules, fragile build steps, and hydration mismatches, HTMXUI delivers a hyperreactive, zero-build platform that puts power back into your backend.

Whether you write Python, Go, C# (.NET), Rust, PHP, or Java, HTMXUI lets you build high-performance, interactive user interfaces directly from your server with zero client-side glue code.

🗺️ Upcoming Strategic Milestones & Platform Roadmap

  1. ⚡ Declarative Concurrency & Zero-JS Event Pipelines:

    • Hyperreactive Streaming: Connect UI elements, background workers, and live server feeds with zero custom JavaScript glue code.
    • Typed DOM Contracts: Built-in state validation and structured schemas directly within HTML attributes.
    • Multiplexed Message Routing: Seamlessly handle multiple live data feeds, user inputs, and local state mutations simultaneously with sub-millisecond response times.

  2. 📦 Universal Single-Binary & Zero-Build Backend Kits:

    • Write in Your Language of Choice: First-class, pre-built component catalogs (120+ widgets) for Python (FastAPI/Django), Go, C# (.NET), Rust, and PHP.
    • Zero-Dependency Deployments: Ship entire production web apps as single static executables or lightweight micro-containers with zero external npm dependencies.

  3. 📱 hx-zap — Mobile-First, Touch & Offline Micro-Engine:

    • Sub-4KB Native-Feel Mobile Runtime: Fluid touch gestures, inertia swipes, pull-to-refresh, and local offline caching for mobile WebViews, POS terminals, and IoT dashboards.

  4. 🖥️ Native Desktop & Embedded via Tauri 2.0 (Tokio Core):

    • The Anti-Electron Desktop Stack: Cross-platform desktop & mobile distribution (macOS, Windows, Linux, iOS, Android).
    • Under 5MB Binaries: Zero Node/Electron memory overhead, ultra-low CPU footprint, and instant local SQLite persistence.

  5. 🤖 Intently Token-Efficient & Agentic Self-Healing Engine (@diag):

    • Engineered for AI Coding Agents: Highly regular, predictable HTML patterns that cut LLM code generation from ~10,000 tokens (React) down to ~2,500 tokens.
    • Self-Healing Diagnostics: Built-in CSP-safe reflection taxonomy allowing autonomous AI agents to introspect, verify, and heal UI state with zero brittle transpilation failures.

🌌 Ecosystem Companions: When & How to Use htmFX & HMLR

HTMXUI is augmented by two specialized companions that unlock 3D spatial simulation and deep browser diagnostics:

┌────────────────────────────────────────────────────────────────────────┐
│                        HTMXUI Core Framework                           │
│     120+ Components • 10 Reactive Micro-Engines • Zero Build           │
└──────────────────┬─────────────────────────────────┬───────────────────┘
                   │                                 │
                   ▼                                 ▼
       ┌───────────────────────┐         ┌───────────────────────┐
       │         htmFX         │         │         HMLR          │
       │  Declarative 3D &     │         │  DevTools & Velocity  │
       │  Spatial Companion    │         │  Agentic Runtime VM   │
       └───────────────────────┘         └───────────────────────┘

🪐 1. htmFX — Declarative 3D, WebGPU & Spatial Companion (~34KB)

  • What it is: A declarative 3D and spatial engine that brings WebGL2/WebGPU rendering directly into HTML attributes.
  • When to use it:
    • Building interactive 3D viewports, digital twins, and product configurators without writing 400 lines of Three.js boilerplate.
    • Adding particle kinetics, atmospheric volumetric fog, or astronomical simulations (e.g. <hx-viewport>, <hx-mesh src="model.gltf">).
    • Visualizing massive spatial datasets with the built-in SpatialEdgeDB (>10,000 entities rendered via hardware-instanced WebGPU draws).

🛠️ 2. HMLR — HyperMedia Language Runtime & DevTools Inspector

  • What it is: A dedicated browser DevTools extension (Chrome/Firefox) and high-speed execution runtime (<50KB Wasm).
  • When to use it:
    • Live Signal Profiling: Visually inspect and time-travel replay reactive state trees in HxBolt.
    • Hypermedia Velocity Audits: Replace slow Lighthouse runs with instant hypermedia metrics (DOM swap latency, payload weight, LLM token efficiency).
    • Autonomous AI Self-Healing: Streams token-dense @diag telemetry directly to AI agents, allowing them to locate and resolve UI target mismatches in milliseconds.
  • 📥 Download Extension Releases:

🏛️ Ecosystem Architecture & Maturity Matrix

Component Role Status Documentation
HxBolt Signals & Matrix 2D Reactive State, Proxies & $O(1)$ Sparse Matrix Production Ready (v0.10.30) src/htmx-bolt.ts
HxFlash Fuzzy Search Zero-Latency In-Memory TypedArray Column Store Production Ready (v0.10.30) src/htmx-flash.ts
HxVirtual 2D Windowing Bi-Directional Windowing with Pinned Columns Production Ready (v0.10.30) src/htmx-virtual.ts
HxForm & Transactions Declarative Validation & Optimistic Rollbacks Production Ready (v0.10.30) src/htmx-form.ts
HxCalc Spreadsheet DAG Topological Formula Solver & Cycle Detection Production Ready (v0.10.30) src/htmx-calc.ts
HxA11y Matrix Nav 2D Roving Tabindex & Excel Range Selection Production Ready (v0.10.30) src/htmx-a11y.ts
HxSim Kinetic Physics Boids, N-Body Gravity, Momentum, Cellular Automata Production Ready (v0.10.30) src/htmx-sim.ts
HxVibe Spring Kinetics 60fps FLIP Layout Animations & Physics Solvers Production Ready (v0.10.30) src/htmx-vibe.ts
HxOffline Mutation Queue IndexedDB Transaction Queue & Auto-Sync Production Ready (v0.10.30) src/htmx-offline.ts
HxDevTools & @diag Real-Time Telemetry & SARIF 2.1.0 Diagnostics Production Ready (v0.10.30) src/htmx-devtools.ts

⚡ The Equation

HTMXUI = HTMX (Hypermedia Core)
       + Bolt (Signal-Based Reactive State & 2D Sparse Matrix)
       + Flash (In-Memory Typo-Tolerant Search & Columnar Store)
       + Form (Declarative Validation & Cell Transaction Rollbacks)
       + Virtual (Bi-Directional 2D Scroller with Pinned Columns)
       + Calc (Topological Formula DAG & Cycle Detection)
       + Vibe (60fps Spring Physics & FLIP Layout Animations)
       + A11y (WAI-ARIA Focus Trapping & 2D Matrix Nav)
       + Sim (Particle Kinetics, Boids Flocking & Conway Life)
       + Offline (IndexedDB Mutation Queues & Auto-Sync)
       + 120+ Production-Grade Copy-Paste Components

📦 The 10 Modular Core Micro-Engines (~48KB Total Gzipped)

Engine Source (src/) Distribution (public/) Size (Gzipped) Mathematical & Algorithmic Foundation Capabilities
⚡ Bolt htmx-bolt.ts htmx-bolt.js ~16.2 KB $O(1)$ coordinate-keyed sparse matrix & microtask batching Signals, dependency tracking via deep Proxies, computed properties, $store, HxBolt.matrix, 120 FPS ticker, zero-eval safe evaluator.
🔍 Flash htmx-flash.ts htmx-flash.js ~4.8 KB TypedArray columnar indexing & bitmask query filters In-memory fuzzy search (hx-flash-search), multi-column filters, TypedArray columnar store (createColumnStore).
🪟 Virtual htmx-virtual.ts htmx-virtual.js ~3.9 KB $O(1)$ spatial slicing & binary row-height bisecting Bi-directional 2D windowing virtualization with pinned rows/columns for million-row tables.
📊 Calc htmx-calc.ts htmx-calc.js ~3.2 KB Kahn's algorithm topological DAG sort & cycle detection Reactive formula DAG engine with coordinate references (A1, SUM(A1:B10)) and #CYCLE! detection.
📝 Form htmx-form.ts htmx-form.js ~5.1 KB Deterministic finite-state machine (FSM) validation Declarative validation (hx-validate="required|email"), optimistic cell transactions with undo/redo (Ctrl+Z).
🌊 Vibe htmx-vibe.ts htmx-vibe.js ~3.4 KB Damped harmonic oscillator kinematics: $m \ddot{x} + c \dot{x} + kx = 0$ FLIP layout animation engine, spring physics solver (SpringSolver), stagger sequences, scroll triggers.
🧬 Sim htmx-sim.ts htmx-sim.js ~4.2 KB Particle physics, Boids Reynolds rules, 2D Barnes-Hut gravity Swarm intelligence flocking, N-Body orbital dynamics, elastic momentum, 23/3 Conway Life, slime mould sensors.
♿ A11y htmx-a11y.ts htmx-a11y.js ~3.1 KB WAI-ARIA roving coordinate space navigation Modal focus trapping (hx-trap-focus), roving tabindex, 2D matrix navigation, Excel range selection.
📶 Offline htmx-offline.ts htmx-offline.js ~2.1 KB FIFO transaction journal with exponential backoff IndexedDB mutation queues with exponential retry backoff and online sync.
🛠️ DevTools htmx-devtools.ts htmx-devtools.js ~1.8 KB Telemetry bridge & SARIF 2.1.0 diagnostic stream Real-time signal inspector, swap latency timing metrics, @diag HUD.

⚡ Verified Performance & Automated Benchmarks

HTMXUI includes an automated, reproducible benchmark suite (bun test) measuring real runtime throughput and payload efficiency:

  • Complete 10-Engine Suite: 50.08 KB total gzip (smaller than react-dom alone before components or state libraries).
  • Atomic 2D Sparse Matrix: 670,000+ cell writes / second in $O(1)$ coordinate space.
  • In-Memory Columnar Search: 0.18 ms query latency across 10,000 rows.
  • DAG Topological Solver: 0.16 ms cascade resolution across 500-level formula dependencies.
  • Zero-eval Strict CSP Parser: 2,600+ complex expressions & arrow closures / second with zero dynamic new Function().
  • Automated Test Suite: 61/61 tests passing across 11 test suites in <400ms.

🎮 Live Flagship Demos

Experience complete, production-grade applications built with zero React/Node runtime:

Tip

⚡ Live Cloudflare Deployment: htmxui.cgb.workers.dev/demo/
💻 Instant Local Run: bun run dev (or node server.js $\to$ http://localhost:3000/demo).
🚀 Deploy to Cloudflare: bun run deploy:pages (or bun run deploy:worker).

Flagship Demo Live Cloudflare URL Source View Capabilities Demonstrated Stack / Engines
🎯 Verifiable Demos Hub /demo/ views/demos-hub.html Master index of live interactive previews, stress tests, and showcases. All 10 Engines
📊 HyperAdmin Dashboard /demo/tailadmin/ views/app-tailadmin.html 100% pure HTMXUI enterprise admin panel with zero React/Node runtime. Dynamic sales/profit analytics, recent channels, dark/light theme, and reactive sidebar navigation. HxBolt, HxFlash, HxVibe
🏢 Enterprise HyperERP /demo/erp/ views/app-erp.html 10,000+ virtualized rows, zero-latency in-memory fuzzy search, and multi-tier analytics. HxVirtual, HxFlash, HxGrid
📈 HyperSheet Spreadsheet /demo/hypersheet/ views/app-hypersheet.html 2D reactive spreadsheet with topological formula DAGs, coordinate resolution (SUM(A1:B5)), cycle detection, and roving 2D tabindex navigation. HxCalc, HxA11y, HxBolt.matrix
🌌 Cosmic 3D Universe /demo/universe/ views/app-universe.html Autonomous procedural universe viewport with domain-warped solar convection shaders and relativistic accretion disk simulations. HxBolt, HxSim, HxVibe

📖 Specifications & Guides

🚀 Quick Start

1. Include the Scripts

<!-- Core HTMX -->
<script src="https://unpkg.com/htmx.org@2.0.4"></script>

<!-- HTMXUI Reactive Signal Engine -->
<script src="/htmx-bolt.js"></script>

<!-- Optional: Search, Forms, Animations, Accessibility, Virtualization, Grid, Offline, Sim -->
<script src="/htmx-flash.js"></script>
<script src="/htmx-form.js"></script>
<script src="/htmx-vibe.js"></script>
<script src="/htmx-a11y.js"></script>
<script src="/htmx-virtual.js"></script>
<script src="/htmx-grid.js"></script>
<script src="/htmx-offline.js"></script>
<script src="/htmx-sim.js"></script>

2. Reactive Component Example

<div class="p-6 border rounded-xl space-y-4"
     hx-computed='{ totalPrice: items.reduce((sum, i) => sum + (i.price * i.qty), 0) }'>

  <!-- Recommended: Declare initial state via script block -->
  <script type="application/json" hx-state>
  {
    "newItem": "",
    "items": [
      { "id": 1, "name": "Mechanical Keyboard", "price": 120, "qty": 1 },
      { "id": 2, "name": "Wireless Mouse", "price": 60, "qty": 2 }
    ]
  }
  </script>

  <!-- Two-way binding -->
  <div class="flex gap-2">
    <input type="text" hx-model="newItem" placeholder="Item name..." class="px-3 py-2 border rounded flex-1">
    <button hx-on:click='if(newItem.trim()) { items.push({ id: Date.now(), name: newItem, price: 40, qty: 1 }); newItem = ""; }' class="bg-primary text-white px-4 py-2 rounded">
      Add
    </button>
  </div>

  <!-- Structural list rendering -->
  <div class="divide-y border rounded">
    <template hx-for="(item, idx) in items">
      <div class="p-3 flex items-center justify-between">
        <span hx-text="item.name" class="font-medium"></span>
        <div class="flex items-center gap-3">
          <span>$<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">
          <button hx-on:click="items.splice(idx, 1)" class="text-red-500 text-xs">Remove</button>
        </div>
      </div>
    </template>
  </div>

  <!-- Computed reactive total -->
  <div class="flex justify-between items-center font-bold text-base pt-2">
    <span>Total:</span>
    <span class="text-primary">$<span hx-text="totalPrice">0</span></span>
  </div>
</div>

🛠️ Local Development & Contributing

# Install dependencies
bun install

# Start documentation and preview server
bun run dev

# Compile TypeScript engines to public distribution bundles
bun run build:engines

# Run automated unit test suite (61/61 passing)
bun test

# Verify SHA-256 release checksums
sha256sum -c CHECKSUMS.sha256

👥 About Us & The Hyperlibs Mission

Hyperlibs is an open-source systems research and engineering collective dedicated to liberating backend engineers, systems developers, and AI agents from the complexity of modern client-side JavaScript stacks.

🧭 Core Principles

  1. Zero Virtual DOM: HTML elements are the primary components; the server remains the single source of truth.
  2. Lean & Hyperreactive: All 10 micro-engines together weigh under ~48KB gzipped—smaller than a typical React hydration runtime.
  3. Deterministic Structure: Predictable declarative attributes (hx-state, hx-action, hx-text, hx-show, @diag) make UI easily inspectable and maintainable.
  4. Backend Freedom: First-class support for Go, Rust, Python, .NET, PHP, and Bun with zero client build toolchains.

📄 License

MIT © Hyperlibs

About

HTMXUI — (HTMX on Steroids) Hyperreactive, lean hypermedia UI framework. 120+ components, 10-engine reactive core (~48KB), zero React/Node runtime.

htmxui.cgb.workers.dev/

Topics

3dfrontendgameuigolanghtmxhypermediapythonreactiverustshadcn-uitailwindcssuiui-componentsui-designui-frameworkui-libraryui-uxuikituipathweb-components

Resources

Readme

Security policy

Security policy
Activity
Custom properties

Stars

3 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages