Text to UI

Vinyasa's Text-to-UI engine is a game-changer for modern prototyping. It allows you to define, manipulate, and share your user interface designs using simple, human-readable YAML text. This approach combines the speed of visual tools with the precision and power of code.

Why Text-to-UI?

Visual drag-and-drop is intuitive, but code offers unique advantages:

1. Precision & Consistency: Easily align elements by typing exact coordinates (left: 100, left: 200) or ensure consistent styling by copying and pasting property blocks.
2. Bulk Editing: Need to change the color of 50 buttons? In a visual tool, that's 50 clicks. In Vinyasa's code editor, it's a single "Find and Replace."
3. Version Control: Your design is just text. You can commit it to Git, diff changes, and track the evolution of your UI just like you track application code.
4. Reusability: Create a "snippet library" of your favorite layouts (e.g., a standard login form or dashboard header) and paste them into any new project instantly.
5. AI-Powered Generation: Because the format is standard text, you can leverage Large Language Models (LLMs) like ChatGPT, Claude, or Gemini to generate the UI for you.

The Code Editor Interface

The Code Editor is your command center for text-based design, located in the left panel (toggle with the < > icon). It is a fully-featured IDE environment built right into Vinyasa:

• Syntax Highlighting: Color-coded text makes reading your UI structure effortless.
• Intelligent Auto-Completion: Don't remember if the property is fontSize or font-size? Just start typing, and the editor will suggest valid properties for the specific element you are building.
• Real-time Validation: The editor checks your code against the Vinyasa schema as you type. It flags syntax errors and invalid values immediately, preventing runtime issues.

Understanding the Syntax

Vinyasa uses YAML (YAML Ain't Markup Language) because of its clean, minimal syntax. It relies on indentation rather than brackets or tags, making it easy to read and write.

The root of every Vinyasa document is the elements list. Each item in this list represents a UI component.

elements:
  # A simple button definition
  - type: button
    left: 100
    top: 100
    text: "Click Me"
    fill: "#3498db"

  # A circle definition
  - type: circle
    left: 300
    top: 100
    radius: 50
    fill: "#e74c3c"

Core Properties

While every element has unique attributes, these core properties are universal:

• type: (Required) The component identifier (e.g., button, text, window, card).
• left: The X-coordinate (horizontal position) on the canvas in pixels.
• top: The Y-coordinate (vertical position) on the canvas in pixels.
• visible: A boolean (true or false) to toggle visibility.
• id: (Optional) A unique identifier. If omitted, Vinyasa generates one automatically.

AI-Assisted Design: The "Magic" Workflow

One of the most powerful ways to use Vinyasa is as a visualizer for AI output. You can describe a UI in natural language to an AI, and have it write the Vinyasa code for you.

Example Workflow:

1. Prompt an AI:

   "Create a Vinyasa YAML configuration for a mobile music player app. It should have a dark theme. Include a 'Now Playing' text at the top, a large square placeholder for album art in the center, a progress bar below it, and three buttons at the bottom for Previous, Play, and Next."

2. Copy the Output: The AI will generate a YAML block.
3. Paste & Run: Paste it into the Vinyasa Code Editor and hit Run.
4. Refine: You now have a working base! Tweak positions or colors visually or in the code to perfect it.

Synchronization: Code <-> Canvas

Vinyasa maintains a live link between your code and the visual canvas.

• Run (Play Button): Pushes your code changes to the canvas. This replaces the current visual state with exactly what is defined in your text.
• Sync (Refresh Button): Pulls the current state of the visual canvas back into the code editor. Use this if you've been dragging elements around and want to save that new layout as code.

Tips for Power Users

• Comments: Use # to add comments to your design. Explain why a button is red or mark sections of your layout (e.g., # --- Header Section ---).
• Grouping: While Vinyasa is flat by default, you can use comments or whitespace to logically group related elements in your code file for better readability.
• Math: Since it's just text, you can use external tools or scripts to generate Vinyasa YAML programmatically, enabling data-driven design generation.