{}

{
    const ta = e.currentTarget;
    ta.style.height = "auto";
    ta.style.height = ta.scrollHeight + "px";
    updateAgentInputButtonState(findAgentInputContainer(ta));
  }} style={{
    display: "block",
    width: "100%",
    minHeight: "21px",
    maxHeight: "calc(14px * 1.5 * 10)",
    padding: 0,
    margin: 0,
    border: "none",
    outline: "none",
    resize: "none",
    fontSize: "14px",
    lineHeight: "1.5",
    color: "var(--ai-text-primary)",
    background: "transparent",
    fontFamily: "inherit",
    boxSizing: "border-box",
    overflowY: "auto"
  }} />
          </div>
          {}
          <div style={{
    position: "absolute",
    left: "8px",
    right: "8px",
    bottom: "8px",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center"
  }}>
            {}
            <div style={{
    display: "flex",
    alignItems: "center",
    gap: "8px",
    overflow: "hidden",
    minWidth: 0
  }}>
              <button className="ai-icon-btn" style={iconBtnStyle} aria-label="Add attachment" type="button">
                {PlusIcon}
              </button>
              <div id="agent-input-pills" data-agent-input-role="pills" style={{
    display: "flex",
    alignItems: "center",
    gap: "6px",
    overflow: "hidden"
  }}></div>
            </div>
            {}
            <div style={{
    display: "flex",
    alignItems: "center",
    gap: "8px",
    flexShrink: 0
  }}>
              {highlightPlan ? <div className="ai-plan-wrap" onClick={e => {
    const wrap = e.currentTarget;
    wrap.classList.toggle("ai-plan-off");
  }}>
                  <label className="ai-plan-btn-highlight" style={{
    display: "flex",
    alignItems: "center",
    gap: "6px",
    height: "32px",
    padding: "0 8px",
    cursor: "pointer",
    fontSize: "12px",
    fontFamily: "inherit",
    transition: "background 120ms ease-out"
  }}>
                    <input className="ai-plan-checkbox-input" type="checkbox" aria-label="Plan mode" name="Plan mode" defaultChecked />
                    <span>Plan</span>
                  </label>
                </div> : <label className="ai-plan-checkbox-label">
                  <input className="ai-plan-checkbox-input" type="checkbox" aria-label="Plan mode" name="Plan mode" />
                  <span>Plan</span>
                </label>}
              <button className="ai-icon-btn" style={iconBtnStyle} aria-label="Start voice input" type="button">
                {MicIcon}
              </button>
              {highlightStart ? <div className="ai-start-wrap">
                  <button data-agent-input-role="start-button" className="ai-icon-btn ai-start-btn-highlight" onClick={handleStartClick} type="button" aria-label="Start" style={{
    ...iconBtnStyle,
    borderRadius: "6px",
    background: "#0079F2",
    color: "#fff",
    opacity: defaultPrompt ? "1" : "0.4",
    cursor: defaultPrompt ? "pointer" : "not-allowed"
  }}>
                    {ArrowUpIcon}
                  </button>
                </div> : <button data-agent-input-role="start-button" className="ai-icon-btn" onClick={handleStartClick} type="button" aria-label="Start" style={{
    ...iconBtnStyle,
    background: "#0079F2",
    color: "#fff",
    opacity: defaultPrompt ? "1" : "0.4",
    cursor: defaultPrompt ? "pointer" : "not-allowed"
  }}>
                  {ArrowUpIcon}
                </button>}
            </div>
          </div>
        </div>
      </div>
    </div>;
};

## What is the Canvas?

The Canvas is a space to explore and iterate on designs with Agent. Here, you'll see your artifacts — such as apps, videos, and slides — displayed in a frame. You can work with Agent to create mockups, compare design directions, and apply changes back to your app — all from one visual board.

## What's on the Canvas

The Canvas is an infinite board where you can see and work with everything visually.

* **Your apps**: Your running apps appear as live, interactive previews right on the Canvas. You can click around and use them just like you would in a browser.
* **Design mockups**: Visual prototypes Agent creates for you. These look and feel like real pages — you can interact with them, resize them, and ask Agent to tweak them — but they're separate from your live app so you can experiment freely.
* **Shapes and drawings**: Rectangles, circles, stars, arrows, hearts, and more. Use these to sketch rough ideas, mark up designs, or map out how screens connect.
* **Text and sticky notes**: Add labels or notes anywhere on the Canvas to organize your thoughts.
* **Images**: Drop screenshots or reference images onto the Canvas. Agent can recreate or riff on what it sees.
* **Videos**: Place video files on the Canvas alongside your other content.

### Getting designs on the Canvas

There are a few ways to start creating designs. Pick whichever feels most natural.

<Steps>
  <Step title="Ask Agent in chat">
    Type what you want to see in the chat input and Agent places it as an interactive frame on the Canvas.

<Step title="Pick an output type">
    You can also choose what kind of output you want — web, mobile, slides, design, and more. Use the carousel to pick before sending your prompt.

<Step title="Bring an existing page onto the Canvas">
    Already have a live app? Ask Agent to pull a page onto the Canvas for a redesign — for example, "Put my dashboard on the canvas." Agent makes a copy so your live app stays untouched.
  </Step>
</Steps>

## Making changes

Once you have a design on the Canvas, there are several ways to iterate on it.

### Ask Agent for updates

Select a frame on the Canvas and type your changes in the input that appears below it. When you press enter, Agent picks up the request, runs the updates, and refreshes the mockup right on the Canvas.

### Draw and annotate

Use the drawing tools in the bottom toolbar to sketch directly on the Canvas. Draw arrows pointing to what you want changed, circle problem areas, or add text notes with your feedback. Then ask Agent to make the changes based on your annotations.

### Preview on different devices

See how your designs look on different screen sizes. Ask Agent to show you a mobile, tablet, or desktop version:

* **Mobile** — 390 × 844
* **Tablet** — 768 × 1024
* **Desktop** — 1280 × 720

For example, "Show me the mobile version of this page" and Agent renders it at that size.

### Apply changes to your app

When you're happy with a design, apply the changes back to your main version. Agent shows you a summary of what was done and gives you the option to apply or dismiss.

## Comparing design directions

When you're not sure which direction to go, ask Agent to generate multiple versions so you can compare them side by side.

* **Multiple versions of one page**: "Show me five versions of this landing page." Agent creates each one and lays them out next to each other.
* **Multi-page flows**: "Design a complete onboarding flow: welcome, profile setup, preferences, and confirmation." Agent builds each screen and arranges them in order.
* **Mix and match**: "Show me the landing page and pricing page in both a minimal and a bold style." Agent creates every combination so you can see the full picture.

## Mapping out user flows

Lay out complete user journeys on the Canvas — sign-up, onboarding, dashboard, settings — and arrange them to see how everything connects.

* Place each screen as a separate frame
* Ask Agent to generate the full flow: "Draw out the complete onboarding flow for my app"
* Use arrows and shapes to show how users move between screens
* Ask Agent to turn rough sketches into polished designs

## Turning a design into a real app

When you're happy with a design and want to make it real, there are two paths:

### Make it a full app

If your design needs real functionality — like saving data, user accounts, or connecting to other services — ask Agent to turn it into a full app. Say something like "Make this a real app" or "Add a backend to this." Agent builds everything it needs to work as a real, publishable app.

<Note>
  Turning a design into a full app requires a paid plan.
</Note>

### Convert it to a specific type

You can also convert a design frame into a specific artifact type:

<Steps>
  <Step title="Select a frame">
    Click on the frame you want to convert.
  </Step>

<Step title="Ask Agent to convert">
    Tell Agent what you want — for example, "Convert this into a web app" or "Turn this into slides."
  </Step>

<Step title="Pick a type">
    Choose from web app, mobile app, slides, data visualization, and more.
  </Step>
</Steps>

## Frequently asked questions

<Accordion title="Are design frames the same as my running app?">
  No. Design frames are visual prototypes — they look and feel like the real thing, but they don't have a working backend or database behind them. Your app previews on the Canvas, on the other hand, are your actual running app.
</Accordion>

<Accordion title="Can I redesign a page without breaking my live app?">
  Yes. Ask Agent to bring a page onto the Canvas — for example, "Put my dashboard on the canvas." Agent makes a copy you can experiment with. Your live app isn't affected until you choose to apply the changes.
</Accordion>

<Accordion title="How do I turn a design into a real app?">
  Ask Agent to make it a full app ("Make this real") or convert it to a specific type ("Convert this to a web app"). Agent builds everything it needs to become a working, publishable app.
</Accordion>

<Accordion title="Can I convert to types other than web apps?">
  Yes. You can turn Canvas frames into web apps, mobile apps, slides, data visualizations, and more.
</Accordion>

<Accordion title="Can I import designs from Figma or other tools?">
  Yes. There are a few ways to bring Figma designs into Replit:

* **Import from Figma**: Go to [replit.com/import](https://replit.com/import), connect your Figma account, and paste a frame URL to convert a design into a working React app. See the [Import from Figma quickstart](/getting-started/quickstarts/import-from-figma) for details.
  * **Figma MCP in Agent chat**: Paste a Figma link directly into Agent chat and ask it to generate code, extract design data, or build out a component from the design. See the [Figma MCP Integration](/replitai/mcp/figma) guide.
  * **Screenshot reference**: Drop a screenshot onto the Canvas and ask Agent to recreate the design from it.
</Accordion>

<Accordion title="What else can I put on the Canvas?">
  Besides design mockups and app previews, you can add shapes, arrows, text labels, sticky notes, images, and videos — useful for sketching ideas, annotating designs, or organizing your thinking.
</Accordion>

## Availability

The Canvas is available on all plans, including frame creation, inline editing, variant generation, and conversion to artifacts. Turning designs into full apps requires a paid plan.