Getting Started

This guide will walk you through the fundamentals of Vinyasa, helping you create your first UI design with ease and speed.

What is Vinyasa?

Vinyasa is a revolutionary UI/UX design and prototyping tool that bridges the gap between visual design and code. Whether you're a developer needing to quickly create a wireframe, a designer who wants to see their ideas in a code-friendly format, or a product manager building a proof-of-concept, Vinyasa empowers you to build and iterate with unprecedented speed.

Launch Vinyasa App

The Vinyasa Philosophy: Dual-Mode Design

At its core, Vinyasa is built on a "dual-mode" philosophy. You are never locked into a single way of working:

• Visual Editor: A familiar, intuitive drag-and-drop canvas for hands-on, creative design.
• Text-to-UI Engine: A powerful YAML-based editor that lets you define complex UIs with simple text, enabling version control, reusability, and programmatic creation.

The magic happens when you switch between them seamlessly. Arrange elements visually, then fine-tune their properties with code, or vice-versa. This flexibility defines the "Vinyasa flow."

The Workspace: Your Creation Hub

The Vinyasa workspace is intelligently organized to keep you in the flow state.

1. Left Panel (Creation Zone): This is where ideas begin. It contains the Toolbox, with a rich library of pre-built UI components, and the Code Editor, which unleashes the power of our Text-to-UI engine.
2. Center Canvas (The Stage): Your infinite digital whiteboard. It's a vast, scrollable space designed to hold everything from a single mobile screen to a complex multi-screen application flow.
3. Right Panel (The Inspector): This is the context-aware Properties Panel. Select any element on the canvas, and this panel instantly populates with all its configurable attributes—no digging through menus required.

Your First "Hello World" Button

Let's create a simple button using both design modes.

Method 1: The Visual Approach (Drag & Drop)

This method is perfect for quick layouts and visual exploration.

1. In the left panel, ensure the Toolbox is active.
2. Find the Button component (usually under the "Forms" or "Basic" group).
3. Drag and drop it onto the center canvas.
4. With the button selected (it should have a blue border), look at the Properties Panel on the right.
5. Change the text property to "Hello World" and press Enter. You can also change its fill (background color) to see instant updates.

Method 2: The Coder's Approach (Text-to-UI)

This method is ideal for precision, batch creation, and creating reusable templates.

1. In the left panel, switch to the Code Editor tab.
2. Type the following simple YAML definition:

   elements:
     - type: button
       left: 300 # The X-coordinate on the canvas
       top: 300  # The Y-coordinate on the canvas
       text: "Hello World"
       fill: "#6200ee" # A nice purple color

3. Click the Run button (or enable "Auto-run" for live updates). The button instantly appears on the canvas, exactly as defined.

Saving and Exporting Your Work

Vinyasa helps you manage your work for both quick sessions and long-term projects.

• Autosave (Browser Memory): Vinyasa automatically saves your current project in your browser's local storage. It's great for picking up where you left off, but it's tied to your current browser.
• Exporting (Your Source of Truth): For backups, sharing, and version control, exporting is key.
  • Export as RVV (.rvv): This is the native Vinyasa project file. It's a human-readable YAML file containing your entire UI definition. This is the recommended way to save and version control your work. You can load this file back into Vinyasa at any time.
  • Export as PNG: Creates a pixel-perfect image of your canvas, perfect for presentations, quick shares, or embedding in documents.
  • Export as SVG: Creates a scalable vector graphic. This is ideal for high-quality exports, design handoffs, or when you need to manipulate the design in other vector tools like Inkscape or Illustrator.

Next Steps

You've just scratched the surface! Now you're ready to explore more:

• Dive deep into the Full Vinyasa Guide for a comprehensive overview.
• Master the art of precision with our Text-to-UI documentation.
• Browse the complete Element Reference to see all available components.