Velvet Studio 2.0
Components Playground Design System Patterns Rust Docs
AREA 03 · PLAYGROUND

Live Properties, States & Rust Code Generation

Tweak variants, sizes, and states to observe immediate layout reflow and copy the exact generated Rust code.

Token studioComponent catalog
LIVE INSPECTOR

Button & Action Specimen Knobs

Interact with real Velvet View-IR builders and inspect generated Rust code

Live Preview Stage

One act · three island wires
Turn a knob on the right: the specimen, the property chips, and the code re-render instantly.
variant = Solidsize = Mdtone = Accentact = cue_click (instant, no server)
rust
// Generated from the live knobs
btn("save", "Preview Action")
    .variant(Variant::Solid)
    .size(Size::Md)
    .tone(Intent::Accent)

Property Knobs

variant · size
1. Variant:
2. Size:
3. Tone:
Each knob is one closed act — set_preview — answered by three island wires. The specimen itself fires cue_click: instant, no server.
FORM PLAYGROUND

FormBuilder & HTML5 Native Validation

Submit the form to test live server-side error envelopes and constraint validation

HTML5 Constraint ValidationField-Bound AppErrorZero-JS Native Submit
Enter a note or test message
Constraint: min 3 charsMax length: 64 chars

Command Palette

Jump to a room — ⏎ opens the first

The Rooms
02 · Component CatalogSpecimens 03 · PlaygroundInspector 04 · Design SystemTokens 05 · PatternsRecipes 06 · Responsive StudioViewport
Proofs & Reference
07 · A11y & BehaviorWCAG 08 · Rust DocsReference 09 · PerformanceBenchmarks 10 · Quality MatrixCI 11 · AuthenticationAuth
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)