Vinyasa: The Complete Guide

Welcome to the definitive manual for Vinyasa. This guide is designed to take you from a first-time user to a Vinyasa power user, covering every tool, feature, and workflow in detail.

🚀 Introduction

Vinyasa is not just another drawing tool. It is a hybrid design environment that treats User Interface as both a visual canvas and structured data. This dual approach allows for workflows that are impossible in traditional tools, such as generating complex layouts via scripts or AI, while still retaining the ease of drag-and-drop adjustments.

🖥️ The Interface: A Tour

1. The Infinite Canvas

The heart of Vinyasa is the canvas. It is an infinite, pan-able surface where your designs live.

• Pan: Hold Spacebar and click-drag, or use the middle mouse button.
• Zoom: Hold Ctrl (or Cmd) and scroll, or use the zoom controls in the bottom-right corner.
• Selection: Click to select an object. Click and drag on the empty canvas to create a selection box around multiple objects.

2. The Toolbox (Left Panel)

Your library of building blocks.

• Search: Use the search bar at the top to filter components (e.g., type "input" to see text fields, checkboxes, etc.).
• Categories: Components are grouped logically (Basic, Forms, Layout, Navigation, Data) to help you browse.
• Drag & Drop: Simply drag an item from the list and drop it anywhere on the canvas.

3. The Properties Panel (Right Panel)

The control center for your selected element.

• Context-Aware: The panel changes based on what you select. A text element shows font options; a chart element shows data options.
• Real-Time Updates: Changes made here reflect instantly on the canvas.
• Common Properties:
  • Layout: X, Y, Width, Height, Rotation.
  • Appearance: Fill Color, Stroke, Opacity, Shadow, Visibility.
  • Layering: Bring to Front / Send to Back buttons.

4. The Code Editor (Left Panel Tab)

The brain of the operation. Switch to the < > tab to access the underlying YAML code.

• Live Sync: Click the "Sync" button to pull the current visual state into code.
• Run: Click "Run" to render your code onto the canvas.
• Editor Features: Includes syntax highlighting, error checking, and auto-completion.

🛠️ Advanced Workflows

Multi-Screen Flows

Vinyasa's infinite canvas is perfect for designing entire user flows, not just single screens.

1. Create Screens: Use the Window or Rectangle component to define screen boundaries.
2. Label Them: Place text headers above each "screen" area.
3. Connect Them: Use Line or Arrow components to draw user flow paths between buttons on one screen and the target screen.
4. Overview: Zoom out to see the entire application logic at a glance.

Grouping & Organization

Keep your complex designs manageable.

• Grouping: Select multiple elements (e.g., a card, an image, and text) and press Ctrl + G. They now move and behave as a single unit.
• Ungrouping: Select a group and press Ctrl + Shift + G (or Cmd + Shift + G on Mac) to break it apart.
• Layer Management: Use the "Bring Forward" and "Send Backward" commands to manage overlapping elements, like placing text on top of a button background.

The AI-Powered Design Loop 🤖

Vinyasa is uniquely suited for AI-assisted design because its "file format" is simple text.

1. Ideation: Ask an AI (ChatGPT, Claude, etc.): "Design a settings page for a mobile app with sections for Account, Notifications, and Privacy."
2. Generation: Ask the AI to output the design in Vinyasa YAML format. (Tip: You can paste a small example of Vinyasa code into the prompt to teach the AI the syntax).
3. Visualization: Paste the AI's code into Vinyasa and hit Run.
4. Refinement: Use the visual editor to tweak colors, alignment, and spacing that the AI might have missed.

💾 Saving, Exporting & Sharing

Project Management

• Browser Storage: Vinyasa auto-saves to your local browser storage. This is great for safety, but do not rely on it for long-term storage. Clearing browser cache will delete this.
• RVV Files: Always export your work as an .rvv file. This is your "source code." It is small, text-based, and can be version-controlled in Git.

Sharing Your Designs

• PNG Export: Best for sharing quick snapshots on Slack, Teams, or email. It renders the current view at high resolution.
• SVG Export: Best for handing off to other designers. SVGs are vector-based, meaning they can be opened in Adobe Illustrator, Figma, or Inkscape and fully edited without losing quality.

⌨️ Keyboard Shortcuts Cheat Sheet

Master these to double your design speed.

❓ Frequently Asked Questions

Q: Can I use Vinyasa offline? A: Yes! Vinyasa is a Progressive Web App (PWA). Once you load it, it works entirely in your browser without needing an internet connection.

Q: Is my data private? A: Absolutely. Vinyasa runs client-side. Your designs are processed in your browser and are never sent to any server unless you explicitly choose to share them (feature coming soon).

Q: Can I generate Angular/React code from my design? A: Vinyasa currently focuses on the design and prototyping phase. However, because the save format is structured YAML data, you can write simple scripts to parse .rvv files and generate boilerplate code for any framework you like. Native code generation features are on our roadmap.