Visual Editor

The Visual Editor is the heart of Vinyasa, providing an intuitive interface for designing user interfaces.

The Canvas

The canvas is an infinite, pannable, and zoomable workspace.

• Panning: Hold Space and drag the mouse, or use the scroll bars.
• Zooming: Use Ctrl + Mouse Wheel or the zoom controls in the bottom right corner.
• Selection: Click an element to select it. Click and drag on the empty canvas to create a selection box and select multiple elements.

The Toolbox

Located in the left panel, the Toolbox contains all available UI components categorized for easy access.

• Search: Use the search bar to quickly find components.
• Drag & Drop: Simply drag any component from the list onto the canvas.
• Click to Add: Clicking a component will add it to the center of your current view.

The Properties Panel

The Right Panel displays the properties of the currently selected element(s).

• Common Properties: Position (X, Y), Size (Width, Height), Rotation (Angle), and Visibility.
• Specific Properties: Each component has unique properties. For example, a Button has Text and Color, while an Image has Src.
• Multi-Selection: When multiple elements are selected, you can edit their common properties simultaneously (e.g., align them all to the same Left position).

Context Menu

Right-click on any element or the canvas to access the context menu:

• Copy/Paste: Duplicate elements.
• Delete: Remove selected elements.
• Bring to Front / Send to Back: Adjust the layering (Z-index) of elements.
• Group/Ungroup: Combine multiple elements into a single group for easier manipulation.

Keyboard Shortcuts