Skip to main content

Documentation Index

Fetch the complete documentation index at: https://canvas-docs.vibeflow.ai/llms.txt

Use this file to discover all available pages before exploring further.

Exports give you files. Promote to app gives you a living app. The selected frames become real React components in a Vite + React + Tailwind project, deployed to vibeflow.build (or your custom domain), with the same editor and the same agent you’d use on any UI project. This is the “ship it” path.

​
When to use it

Use casePick
Send a stakeholder a one-off PNGExport PNG
Hand off code for a developer to integrateExport React
Run the design as a real, deployed, iterable appPromote to app
The frames stop being canvas artboards and start being a deployable surface you can refine, deploy, and update.

​
How it works

1

Select frames

Pick the frames you want to ship. One frame for a single landing page, multiple frames for a multi-page app.
2

Open Add to app

Right sidebar → Add to app (or right-click → Add to app).
3

Pick a target

Two options:
  • New project. Creates a fresh UI project (costs 1 credit). The agent scaffolds a Vite + React + Tailwind project and drops your frames in as components.
  • Existing project. Merges into a UI project you already have in this org. Useful when you’ve been iterating on something and want to add a new page.
4

Wait for the merge

The client converts each selected frame’s HTML into React + Tailwind, packages the file tree, and writes it into the target project’s storage. A Daytona sandbox picks it up and hot-reloads.
5

Open the UI editor

You land in the UI editor at /project/:id with your frames as live pages. Same chat-driven workflow, same export options, plus deploy.

​
What lands in the project

SourceWhat you get
Each promoted frameA <FrameName>.tsx page component using Tailwind
Cross-frame layoutA simple router (App.tsx) wiring each frame to a route
BrandTailwind config seeded from the canvas’s attached design system
AssetsImages uploaded to the project’s asset folder
The output project is a standard, editable Vite + React app. Nothing exotic. You can git clone it, run it locally, deploy it elsewhere.

​
Connected apps

Every promote creates a link between the source frames and the target project. The canvas right sidebar surfaces this under Connected apps with sync state per link:
  • In sync. The project has the latest version of every promoted frame.
  • Stale. You’ve edited a frame on the canvas since the last promote. Re-promote to push the update.
  • Never synced. The link exists but no merge has happened yet.
Re-promote always picks the same target by default, so the update path is one click.

​
Deploying

Promote does not deploy on its own. After promoting, the UI editor has a Deploy button in the top bar. Click it and the project ships to:
  • your-project.vibeflow.build by default
  • A custom domain you’ve attached at the project level
Subsequent deploys replace the previous one at the same URL. Your shareable link is stable. For the deploy mechanics, the deploy is a UI-product feature. The full UI docs at docs.vibeflow.ai cover deploy, publishing, custom domains, and rollback.

​
A few honest constraints

The target is a static React + Vite + Tailwind project. No backend, no database, no auth. If you need server logic, add it after promote, in the UI editor.
Most frames convert one-to-one. A frame that uses obscure CSS (@container queries, :has selectors, mask-composite) may need a follow-up touch in the UI editor. Tell the agent in the UI editor “clean this up” and it will normalize it.
The source frames stay on the canvas. The project is a copy. If you keep editing the canvas, the project is “stale” until you re-promote.

​
Next

MCP overview

Trigger canvas runs and promotes from your editor.