How to copy an Onlook design into Webflow

At a glance

Steps

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

Where the button shows

Onlook's editor and published *.onlook.live pages.

What Onlook edits

Next.js and Tailwind CSS projects. Its code is the source of truth.

Tailwind

Utility classes are compiled into named Webflow classes (hero-heading, pricing-card), not pasted as utilities.

Not carried over

React state, Next.js routing, data fetching and API routes. Each page is copied as it looks.

Plan

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

Why an Onlook project doesn't drop into Webflow

Onlook is an open-source visual editor for code. You design on a canvas, but every change is written back into a real Next.js and Tailwind CSS project. Onlook's own pages put it plainly: the code is the source of truth. That's the whole point of the tool, and it's also why Webflow can't take the result directly.

Webflow doesn't import code, repositories or Next.js apps. Its help center says a move to Webflow is a rebuild, not a transfer. Pasting a component into a Code Embed keeps the code as code: no Style panel, no classes, nothing a marketer can change.

Tailwind adds a second problem. An Onlook page is made of utility classes like flex, gap-6 and md:grid-cols-3. Rebuilt by hand in Webflow, each one turns into a guess. FlowPaste reads the finished page instead. 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. Tailwind utilities are compiled into a small set of named classes, and md: and lg: rules land on Webflow's breakpoints.

“Migrating to Webflow will be a rebuild, not a transfer.”

Webflow Help Center

Ways to do it, compared

How to copy an Onlook page into Webflow

Time: about 2 minutes. You need: the FlowPaste Chrome extension, your project open in Onlook (or its onlook.live link), a Webflow site open in the Designer.

1. Open the page in Onlook

   Open your project in the Onlook editor and go to the page you want. A published onlook.live preview link works too.

2. Set the state you want to copy

   FlowPaste copies what the preview shows. Close menus, open the first tab or accordion item, and switch off any test content.

   TipCopy from the desktop width. Tablet and mobile styles come along from the responsive rules, so you don't copy each size.

3. Click Copy to Webflow

   The button sits at the bottom right of the live preview. The main click copies the whole page: every section, in order.

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

4. Paste in the Webflow Designer

   Switch to the Designer, click where the page should go and press ⌘V (Ctrl+V). The sections paste in order as native elements.

5. Turn on Match my site (optional)

   If your Webflow site already has its own fonts and colors, use the Match my site option so the paste picks them up instead of the Onlook project's.

6. Add fonts and connect images

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

What comes across

From Tailwind utilities to Webflow classes

<section className="px-8 py-24 md:py-32">
  <h1 className="text-5xl font-semibold tracking-tight">…</h1>
  <div className="grid gap-6 md:grid-cols-3">
    <div className="rounded-2xl border p-6 hover:shadow-lg">…</div>
  </div>
</section>

Section            class: hero
  Heading H1       class: hero-heading
  Div Block        class: hero-grid      (3 columns ≥ tablet)
    Div Block ×3   class: feature-card   (+ Hover)

Problems and fixes

Onlook for the product, Webflow for the marketing site

Onlook keeps design and code in one repo, which is ideal for the product your engineers ship. Marketing pages change weekly and are often edited by people who don't touch git. That's where Webflow fits.

1. Split the domains. Serve the marketing site from www.example.com on Webflow and the app from app.example.com, hosted on Onlook or your own Next.js host. Onlook supports custom domains and lets you export the code to Vercel, Netlify or any Next.js host.
2. Copy the public pages once. Copy home, pricing and features from Onlook with FlowPaste. After that, Webflow is the source for those pages. The copy doesn't sync back to your repo.
3. Keep the design system close. Name the pasted classes after your Tailwind tokens where it helps, and turn shared parts (navbar, footer, CTA) into Webflow Components.
4. Move content to the CMS. Blog posts, changelogs and customer stories go into Webflow Collections so they don't need a pull request.
5. Link the two. Point Sign in and Get started buttons at app.example.com. Remove the old marketing routes from the Next.js app or redirect them.

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.
• Decide which copy is the source of truth for each page: Onlook (repo) or Webflow. They don't sync.
• Publish to your webflow.io staging domain and check animations and scripts there. Scroll-triggered Interactions don't always play inside Designer Preview.

Questions