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.

The Stage (Infinite Canvas)

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.

The Toolbox (Component Library)

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 Properties Panel (The Inspector)

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.

Essential Keyboard Shortcuts

Master these shortcuts to double your design speed:

Pro Tip: The Visual-Code Harmony

Remember that Vinyasa is always in sync. If you drag an element to a new position, switch to the Code Editor to see its left and top properties update instantly. This is a great way to learn the YAML syntax while you design.