Velvet Studio 2.0
Components Playground Design System Patterns Rust Docs
AREA 08 · RUST DOCS

Building High-Performance Web Applications in Pure Rust

No macros, no JSX, no virtual DOM. Pure typed Rust builders with zero allocations in hot rendering paths.

VIEW-IR API

Declarative UI Composition in Pure Rust

velvet_html::view provides fluent constructor functions mapping to native CSS layouts

Composing Views with Builders

Zero proc-macro tax with instant IDE completion
rust
use velvet_html::view::{ surface, stack, text, badge, btn_kv, Intent, Variant, Surface};

pub fn telemetry_card(title: &str, count: u32) -> View {
    surface(stack([
        badge("Live Telemetry").tone(Intent::Ok).variant(Variant::Solid),
        text(title).tone(Intent::Accent),
        btn_kv("refresh", "Sync", BtnKind::Primary, &[("target", "telemetry")]),
    ]))
    .with_surface(Surface::Elevated)
}
All view constructors return the closed View enum with zero heap allocations for leaf nodes.

Layout Primitives

Deterministic spacing & gaps
stack([kid1, kid2]).gap(Gap::Md)cluster([chip1, chip2])bento([card1.span(2), card2.span(1)])split(left_view, right_view)
STATE MACHINE

Closed Acts & Deterministic Reducers

One central reducer driving both server-side rendering and WebAssembly island morphing

rust
velvet_html::closed_act! {
    pub enum HomeAct {
        Ping => "saas_showcase_ping" {
            islands = &["count"],
            form = NoteForm
        },
    }
}

// In the application reducer:
match HomeAct::dispatch(act)? {
    HomeAct::Ping => {
        let form = NoteForm::from_payload(&payload)?;
        state.count = state.count.saturating_add(1);
    }
}
Acts guarantee thread safety and wire safety across native, web, and MCP agent calls.
ISLAND MORPHING

Surgical DOM Patching without Virtual DOM

Tagged islands update with sub-microsecond latency without traversing a secondary tree

WASM Island Contract

island("id", view)
When state mutates, the motor computes diffs only on dirty tagged islands, applying direct textContent, classList, and value updates in browser DOM.
rust
island("active_sessions", metric(&count.to_string(), "Sessions"))

Command Palette

PREVIEW VELVET 2.0

Select an item

Select or hover an item to inspect live route details, contracts, and schema bindings.

Route: /components
Latency: < 0.9 ms (SSR)
Contract: Pure Rust
↵ Open Esc Close

Keyboard Shortcuts

Command Palette / Search⌘K / Ctrl+K
Time-Travel Undo (Rollback)Ctrl+Z
Toggle Light / Dark ThemeMod+Shift+L
Cycle Layout ShellMod+Shift+F
Cycle Density ScaleMod+Shift+D
DevTools Drawer⌘I / Mod+I
High Contrast (WCAG AAA)Mod+Shift+C
Reduced MotionMod+Shift+M

Velvet DevTools

WASM Active
Schema, Acts & Autonomous MCP
POST /__act POST /__mcp GET /act.schema.json GET /openapi.json
HomeAct::Ping → island: count
AuthAct::SignIn → island: session-hint
Proc::UserRows → island: user-rows (q: text)
MCP Tools/List → endpoint: /__mcp (JSON-RPC 2.0)
Engine Telemetry & Allocations
0 Heap Allocs / span 0.1 ms Paint 12 800 M/s
Live Session Tape (Flight Recorder)
[0.00s] boot_catalog 12 pages, 16 routes verified
[0.02s] session_init WASM active, 0 heap allocs
Interactive Act Dispatcher
View Schema Ready
Active Island Inspector (DOM Morph Target)
No active islands on current page
Browser Self-Check (what YOUR browser runs)
waiting…
Autonomous MCP Tool Console
View Act Schema
Ready
Color Contrast & Accessibility
Text to Background 14.8:1 (AAA Pass ✓)

Settings

Språk / Language
Theme Mode
Design Style
Color Palette
Layout Shell
Density
Accessibility (WCAG AAA)