Getting Started

Create a local project, arrange a few controls, make a validated YAML edit, and export a backup. Vinyasa is a low-fidelity prototype workspace: controls illustrate an interface but do not implement an application's backend or form behavior. Open the editor to begin.

Use a modern browser with JavaScript and site storage enabled. Ordinary editing does not need an account or an AI key. Browser-local projects belong to this profile and origin, so export a .rvv backup before clearing site data or switching devices. AI is optional and has separate provider and network requirements.

The Vinyasa workspace is divided into three functional zones designed to maximize your productivity:

1. Creation Zone (Left): Contains the Toolbox (visual components) and the Code Editor (YAML engine).
2. The Stage (Center): An infinite canvas for your designs. Supports panning, zooming, and multi-selection.
3. The Inspector (Right): The Properties Panel. It updates dynamically based on what you select on the stage.

Open Toolbox from the editor rail, search for Rectangle, and drag it onto the canvas. Select it and adjust its position, size, fill, or radius using the inspector. Search for Button and add an action beneath it. Give the button a meaningful label. Use a readable background and text color rather than relying on a theme's accent alone.

Open YAML and AI, then choose YAML. The first opening captures your canvas. Edit the button's text or position, choose Validate, then Apply to canvas. Reload from canvas captures later visual changes and asks before discarding a changed draft.

This standalone example replaces the document when applied; add its element to your existing elements list if you want to retain other objects:

elements:
  - id: confirm-action
    type: button
    left: 150
    top: 200
    width: 200
    height: 44
    text: Confirm action
    fill: '#087f75'
    textColor: '#ffffff'

Only supported properties are accepted. The text-color property for a button is textColor, not color.

A window element is a visual frame. Put it behind other objects using arrange commands; placing controls inside its bounds does not make them children. For movable nested content, select the related elements and use Group, represented by user-group in YAML. Use Workspace Settings pages for named screen boundaries. See multi-screen examples.

Before finishing, check that you can select and move a control, edit its supported properties, navigate the viewport, undo a change, and apply a validated draft. Export a .rvv backup from File > Export As. Browser autosave is convenient but not a durable backup, and unapplied YAML is not part of the saved canvas project.

Continue with the YAML workflow, 48-type element catalog, or full user guide. For optional AI, read Copilot setup and review a proposal before applying it. Keep a backup using the RVV and Git guide.