Overview

Vinyasa: The Intelligent Visual Editor

Vinyasa combines a visual drag-and-drop editor with a structured YAML workspace for UI prototypes. Use the hosted app at /editor. No local installation or locally running Vinyasa server is required. Connect external AI agents to the hosted MCP endpoint at /mcp using the MCP setup guide.

Vinyasa is a hosted prototyping workspace, not a production application generator. Choose the surface that fits the task:

• Visual canvas: Arrange screens, edit supported element properties and explore a flow.
• Structured YAML: Review IDs, coordinates, nested frame layouts, pages and settings. Reload from canvas or apply a validated draft explicitly.
• Reviewed AI proposals: Configure a provider, give consent, request a focused change and review the diff before applying.
• Hosted MCP: Let a compatible coding agent discover schemas, validate supplied documents, propose atomic edits and export a project envelope.
• Portable handoff: Keep .rvv backups and share PNG/SVG views. Browser autosave is not a cloud account or a durable backup.

Want to see Vinyasa in action? Copy the code below and paste it into the Code Editor tab in the app.

elements:
  - type: window
    left: 100
    top: 50
    width: 400
    height: 300
    fill: '#f8fafc'
    text: Vinyasa Quick Start
  - type: text
    left: 120
    top: 100
    text: Welcome to Vinyasa
    fontSize: 24
    fill: '#1e293b'
  - type: button
    left: 120
    top: 160
    width: 150
    text: Get Started
    fill: '#7335b7'
    textColor: '#ffffff'

Visual Editor

Arrange components, inspect properties and organize pages and nested frames.

Text-to-UI

Learn the document structure, coordinate rules, validation and explicit reload/apply workflow.

AI Copilot

Configure provider servers, understand data flow and review proposed document changes.

MCP integration

Connect an external agent to this deployment's hosted HTTP endpoint using exact tool contracts.

1. Getting Started Guide: Your first 5 minutes with Vinyasa.
2. Full Feature Guide: Comprehensive documentation of all tools and panels.
3. Element Reference Library: Detailed specs for every component from buttons to complex charts.
4. Live Demos: See real-world examples of Vinyasa-designed interfaces.