At a glance
- Steps
- Copy to Webflow on the Preview pane → ⌘V in the Webflow Designer.
- Where the button shows
- replit.com (the Preview pane), published *.replit.app sites and *.replit.dev preview tabs.
- Can Webflow import a Replit project?
- No. Webflow can't import code or sites. A move is a rebuild, unless you copy the rendered page.
- Replit's own export
- Download as zip from the file tree menu, or connect a GitHub repository in the Git pane.
- Not carried over
- The server, database, login, API calls and React state. The paste shows the page as it looks when you copy.
- Best split
- Marketing pages on Webflow (www), the working app on Replit (app subdomain).
- Plan
- Each copy counts as a capture: 3 a day on Free, unlimited on Pro.
Why a Replit App doesn't paste into Webflow on its own
Replit is a full development environment. When you describe an idea, Agent writes a real project: a frontend, often a server, and later a database, login and integrations. Replit's own guide shows the layout: "your conversation with Agent on one side, and a live preview of your app on the other." That preview is your code running, not a design file.
Webflow can't read any of it. There's no code or site import in the Designer, and Webflow's Help Center says moving a site in is "a rebuild, not a transfer". Downloading the zip gives you source files that a browser builds into a page, but the Designer has nowhere to put them. A Code Embed would hold the markup, but you couldn't edit it in the Style panel.
FlowPaste skips the source and copies the result. The Preview pane has already run the code and drawn the page, so FlowPaste reads it 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. Replit's editor chrome around the preview isn't copied, only your page.
“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
| Method | Editable in Webflow | Responsive | Time for one page | Best for |
|---|---|---|---|---|
| Download as zip (or ask Agent for one plain HTML file), then Convert | Yes | Yes | 10–20 minutes | When you want to clean up the code before it reaches Webflow |
| Code Embed element | No. The code stays code | Only if the code is | Minutes | Widgets and scripts you won't edit |
| Rebuild by hand in the Designer | Yes | Yes, if you build it | 2–6 hours | Small pages, or a full redesign |
| Keep the whole site on Replit with a custom domain | Only by prompting Agent or editing code | Yes | None | When nobody on the team needs Webflow's editor |
| FlowPaste: Copy to Webflow on the Preview pane | Yes: native elements and classes | Yes: tablet and mobile breakpoints | Under a minute per page | Landing, pricing and about pages Agent built |
A Replit project is usually a full app with a server, so the zip is source code, not a finished page. FlowPaste's Convert tab renders React and JSX it is given, but copying the running preview is the more reliable route for Agent-built projects.
How to copy a Replit page into Webflow
Time: about 3 minutes per page. You need: the FlowPaste Chrome extension, your Replit App open on replit.com, a Webflow site open in the Designer.
Open your Replit App and start it
Open the project on replit.com and wait until the Preview pane shows your app running. If it shows a blank page or an error, ask Agent to fix that first: FlowPaste copies what the preview shows.
TipCheck the mobile layout before you copy. Replit's own guide suggests resizing Preview to a phone-sized width; FlowPaste reads the responsive rules either way.
Go to the page you want
Use the links inside the preview to reach the page you want to move (home, pricing, about). Routing between pages doesn't come across, so you copy each page on its own.
Click Copy to Webflow
The button sits at the bottom right of the Preview pane. The main click copies the whole page: every section, in order.
TipTo copy one part, open the arrow menu next to the button and choose Pick a section. Hover the page, press ↑ to select a bigger area, and click.
Or copy from the published site
Open your replit.app address, or open the preview in its own tab (a replit.dev address). The same button appears there. Logged-in pages work too, as long as you are signed in to your app in that tab.
Paste in the Webflow Designer
Switch to the Designer, click the Body or the element you want to paste into, and press ⌘V (Ctrl+V). A whole page pastes section by section in the right order.
Add fonts and connect images
Add the fonts FlowPaste lists in Site settings → Fonts. Connect your site in FlowPaste → Account → Webflow images so pastes upload their images to Webflow Assets.
What comes across
| In your Replit App | In Webflow | Notes |
|---|---|---|
| Page layout (flex, grid, spacing) | Sections and Div Blocks with classes | Names come from structure: hero-heading, pricing-card |
| Utility classes (if the code uses Tailwind) | Compiled into named classes | No long utility lists on each element |
| Responsive rules | Tablet, mobile landscape, mobile portrait | Widths Webflow doesn't have snap to the nearest one |
| Hover and focus styles | Hover and Focus states | |
| Images in the project or from a CDN | Image elements | Uploaded to Webflow Assets when your site is connected |
| Icon components (inline SVG) | Embed elements | Editing their code needs a paid site plan |
| Contact or waitlist form | Webflow Form Block | Submissions go to Webflow, not your Replit server |
| Fade-in-on-scroll reveals | Visible content with a small scroll animation script | |
| Server routes, database, login | Not copied | Keep them on Replit |
| Data loaded from your API | The values shown when you copy | Replace with static text or a CMS Collection |
Two places to copy from
1. replit.com → your App → Preview pane → Copy to Webflow (bottom right) 2. your-app.replit.app (published) or the replit.dev preview opened in a new tab → Copy to Webflow 3. Any other page: FlowPaste icon → Capture the full page
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: waitlist Form Block class: waitlist-form
Problems and fixes
I don't see the Copy to Webflow button
Reload the Replit tab after installing or updating FlowPaste. The preview must be at least 320 × 220 px, so widen the Preview pane if you shrank it. If you closed the button with ✕, reload the page.
The paste is empty or shows a loading screen
FlowPaste copies what the preview shows at that moment. Wait until the app has loaded its data, or until Agent has finished a change, then copy again.
A page behind login didn't copy
Open the published replit.app site in its own tab, sign in to your app, go to the page and use the button there. FlowPaste copies the design only; the account data you see is pasted as static text.
A tab, accordion or menu is in the wrong state
React state isn't carried over. Set the page the way you want it (first tab open, mobile menu closed), then copy. Build the open and close behavior with Webflow Interactions.
Fonts look different
Add the fonts FlowPaste lists in Site settings → Fonts. Until you do, text that brought its own font file still shows correctly, but the font isn't in the Typography panel.
Images break on the published Webflow site
Images that point to your replit.dev preview stop working when the preview stops. Connect your site in FlowPaste → Account → Webflow images and copy again so they upload to Webflow Assets.
Keep the app on Replit, move the marketing site to Webflow
Most Replit Apps are products: a dashboard, a booking tool, an internal app. Webflow is a website builder, not an app host. Split them so each tool does what it's good at.
- Decide what moves. Public pages (home, pricing, about, blog, legal) move to Webflow. Anything that needs a login, a database or your server stays on Replit.
- Copy the public pages. Copy each page from the Preview pane or the replit.app site with FlowPaste. Turn the header and footer into Webflow Components.
- Point the domains. Use www.example.com for Webflow and app.example.com for Replit. Replit's custom domain setup gives you the DNS records to add; Webflow gives you its own for www.
- Link them together. Point Sign in and Get started buttons in Webflow to your app subdomain. Set your app's logout link back to the Webflow site.
- Move forms. Waitlist and contact forms become Webflow Form Blocks. If they must write to your Replit database, send them there with a webhook or keep that form on Replit.
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.
- Point every Sign in and Get started link to your app subdomain on Replit.
- Publish to your webflow.io staging domain and check animations and scripts there. Scroll-triggered Interactions don't always play inside Designer Preview.
Questions
Can I export Replit code to Webflow?
Not as code. Replit lets you download a project as a zip or sync it to GitHub, but Webflow can't import either. Copy the rendered page with FlowPaste instead, or paste a single HTML file into FlowPaste's Convert tab.
Will my app or backend work in Webflow?
No. Webflow hosts websites, not servers. Your server, database, login and API calls stay on Replit. Only the design of each page comes across.
Does it work with the replit.dev preview URL?
Yes. Open the preview in its own tab and the Copy to Webflow button appears there. Replit's docs say development URLs are temporary, so make sure images are uploaded to Webflow Assets, not linked to that address.
Does it work with Replit's Design mode?
FlowPaste copies what the Preview pane shows. Once a design becomes a working app in your project, copy it from the preview like any other page.
Can I copy every page at once?
No. Routing between pages doesn't come across, so you copy one page at a time. One click copies all sections of that page, and one ⌘V pastes them in order.
Do I need to stop paying for Replit?
Only if you move everything. If you keep the app on Replit and the marketing site on Webflow, you keep both. A site that's only marketing pages can move fully to Webflow.
Sources
- Replit Docs: Projects and files (Download as zip, Git pane) — "Open the three-dot menu at the top of the file tree and choose Download as zip."
- Replit Docs: Development URLs — "Development URLs are temporary and intended for testing only."
- Replit Docs: Publish your app (replit.app domain, deployment types) — "Publishing is available on every plan."
- Replit Docs: Add a custom domain
- Replit Docs: Project Editor — "your conversation with Agent on one side, and a live preview of your app on the other"
- Replit Docs: What is Replit Design
- Webflow Help: Migrate your site to Webflow overview — "migrating to Webflow will be a rebuild, not a transfer"
- Webflow Wishlist: Import an existing site, or existing code, into the Webflow Designer