> ## 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.

# Promote to app

> Turn one or more frames into a deployed Vite + React project on your domain.

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 case                                         | Pick               |
| ------------------------------------------------ | ------------------ |
| Send a stakeholder a one-off PNG                 | Export PNG         |
| Hand off code for a developer to integrate       | Export React       |
| Run the design as a real, deployed, iterable app | **Promote to app** |

The frames stop being canvas artboards and start being a deployable surface you can refine, deploy, and update.

***

## How it works

<Steps>
  <Step title="Select frames">
    Pick the frames you want to ship. One frame for a single landing page, multiple frames for a multi-page app.
  </Step>

  <Step title="Open Add to app">
    Right sidebar → **Add to app** (or right-click → **Add to app**).
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>
</Steps>

***

## What lands in the project

| Source              | What you get                                                    |
| ------------------- | --------------------------------------------------------------- |
| Each promoted frame | A `<FrameName>.tsx` page component using Tailwind               |
| Cross-frame layout  | A simple router (`App.tsx`) wiring each frame to a route        |
| Brand               | Tailwind config seeded from the canvas's attached design system |
| Assets              | Images 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](https://docs.vibeflow.ai) cover deploy, publishing, custom domains, and rollback.

***

## A few honest constraints

<AccordionGroup>
  <Accordion title="Promote is frontend-only">
    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.
  </Accordion>

  <Accordion title="HTML to React conversion is lossy in rare cases">
    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.
  </Accordion>

  <Accordion title="Promote creates a project — it doesn't move frames">
    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.
  </Accordion>
</AccordionGroup>

## Next

<Card title="MCP overview" icon="plug" href="/mcp/overview">
  Trigger canvas runs and promotes from your editor.
</Card>