Full User Guide

Vinyasa is a low-fidelity UI prototyping workspace. Use the canvas to arrange controls, the inspector to edit supported properties, and the YAML workspace to validate explicit document changes. This guide covers the core editing loop, pages, AI review, and backups. It does not describe a production app builder.

A document contains elements, pages, and workspace settings. Elements have stable IDs, positions, and properties from the element catalog. A .rvv project wraps that document with project identity and viewport state. The YAML editor shows the document, not the whole project envelope.

The canvas and YAML draft are deliberately synchronized through explicit actions. A draft can contain incomplete or invalid text without replacing your working canvas. Only a validated Apply operation changes the visual document.

Canvas and toolbox

Search for a supported component and drag it onto the canvas. Select an element to move, resize, rotate, or edit it. Use the viewport controls to navigate a larger layout. The visual editor guide covers manipulation tools.

Inspector

Properties depend on the selected type. A button exposes text and textColor; an input uses text for its displayed placeholder. Dimensions are only editable where the catalog supports them. Do not assume every Fabric property is a document property.

YAML, AI Copilot, and Review

Open YAML and AI from the rail. Reload from canvas captures the current applied model; it asks before discarding a changed draft or proposal. Validate checks YAML without applying it. Apply to canvas changes the document as one undoable operation. Review holds an AI proposal until you explicitly apply or discard it.

If the canvas changes while the draft is open, the workspace reports Canvas changed and blocks stale application. Reload before continuing. Closing and reopening the panel preserves the draft within the tab; reloading the browser does not.

Multi-screen documents

Use Workspace Settings to define named pages with explicit positions and dimensions. Place controls within their bounds and keep enough space between pages. Use supported targetPageId links where appropriate and keep a written description of the intended journey. Pages are layout boundaries, not isolated application runtimes. See the multi-screen examples.

Grouping

Select related elements and use Group, or represent them as a user-group with children in YAML. Windows and cards are visual objects, not implicit parents; putting an element inside their bounds does not nest it. Ungroup restores individual editing. Arrange commands control visual stacking.

AI revisions

Configure a provider and the actual model context limit, then request one focused change. Copilot searches and reads bounded portions of the draft and returns validated document edits for review. It cannot edit pages or workspace settings through its patch operations. No output is applied automatically. Read Copilot setup and large-document limits.

Projects autosave to IndexedDB in the current browser profile. Storage can fail, be cleared, or be evicted; it is not a durable backup or cross-device account. Export .rvv from File > Export As before important handoffs and before clearing site data. An unapplied YAML draft is not included in the saved canvas project.

PNG and SVG are visual handoffs. They do not preserve the complete editable Vinyasa document, and external editors may handle text, fonts, images, or grouping differently. Use .rvv for reopening in Vinyasa, and pair images with requirements for implementation. Follow backups and Git review.

Canvas commands are suspended while a native dialog is open or an input, select, textarea, or editable text surface owns the event.

Use project autosave and explicit .rvv export for backups. Ctrl/Cmd + S is not a Vinyasa project-save command. Text editors retain their own text-editing behavior.

Use the hosted application at /editor. Browser caching and browser project autosave are not a supported local installation or a guarantee that Vinyasa works offline. Website assets, fonts, images, provider calls and hosted MCP depend on their network resources.

Ordinary document editing happens in the browser. Consented AI requests send the prompt and relevant content to the configured provider server. MCP clients connect to /mcp, where supplied documents are processed on the hosted server. Read the privacy guide before using sensitive content.

Vinyasa does not export production Angular or React components. Use a prototype as a reviewed brief for implementation, or evaluate code-backed AI tools when a running application is the objective.