How to move an Emergent design into Webflow

At a glance

Steps

Copy to Webflow on Emergent's preview or deployed app → ⌘V (Ctrl+V) in the Webflow Designer.

Where the button shows

In the Emergent workspace on the live preview, and on deployed apps at *.emergent.app (and *.emergent.host).

What Emergent builds

Full-stack apps: a React frontend, a FastAPI backend and MongoDB, written by AI agents from your prompts. Also mobile apps.

Emergent's own export

Browse and copy files with the Code button (all plans), or Save to GitHub (Standard and above). Webflow imports neither.

Preview vs deployed

Separate environments with their own URLs. Copy from the one that shows the version you want.

Not carried over

The FastAPI backend, MongoDB data, logins, payments, environment variables and secrets.

Plan

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

Why an Emergent project doesn't fit into Webflow as it is

Emergent is an agent-based builder for full-stack apps. You describe what you want, and its agents write and run the code in a workspace. The result is a real application: Emergent's deploy tutorial describes it as "full-stack FastAPI + React + MongoDB". It can also generate landing pages with hero, features, pricing, FAQ and form sections, each wired to a database table in your project.

Webflow can't import that stack. There's no code import in the Designer, and Webflow's Help Center says moving in is "a rebuild, not a transfer". Emergent's own way out of its platform (Save to GitHub, or copying files from the Code button) is built for developers who host the app elsewhere. It still leaves you with React and Python, not Webflow elements.

But the design is already on screen. Emergent's preview runs the app, so every style and layout rule has been applied by the time you look at it. FlowPaste copies from there. 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.

That makes a clean split possible: the app keeps running on Emergent, and the marketing pages around it move to Webflow, where non-developers can edit text and publish without starting an agent run or spending credits.

“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

Emergent's GitHub integration starts on the Standard plan. The Code button works on every plan but gives you source files, not a page Webflow can read.

How to copy an Emergent page into Webflow

Time: about 2 minutes per page. You need: the FlowPaste Chrome extension, your Emergent project (workspace preview or deployed app), a Webflow site open in the Designer.

1. Pick preview or deployed

   Emergent's preview and deployed app are separate: changes in preview don't show on the live app until you deploy again. Open whichever one shows the version you want to move.

   TipInstalled or updated FlowPaste just now? Reload the Emergent tab so the button can appear.

2. Wait for the app to load its data

   Emergent pages can load their content from the backend. Let lists, pricing tables and testimonials finish loading, close pop-ups and menus, and scroll back to the top.

3. Click Copy to Webflow

   The button sits at the bottom right of the live preview, or of the page on your emergent.app address. The main click copies the whole page, every section in order.

   TipFor one section, open the arrow menu → Pick a section. Hover, press ↑ to grow the selection, and click.

4. Paste in the Webflow Designer

   Select the Body or the element you want to paste into and press ⌘V (Ctrl+V). The sections arrive as native elements with named classes.

5. Add fonts and connect images

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

6. Rewire forms and links

   Set each Form Block's notification email in Webflow, and point Sign up and Log in buttons at your Emergent app's address.

What comes across

From an Emergent landing page to Webflow

A typical Emergent landing page has a hero, features, pricing, an FAQ and a signup form tied to a database table. This is roughly what you see in the Navigator after one paste.

1. Prompt: "Landing page for a booking app with pricing and a waitlist form"
2. Check it in the workspace preview
3. Copy to Webflow on the preview
   (or on your-app.emergent.app after you deploy)

Section            class: hero
  Heading H1       class: hero-heading
  Link Block       class: hero-cta        (+ Hover)
Section            class: pricing
  Div Block ×3     class: pricing-card    (+ is-featured)
Section            class: faq
Section            class: waitlist
  Form Block       class: waitlist-form

Problems and fixes

Keep the app on Emergent, run the marketing site on Webflow

Emergent charges credits for each deployed app and each custom domain. A common split:

1. App on Emergent. Keep the logged-in product, its FastAPI backend and MongoDB data on Emergent, on a subdomain such as app.example.com.
2. Marketing site on Webflow. Copy the home, pricing, features and about pages with FlowPaste and publish them from Webflow on www.example.com.
3. Landing pages that were their own app. If an Emergent project is only a landing page, moving it to Webflow means it no longer needs its own Emergent deployment. Emergent's tutorial lists deployment at 50 credits a month per app.
4. Blog and changing content. Create Webflow CMS Collections for posts, case studies or testimonials, and paste one captured item to design the template.
5. Connect the two. Point every Sign up and Log in link in Webflow at app.example.com, and add the same analytics to both.

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.
• Replace lists that came from MongoDB with Webflow CMS Collection Lists where the content changes.
• Set every Form Block's notification email and redirect in Webflow.
• Publish to your webflow.io staging domain and check animations and scripts there. Scroll-triggered Interactions don't always play inside Designer Preview.

Questions