Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.replit.com/llms.txt

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

⏰ Estimated time: 5 minutes · Follows from Build and publish your first app The Canvas is a visual workspace where you can ask Agent to generate alternative looks for an app you’ve already built, compare them side by side, and apply the one you want. It’s the fastest way to explore visual direction without committing to a rebuild. This guide uses the Runwell running tracker from Build and publish your first app as the running example, but the same flow works on any project.

​
Before you start

You need an existing app in Replit. Either:

​
Explore design variations

1

Open Canvas and pick your frame

Open the Canvas tab in the Project Editor. Your app appears as a frame on the Canvas. Select the frame to surface the Reimagine… and Preview controls.
The Runwell app shown as a frame on the Canvas, with Reimagine and Preview buttons available at the top of the frame
2

Reimagine the design

Click Reimagine… to open a menu of directions Agent can explore. Pick one — for Runwell, try Explore different vibes. Agent generates three aesthetic variations, each preserving the layout but shifting the visual feel.
The Reimagine menu open with options including Explore different vibes, Try different layouts, More like this but better, and others
The full set of directions:
  • Explore different approaches
  • Try different layouts
  • Explore different vibes
  • More like this, but better
  • Optimize for usability
  • Show me the opposite of this
  • Surprise me
You can also describe a direction in your own words instead of picking from the menu — for example, “show me a dark theme, a minimal theme, and a colorful theme”.
3

Compare the variants

Pan or zoom out on the Canvas to see the variations alongside the original. Compare them, and decide which direction you want to apply.
Three Runwell design variations on the Canvas alongside the original — Dawn Patrol, Track Day, and Zen Trail
If you want to refine one before committing, ask Agent — for example, “I like the second one, but make the header bigger.”
4

Apply the design to your app

Select the variant you want, then click Build… at the top of the frame. In the dialog, choose your existing app (e.g., Runwell) to apply the new design in place — rather than creating a separate copy.
The Build dialog showing two options: Build with this design (creates a new app) or apply to the existing Runwell app
Wait for Agent to apply the changes. When it finishes, select the updated frame on the Canvas and click Preview to see the result. Run through the same checks you did originally — for Runwell: save a run, confirm totals update, and resize Preview to a phone-sized width.
5

Publish the updated design (optional)

Happy with the new look? Publish from the Agent chat or the Publishing tile in the Tools & files panel. Your public URL stays the same — visitors see the updated version immediately.See the Publish your app step in Build and publish your first app if you need a refresher on the publishing flow.

​
What to try next

Canvas

Deep dive into Canvas features and workflows.

Visual Editor

Make fine-grained tweaks to colors, text, and layout.

Vibe coding 101

Learn how to guide Agent from idea to working app.