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

# Design with Canvas

> Explore design variations on the Canvas, pick a direction, and apply it to your app.

⏰ *Estimated time: 5 minutes* · Follows from [Build your first app](/getting-started/quickstarts/ask-ai)

The **Canvas** is a visual space where you can explore multiple design directions before building your app. Generate mockups, compare them side by side, and apply the one you like.

## Before you begin

You'll need an existing app on Replit — from the [Build your first app](/getting-started/quickstarts/ask-ai) quickstart or any project.

<Tip>You can also start fresh — just create a new project and describe your idea to Agent first.</Tip>

## Design your app

<Steps>
  <Step title="Explore design variations">
    Open the **Canvas** tab in the Project Editor, then click **Reimagine**. A dropdown gives you quick prompts to explore different directions.
    Pick "Try different layouts" and Agent generates multiple design mockups on the Canvas.

    <Frame>
      <video autoPlay muted loop playsInline src="https://cdn.replit.com/sanity/try_different_layouts-with_canvas.mp4" />
    </Frame>

    Here are all the options available:

    * 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

    Or, you can simply ask Agent to generate variations in your own words:

    ```
    Show me a dark theme, a minimal theme, and a colorful theme on the Canvas
    ```

    <Frame>
      <img src="https://mintcdn.com/replit/4_vaMd7KiBnniEFb/images/getting-started/quickstart_design_canvas_variations.png?fit=max&auto=format&n=4_vaMd7KiBnniEFb&q=85&s=2c848f63eeb54bd4af9a9302b310aa50" alt="Canvas showing multiple design variations side by side" width="2538" height="1428" data-path="images/getting-started/quickstart_design_canvas_variations.png" />
    </Frame>
  </Step>

  <Step title="Pick a direction">
    Browse the variations and choose the one that fits your vision. You can ask Agent to refine a specific variation before committing:

    ```
    I like the second one, but make the header bigger
    ```
  </Step>

  <Step title="Apply to your app">
    Once you're happy with a design, ask Agent to apply it:

    ```
    Apply this design to my app
    ```

    Agent updates your app's code to match the chosen design. Check the **Preview** tab to see the result.
  </Step>

  <Step title="Publish your updated app (optional)">
    Click **Publish** in the Project Editor to push the new design live. Your existing URL stays the same. Visitors will see the updated version immediately.

    <Frame>
      <video autoPlay muted loop playsInline src="https://cdn.replit.com/sanity/quickstart-publish-app.mp4" />
    </Frame>

    Learn more about publishing in [Publish your app](/getting-started/quickstarts/publish).
  </Step>
</Steps>

## Next steps

<CardGroup cols={2}>
  <Card title="Canvas" icon="palette" href="/replitai/canvas">
    Deep dive into Canvas features and workflows.
  </Card>

  <Card title="Visual Editor" icon="pen-ruler" href="/replitai/visual-editor">
    Make fine-grained tweaks to colors, text, and layout.
  </Card>

  <Card title="Expand your project" icon="layer-group" href="/getting-started/quickstarts/expand-your-project">
    Add a mobile app, slide deck, or other artifacts to your project.
  </Card>
</CardGroup>