RV Anveshana - Documentation Products Vinyasa Text to UI

Text-to-UI Engine: Design at the Speed of Thought

The Text-to-UI Engine is the core innovation of Vinyasa. It allows you to define user interfaces using a simple, human-readable language called YAML. This "Design as Code" approach brings the power of software engineering—precision, reusability, and AI compatibility—to the world of UI design.

Why Design with Code?

While visual editors are great for exploration, the Text-to-UI engine offers unique superpowers:

Pixel Precision: No more manual dragging to align elements. Type left: 450 and it's perfect every time.
AI Compatibility: Modern AI models (LLMs) speak text perfectly. You can prompt an AI to "Create a dashboard layout," and it will generate Vinyasa code that you can render instantly.
Rapid Bulk Edits: Need to change the theme color of an entire multi-screen app? A simple "Find and Replace" in the code editor handles it in seconds.
Version Control: Commit your .rvv design files to Git. See exactly what changed between design iterations using "Diff."

The Integrated Code Editor

Vinyasa includes a professional-grade code editor built directly into the sidebar. It features:

Syntax Highlighting: Makes your UI structure easy to scan.
Schema Validation: Instantly flags typos (e.g., writing background instead of fill).
Intelligent Auto-complete: Press Ctrl + Space to see all valid properties for any element.
Live Error Tracking: Real-time feedback ensures your designs never "break."

Syntax Fundamentals

Vinyasa documents follow a strictly declarative structure. The root level must always contain an elements array.

Basic Structure

elements:
  - type: element_type
    property_1: value
    property_2: value

Common Element Gallery

Type	Description	Key Properties
`window`	A container frame for your design.	`title`, `width`, `height`, `fill`
`text`	Basic text label.	`text`, `fontSize`, `fontWeight`, `fill`
`button`	An interactive button.	`text`, `width`, `fill`, `color`
`image`	A placeholder or linked image.	`src`, `width`, `height`
`input`	Text entry field mockup.	`placeholder`, `width`

Copy this snippet into your editor to see how complex layouts are built using containers (window) and nested placement.

elements:
  # Background Frame
  - type: window
    left: 200
    top: 100
    width: 350
    height: 450
    title: "Secure Login"
    fill: "#ffffff"

  # Logo Placeholder
  - type: circle
    left: 335
    top: 180
    radius: 40
    fill: "#f1f5f9"

  # Header Text
  - type: text
    left: 275
    top: 240
    text: "Welcome Back"
    fontSize: 20
    fontWeight: "bold"
    fill: "#0f172a"

  # Input Fields
  - type: text
    left: 230
    top: 290
    text: "Email Address"
    fontSize: 12
    fill: "#64748b"
  - type: input
    left: 230
    top: 310
    width: 290
    placeholder: "[email protected]"

  # Submit Button
  - type: button
    left: 230
    top: 380
    width: 290
    text: "Sign In"
    fill: "#7335b7"
    color: "#ffffff"

AI-Assisted Workflow

Vinyasa is the perfect companion for AI. Use this prompt template with your favorite AI (ChatGPT/Claude/Gemini) to generate designs:

"Act as a senior UI designer. Generate a Vinyasa YAML configuration for [DESIRED SCREEN]. Use the 'elements' array as the root. Include standard modern UI properties like 'fill', 'fontSize', 'width', and 'top/left' coordinates. Output ONLY the raw YAML code."

Synchronization Modes

Manual Run: Hit the Play button to push your code to the canvas.
Auto-Run (Recommended): Enable this to see your design update in real-time as you type.
Reverse Sync: Use the Sync button to convert your visual adjustments (like dragging a button) back into YAML code.