Visual Editor

Visual Editor: Intuitive Design at Scale

The Visual Editor is the creative heart of Vinyasa. It provides a tactile, hands-on environment for arranging components, exploring layouts, and fine-tuning aesthetics without writing a single line of code.

Vinyasa features an infinite, hardware-accelerated canvas that scales with your project.

• Navigation: Hold the Spacebar and drag to pan across your workspace.
• Zooming: Use Ctrl + Mouse Wheel to zoom in for pixel-perfect detail or zoom out to see your entire application flow.
• Smart Selection: Click any element to select it. To select multiple items, click and drag on an empty area of the canvas to create a selection marquee.

Located in the left sidebar, the Toolbox is organized by category to help you find the right element quickly.

Basic Elements

The building blocks of every design: Rectangles, Circles, Lines, and Containers.

Typography

Advanced text controls with support for Google Fonts, custom weights, and alignment.

UI Controls (Forms)

Ready-to-use mockup elements: Buttons, Inputs, Checkboxes, Sliders, and Dropdowns.

Data Visualization

Professional charts and graphs that can be styled with custom colors and data points.

The Right Panel is your primary tool for styling. It updates dynamically to show only the properties relevant to your current selection.

• Geometry: Set exact X, Y, Width, and Height values.
• Styling: Adjust Fill (background), Stroke (border), Opacity, and Corner Radius.
• Typography: Change font family, size, weight, and letter spacing.
• Layering: Control the "Z-Index" of elements using the Bring to Front or Send to Back actions.

Multi-Element Editing

When you select multiple elements, the properties panel shows shared attributes. This is the fastest way to align a row of buttons or change the theme color of an entire section at once.

Master these shortcuts to double your design speed:

Canvas edits and YAML drafts are deliberately separate. After moving an element visually, open YAML and AI and choose Reload from canvas to inspect its current left/top values. Confirm before discarding an existing draft or proposal. Validate a YAML draft, review it and choose Apply to canvas to update the prototype. If the canvas changed after loading the draft, reload before applying; stale drafts are blocked. See the synchronization workflow.