Getting Started with Vinyasa

Welcome to Vinyasa! This guide will help you navigate the interface and build your first user interface mockup using both visual and text-based tools.

Prerequisites

One of the best things about Vinyasa is its simplicity. There are no prerequisites:

• No installation required.
• No complex setup.
• Works in any modern web browser (Chrome, Edge, Firefox, or Safari).

Interface Overview

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.

Step 1: Your First Component (The Visual Way)

Let's start with the most intuitive way to build:

1. Click the Toolbox icon in the top-left.
2. Locate the "Basic" or "Shapes" group.
3. Drag a "Rectangle" onto the canvas.
4. With the rectangle selected, go to the Properties Panel on the right.
5. Change the Fill property to #7335b7 (Our signature purple).
6. Change the Corner Radius to 12 to give it a modern look.

Step 2: Adding Precision (The Text-to-UI Way)

Now, let's add a button using code for perfect placement.

1. Switch to the Code Editor tab (icon looks like < >).
2. You will see the YAML definition of the rectangle you just created.
3. Below the rectangle entry, add this code for a button:

     - type: button
       left: 150
       top: 200
       width: 200
       text: "Confirm Action"
       fill: "#f8842b" # Signature orange
       color: "#ffffff"

4. Click Run. The button appears exactly where you specified.

Step 3: Organizing with "Window"

For professional mockups, it's best to group elements within a container. The window element acts as a parent frame.

1. Add a window type at the top of your elements list in the code editor.
2. Set its width to 800 and height to 600.
3. Move your other elements inside its bounds visually by dragging them.

First Project Checklist

Before you finish your first session, make sure you know how to:

• Pan the Canvas: Hold Space and drag.
• Zoom: Use Ctrl + Mouse Wheel.
• Delete: Select an element and hit Backspace or Delete.
• Export: Use the File > Export as RVV menu to save your work to your computer.

What's Next?

Now that you've mastered the basics, explore the full power of Vinyasa:

• Text-to-UI Deep Dive: Learn the full YAML syntax.
• Element Reference: See all 50+ available UI components.
• Pro Tips: Master keyboard shortcuts and advanced styling.