How to move a Gemini Canvas design into Webflow

At a glance

Steps

Copy to Webflow on the Canvas preview → ⌘V in the Webflow Designer.

Where the button shows

On the Canvas preview at gemini.google.com. Canvas has no separate published site, so there is no own-tab button.

What Canvas makes

Google says you can "generate and preview your HTML/React code and other web app prototypes".

Code route

Click Code at the top right of the Canvas panel, copy it, and paste it into FlowPaste's Convert tab.

Shared links

g.co/gemini/share links open only on gemini.google.com, not as a standalone site.

Not carried over

React state, scripts, and app data or AI features you added in Canvas.

Plan

Each copy counts as a capture: 3 a day on Free, unlimited on Pro.

Why Gemini Canvas needs a different route

Gemini Canvas is a workspace inside the Gemini app. You ask for a page, and Gemini writes HTML or React code and shows it running next to the chat. Google's announcement says you can "generate and preview your HTML/React code and other web app prototypes" there, and its Help Center describes a Code view where "you can edit the code directly".

Unlike Lovable or Replit, Canvas doesn't publish your page as a website on its own address. Sharing gives a g.co/gemini/share link, and Google's Help Center says "Shared links only open in gemini.google.com." So the page only ever exists inside Gemini, which makes it easy to show but hard to ship. Webflow can't import the code, and a Code Embed would leave you with a box you can't edit.

FlowPaste copies the Canvas preview after Gemini has run the code. FlowPaste reads the page the way your browser shows it: the elements, every CSS rule that applies to them, the media queries and the hover states. It then writes Webflow's own clipboard format, so ⌘V (Ctrl+V) in the Designer creates real elements with named classes. Gemini's chat, toolbar and console around the preview are left out.

“Regardless of where your site is hosted today, migrating to Webflow will be a rebuild, not a transfer.”

Webflow Help Center

Ways to do it, compared

How to copy a Gemini Canvas design into Webflow

Time: about 2 minutes. You need: the FlowPaste Chrome extension, your Gemini chat with the Canvas open, a Webflow site open in the Designer.

1. Build the page in Canvas

   At gemini.google.com, choose Canvas from the menu below the prompt box and describe your page. Ask for one page with all its sections. Keep refining it in the chat until it looks right.

   TipTell Gemini the fonts and colors you use in Webflow, or turn on Match my site in FlowPaste so the paste uses your site's fonts and colors.

2. Make the preview big enough

   The Canvas preview sits next to the chat. Widen the browser window or the Canvas panel so the preview is at least 320 × 220 px; a wider preview also shows the desktop layout.

3. Click Copy to Webflow

   FlowPaste's button sits at the bottom right of the Canvas preview. The main click copies the whole page, every section in order.

   TipTo copy one part, open the arrow menu and choose Pick a section. Hover the design, press ↑ for a bigger area, and click.

4. Or use the code

   Click Code at the top right of the Canvas panel, select all the code and copy it. In the Webflow Designer, open the FlowPaste panel, paste into Convert, check the preview and click Convert & copy.

5. Paste in the Webflow Designer

   Click the Body or the element to paste into, then press ⌘V (Ctrl+V). A whole page pastes section by section.

6. Fonts, images and breakpoints

   Add the fonts FlowPaste lists in Site settings → Fonts. Connect your site in FlowPaste → Account → Webflow images so images upload to Assets. Click through tablet and mobile.

What comes across

Two ways in

1. gemini.google.com → your chat → Canvas preview
   → Copy to Webflow (bottom right)
2. Canvas panel → Code → copy all
   → FlowPaste panel in Webflow → Convert → Convert & copy

Section            class: hero
  Heading H1       class: hero-heading
  Link Block       class: hero-button  (+ Hover)
Section            class: features
  Div Block ×3     class: feature-card
Section            class: footer

Problems and fixes

From Gemini prototype to a Webflow site

Canvas is a quick place to try a page. It isn't a website host, so Webflow is where the page goes live.

1. Settle the design in Gemini. Iterate in the chat until the page is right. Ask for every page you need, one at a time.
2. Copy each page. Copy each Canvas preview into its own Webflow page. Turn the shared header and footer into Components.
3. Replace sample content. Swap Gemini's placeholder text and images for real ones, and turn repeated items into CMS Collection Lists.
4. Keep apps separate. If your Canvas is an app (with data or AI features), it won't run in Webflow. Rebuild it in a tool that hosts apps, such as Google AI Studio, and link to it from your Webflow site.

After you paste

• Add the fonts in Webflow → Site settings → Fonts. FlowPaste lists them in the notes after each conversion. Until then, text that brought its own font file still shows correctly, but you can't pick the font in the Typography panel.
• Images: Webflow publishes images only from its own Assets. Connect your site once in FlowPaste → Account → Webflow images, and every paste uploads its images for you. Without it, images show in the Designer but break on the published site.
• Click through tablet, mobile landscape and mobile portrait in the Designer. Media queries are already mapped to those breakpoints; check anything the notes marked as "snapped".
• Rename or merge classes where you want your own system. Identical styles already share one class; variations are combo classes.
• Look for Embed elements (inline SVG icons, pseudo-elements, leftover scripts). They show on every plan; editing their code needs a paid site plan.
• Replace placeholder text and images Gemini added with your real content.
• Publish to your webflow.io staging domain and check animations and scripts there. Scroll-triggered Interactions don't always play inside Designer Preview.

Questions