Velvet Studio 2.0
Components Playground Design System Patterns Rust Docs
AREA 05 · PATTERNS

Real-World SaaS Application Shells

Demonstrating cohesive, multi-component workflows built entirely with the public velvet_html::view API.

PATTERN A: ADMIN TELEMETRY

High-Density Operations Desk

Combines KPI metrics, pure Rust SVG telemetry bars, and incident triage in a single shell

Cluster Engine Telemetry

60 FPS Native Present
99.98%System Uptime
12 800Melem/s Event Rate
42 µsMedian SSR Time
Node: Stockholm-1 (Primary)E2EE MLS Active
Open the performance room →

Incident & Security Feed

Kernel Origin Guard
All 4 clusters healthy. Origin guard active.
0 Auth Errors0 Heap Leaks
Open the quality matrix →
PATTERN B: DATA EXPLORER

Searchable TableQuery Directory

High-volume tabular records with query-string sorting and filtering without client JavaScript

Search Records
Filter Role

Directory Records

TableQuery Server Filter
Ada LovelaceAdminada@lovelace.dev · Last active: 2m ago
Alan TuringEngineeralan@turing.dev · Last active: 14m ago
Grace HopperEngineergrace@hopper.dev · Last active: 1h ago
Explore the data specimens →
PATTERN C: SETTINGS SUITE

Preferences & Identity Configuration

Structured forms with switch toggles, radio chips, and typed AppError state validation

Notification Webhook URL

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)