BosatsuUI

A UI library that uses compile-time static analysis of TypedExpr to generate targeted DOM updates without virtual DOM diffing.

No Virtual DOM

The Key Insight

When state changes, instead of re-rendering and diffing:

  1. Static analysis extracts statePath -> DOMProperty bindings at compile time
  2. Runtime looks up bindings for the changed path - O(1) map lookup
  3. Direct element.property = value updates - no diffing!
  4. NEW: Pattern matching on variants enables conditional visibility toggling

Interactive UI Demos

Counter

Basic counter showing direct DOM binding updates. Watch the binding log to see O(1) state -> DOM updates.

Core Concept

Conditional Rendering

Variant-based visibility toggling for Loading/Error/Success states. Pattern matching extracts bindings at compile time.

Pattern Matching

Todo List

Per-item bindings for O(1) updates even in large lists. Toggle, add, delete todos with targeted DOM updates.

Per-Item Bindings

Dashboard

Multi-panel dashboard with independent state bindings. Each widget updates independently without re-rendering others.

Complex State

Spreadsheet

Cell-level bindings for efficient grid updates. Only modified cells update, not the entire grid.

Grid Updates

Drag & Drop

Reorderable list with smooth animations. Demonstrates efficient list manipulation.

List Operations

Simulation Demos

Generated from .bosatsu source files using the simulation CLI. Features "Why?" buttons for derivation tracking and "What if?" toggles.

Loan Calculator

Calculate monthly payments with floating-point precision. Explore how interest rates affect total cost.

Numeric

Carbon Footprint

Calculate annual CO2 emissions from transportation and home energy. See derivation chains for each computed value.

Numeric

Tax Calculator

Compute taxes with AI-powered derivation tracking. Demonstrates provenance for every computed value.

AI Debugging

Performance Benchmarks

BosatsuUI vs React vs Elm

Interactive benchmarks comparing direct DOM binding updates against virtual DOM diffing. Run tests in your browser.

Benchmark Suite

How It Works

// Compile time: UIAnalyzer extracts bindings from TypedExpr
const bindings = {
"count": [{ elementId: "counter", property: "textContent" }],
// Conditional bindings with 'when' clauses for pattern matching
"status": [
{ elementId: "loading", property: "textContent",
when: { discriminant: ["status"], tag: "Loading", isTotal: false } },
{ elementId: "error", property: "textContent",
when: { discriminant: ["status"], tag: "Error", isTotal: false } },
],
};

// Runtime: O(1) lookup, visibility toggling, direct DOM update
for
(
const
b
of
bindings) {
if (b.when && state[b.when.discriminant].tag !== b.when.tag) {
element.style.display = 'none'; // Hide non-matching variants
} else {
element.style.display = '';
element[b.property] = value; // Direct DOM update
}
}