How to move a Rocket (rocket.new) site into Webflow

At a glance

Steps

Copy to Webflow on Rocket's preview or published site → ⌘V (Ctrl+V) in the Webflow Designer.

Where the button shows

In the Rocket editor on the live preview, and on published sites at *.builtwithrocket.new.

What Rocket makes

Websites and landing pages in Next.js (the default since February 2026), web apps in Next.js with TypeScript and a Supabase backend, mobile apps in Flutter.

Rocket's own export

Download a .zip from Code View, or sync to GitHub. Both need Rocket Pro or above. Webflow imports neither.

Not carried over

Supabase data and auth, API logic, routing between pages, Flutter mobile screens.

Plan

Each copy counts as a capture: 3 a day on FlowPaste Free, unlimited on Pro. Works on Rocket's free plan too, since you copy from the preview.

Why a Rocket site can't go into Webflow as code

Rocket builds a lot more than landing pages. It makes web apps, iOS and Android apps, and runs market research (Solve) before you build. Since February 2026, new landing pages and websites are built with Next.js and the framework choice is gone. Web apps use Next.js with TypeScript and Supabase as the backend; mobile apps use Flutter.

Webflow can't read any of that. Its Help Center says a move into Webflow is "a rebuild, not a transfer", and importing code is an open request on the Webflow Wishlist. Rocket's code export (a .zip from Code View, or GitHub sync) is meant for developers who keep working in their own editor. It needs a paid Rocket plan and still leaves you with a Next.js project, not Webflow elements.

The part a Webflow designer needs is the page as it looks: the layout, the type, the spacing, the hover states. Rocket's live preview and its published site both show exactly that. FlowPaste copies it. 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.

This pairs well with Rocket's Redesign commands: paste a URL, let Rocket rebuild it with a new look, then move the result into Webflow where your marketing team can edit it without prompting.

“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

Rocket's GitHub sync is two-way for Next.js TypeScript projects and push-only for other frameworks. Code download and sync need Pro or above, per Rocket's docs.

How to copy a Rocket page into Webflow

Time: about 2 minutes per page. You need: the FlowPaste Chrome extension, your Rocket project (editor or published site), a Webflow site open in the Designer.

1. Open the project in Rocket

   Open the project so the live preview shows the page you want. Or open your published site (your-app.builtwithrocket.new) in its own tab.

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

2. Set the page to the state you want

   Close menus and pop-ups, pick the first tab of any tabs, and scroll back to the top. FlowPaste copies what the preview shows when you click.

3. Click Copy to Webflow

   The button sits at the bottom right of the live preview (or of the published page). 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 in order 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 pastes upload images to Assets.

6. Copy the other pages and relink

   Open each page in Rocket and copy it the same way. Then point the links in your nav and buttons at the matching Webflow pages.

What comes across

Redesign in Rocket, publish in Webflow

1. Home → Redesign → paste your current site's URL
2. Refine the new look in chat and visual edit
3. Launch → Staging → Publish  (your-app.builtwithrocket.new)
4. Copy to Webflow on the preview or the published page

Section            class: hero
  Heading H1       class: hero-heading
  Link Block       class: hero-cta        (+ Hover)
Section            class: testimonials
  Div Block ×3     class: testimonial-card
Section            class: contact
  Form Block       class: contact-form

Problems and fixes

Split the app and the marketing site

Rocket is strongest at full apps with data and logins. Webflow is strongest at pages your marketing team edits every week. Use both:

1. Keep the product on Rocket. Leave the logged-in app, Supabase data and payments on Rocket's hosting, on a subdomain such as app.example.com.
2. Move the marketing pages to Webflow. Copy the home page, pricing, features and about pages with FlowPaste, and publish them on www.example.com from Webflow.
3. Point sign-up buttons at the app. Set every Sign up and Log in link in Webflow to the matching app.example.com URL.
4. Move the blog into the CMS. If Rocket generated blog posts, create a Webflow CMS Collection and paste one captured post to design the template.
5. Set up the domains last. Connect www.example.com in Webflow and keep the custom domain for the app on Rocket's Production tab (Pro or above).

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.
• Relink every nav item and button to its Webflow page or to your app subdomain.

Questions