HTML to Webflow
in one paste.
For Webflow designers who build with AI. Paste code from ChatGPT, Claude or v0 and get real, editable Webflow. Not a code embed.
Webflow can't import your code. So you rebuild it. By hand.
ChatGPT builds the section in a minute. Getting it into Webflow takes the afternoon, because Webflow has no way to import HTML. People have asked for it on Webflow's wishlist for years. Today there are 3 ways in, and each one costs you something.
Every div. Every class. Every breakpoint. Again.
You copy the design one element at a time, and a landing page takes hours. Hire it out and rebuild gigs start at $80 a page; agencies charge $2,000 or more a site.
It works until somebody has to change it.
The Style panel can't see inside an Embed. Your client can't edit the text, the CMS can't connect to it, and big sections hit the Embed character limit. Webflow custom code vs native elements →
It makes something new, not the thing you already built.
Webflow's AI Site Builder, AI code components and Claude connector generate new layouts. None of them takes the design you already have and keeps its GSAP animations. Webflow AI vs pasting your AI code →
FlowPaste is the 4th way: paste the code, and it is Webflow now.
3 steps. About 10 seconds.
FlowPaste lives inside the Webflow Designer. Nothing to export, no Webflow app to install.
Open the panel
Open your site in Webflow and click the FlowPaste button (or press Alt+Shift+F).
Paste your code
Drop in the HTML from ChatGPT, Claude or anywhere else and click Convert & copy.
Paste into Webflow
Click where you want it on the canvas and press ⌘V (Ctrl+V). Done.
Native Webflow. Down to the last class.
Everything you paste shows up in the Navigator as a normal Webflow element. Style it in the Style panel, let your client edit the text, connect it to the CMS.
Classes a human would name
Every element gets a sensible class name. Things that look the same share one class, and variations become combo classes, the way a careful Webflow developer would do it.
- :hover, :focus and :active become states
- Optional Client-First names, like
hero_heading - CSS variables, clamp() and gradients stay
Your GSAP becomes Webflow Interactions
Webflow runs Interactions on GSAP now, but you still can't paste GSAP code into them. FlowPaste does the translation and keeps the timing, delays and staggers you wrote.
gsap.from,to,fromToand timelines- ScrollTrigger: play on scroll and scrub
- GSAP to Webflow Interactions →
Tailwind in. Clean Webflow classes out.
FlowPaste compiles your Tailwind and turns it into named Webflow classes, not 40 utility classes stuck on every div.
- Arbitrary values and variants like
md:hover: - The CDN script or an inline
tailwind.config - Tailwind to Webflow →
Claude Design, React and shadcn/ui, in one click
A Copy to Webflow button sits on every Claude Design and artifact preview. Paste React, JSX or a project folder and FlowPaste renders it, then converts what it shows.
- The whole design or one section
- No need to ask Claude for plain HTML
- Claude Design to Webflow →
See it on a site? Have it in Webflow.
Point at a section on any live page and click. Live Capture copies it with its styles, images and fonts, and you paste it straight into Webflow.
- Right-click → Capture an element for Webflow, or Alt+Shift+C
- Tabs and accordions keep every state
- Copy a website into Webflow →
Make and change sections with AI
Describe a section or drop a screenshot, then ask for changes. To change a section that's already in Webflow, copy it there and paste it into the AI tab.
- Readable class names, breakpoints and states
- Copy CMS content without bindings
- AI is part of Pro: 300 credits a month
Your media queries land on the right breakpoint.
Drag the handle to see it. Your tablet and mobile styles land on the matching Webflow breakpoints automatically.
.cards { grid-template-columns: repeat(3, 1fr) } → Desktop @media (max-width: 991px) { .cards { … 2 columns } } → Tablet @media (max-width: 767px) { .cards { … 1 column } } → Mobile landscape @media (max-width: 479px) { .hero-image { display: none } } → Mobile portrait
We measured every paste. Then we published the misses.
Webflow quietly changes some browser defaults (font sizes, margins, box sizing), which is why most pastes look slightly off. FlowPaste puts the original values back. Then we compare every paste with the original, detail by detail.
- 99.5%
- of style and size checks were identical to the original
- 15,204
- computed-style checks in the last test
- 24
- real sections pasted into Webflow and measured
What still needs you
- Fonts. If a font isn't in your Webflow site yet, add it in Site settings first.
- Inline SVG icons and CSS pseudo-elements. These stay in an Embed. Editing an Embed's code needs a paid Webflow plan.
- Unusual GSAP. Animations outside the supported patterns stay as custom code, and FlowPaste tells you which ones.
4 ways to get code into Webflow. 1 is fast and editable.
Every other way makes you give up speed, editability or the design you already have.
| FlowPaste | Rebuild by hand | Code Embed | Webflow AI | |
|---|---|---|---|---|
| Uses the design you already have | Yes | Yes, you retype it | Yes | No, it makes a new one |
| Native elements in the Navigator | Yes | Yes | No | Yes |
| Editable in the Style panel | Yes | Yes | No | Yes |
| Your client can edit the text | Yes | Yes | No | Yes |
| GSAP becomes Webflow Interactions | Yes (common patterns) | Rebuild by hand | Script only | No |
| Tailwind becomes named classes | Yes | Retype it | No | No |
| Time per section | About 10 seconds | Hours | Minutes | Minutes, different design |
| Cost | $0, or $7.50/mo | Your hours, or $80+ a page | $0 | Included in Webflow |
Using Flowboard? FlowPaste costs the same and adds Tailwind compiling, React and JSX rendering, a Copy to Webflow button in Claude Design, Client-First names, a public accuracy test and a 14-day refund. See the full comparison →
Built for people who ship Webflow sites for money
Quote the build. Deliver it the same week.
Clients send HTML, templates and AI mockups. Paste them in as clean, Client-First Webflow, then spend your hours on the parts that need you.
Keep the speed of AI. Give your client a site they can edit.
Generate the section in Claude, ChatGPT, v0, Lovable or Cursor, then paste it as native Webflow. Nobody has to touch code after launch. AI to Webflow →
You think in Tailwind. Your client wants Webflow.
Write it the way you like. FlowPaste delivers it the way they need it, with animations as Webflow Interactions. React to Webflow →
47 free Webflow components. Copy one now, no account needed.
Navbars, heroes, pricing tables, forms, FAQ accordions, footers, plus animated sections with GSAP. Preview one, click Copy for Webflow, paste. Save your own conversions too; Pro syncs them across every project.
Popular: Webflow FAQ accordionWebflow tabsWebflow sliderWebflow navbar with mobile menuWebflow pricing table with toggleWebflow GSAP hero animationWebflow text hover effectWebflow globe animationWebflow scroll animationWebflow logo marqueeWebflow contact form
Try it in your browser first.
No install, no account. The online converter gives you 3 conversions a day. The extension does more inside Webflow.
$7.50 a month. Less than one hour of rebuilding.
Prices in US dollars. Cancel any time from your account page.
Free
- 3 free runs a day: 3 conversions, 3 element captures or 1 full-page capture
- Up to 8,000 characters per conversion
- Tailwind, GSAP, Claude Design and the starter library
Pro · save 50%
- Unlimited conversions and captures
- AI sections: 300 AI credits a month
- No size limit. Separate CSS and JS inputs.
- Cloud library for all your projects
For comparison: freelancers charge from $80 a page, and agencies $2,000+ a site, to rebuild an AI-made site in Webflow.
HTML to Webflow questions, answered
Can you import HTML into Webflow?
Not with Webflow alone: Webflow has no HTML import, and its own help docs call moving a site to Webflow "a rebuild, not a transfer". FlowPaste, a Chrome extension, fills that gap. Paste HTML and CSS into its panel in the Webflow Designer, and it lands as native elements with classes, tablet and mobile breakpoints and hover states, ready to edit.
What is the best way to convert HTML to Webflow?
There are 3 ways: rebuild the design by hand, put the code in a Code Embed, or use a converter. Rebuilding takes hours a page. A Code Embed works but nothing inside it is editable in the Designer. A converter like FlowPaste turns the HTML into native Webflow elements and classes in one paste, so you keep the speed and can still edit everything.
How do I get code from ChatGPT, Claude or v0 into Webflow?
Copy the code the AI gives you, paste it into the FlowPaste panel in the Webflow Designer and click Convert & copy, then press ⌘V (Ctrl+V) on the canvas. HTML, Tailwind, GSAP, React and JSX all work. Code that needs to run (React, scripts) is rendered first, then converted.
How do I move a Claude Design into Webflow?
Open the design in Claude and click FlowPaste's Copy to Webflow button on the preview, then press ⌘V (Ctrl+V) in the Webflow Designer. It copies the whole design, or one section you pick, as native elements. You don't need to ask Claude for plain HTML.
Is FlowPaste the same as Webflow's Claude connector (MCP)?
No, they do different jobs. Webflow's Claude connector lets Claude build and change pages and CMS content from text prompts. FlowPaste takes a design that already exists, from Claude Design, an artifact, your own code or a live website, and pastes it into Webflow as it looks, with its classes, breakpoints and animations. Many people use both.
How is FlowPaste different from Webflow AI?
Webflow AI generates new things: the AI Site Builder makes a site from a prompt, and AI code components are React code. FlowPaste brings in a design you already have, from any AI tool or your own code, as native Webflow elements and classes you can style in the Style panel. FlowPaste can also generate sections from a prompt or screenshot in its AI tab.
Is it real Webflow, or a code embed?
Real Webflow. Sections, divs, headings, text, links, buttons, images, lists and forms become native elements with named classes, combo classes, breakpoints and hover, focus and pressed states. Your client can edit the text in the Editor. Only what Webflow can't store as a class, such as inline SVG icons or CSS pseudo-elements, stays in a small Embed.
Can I convert Tailwind or shadcn/ui to Webflow?
Yes. FlowPaste compiles Tailwind (the CDN script and an inline tailwind.config work) and turns it into named Webflow classes like pricing-card, instead of dozens of utility classes on every div. shadcn/ui and other React components, including ones styled with Tailwind v4, are rendered first, then converted the same way.
Can I convert GSAP animations to Webflow Interactions?
Yes, for the patterns most sites use: gsap.from, gsap.to, gsap.fromTo, timelines, staggers, ScrollTrigger (play on scroll and scrub), and click and hover animations. They paste as Webflow Interactions with their timing, delays and staggers. Anything outside those patterns stays as custom code, and the conversion notes say which.
Can I copy a section from another website into Webflow?
Yes, with Live Capture. Point at a section on any page, click, and FlowPaste copies it with its styles, images, fonts and hover states, ready to paste into the Designer. Use it on sites you own or have permission to use, or for allowed uses like studying a layout.
Do I need a paid Webflow plan?
No. Pasting works on every Webflow plan, including the free Starter plan. The one catch: inline SVG icons and CSS pseudo-elements stay in an Embed element, and editing an Embed's code needs a paid site plan.
What happens to fonts and images?
Webflow only uses fonts your site already has, so add any Google or custom font in Site settings → Fonts and the paste picks it up. Images: connect your site once in FlowPaste → Account → Webflow images, and every paste uploads its images to your Webflow Assets.
How close is the paste to the original?
Very close. We pasted 24 real sections into the Webflow Designer and ran 15,204 computed-style and size checks: 99.5% were identical to the original page. FlowPaste puts back the browser defaults that Webflow's base styles change, such as font sizes, margins and box sizing.
Is FlowPaste a Flowboard alternative?
Yes. FlowPaste does the same job at the same price, and adds Tailwind compiling, React and JSX rendering, a Copy to Webflow button in Claude Design, Client-First class names, a published accuracy test and a 14-day refund.
Is FlowPaste free?
Yes. The free plan includes 3 free runs a day (3 conversions, 3 element captures or 1 full-page capture), with no card and no end date. Pro removes the limits and adds AI for $14.99 a month or $89.99 a year, and you can get a full refund within 14 days of your first payment.
What can the extension see?
Very little. It adds a panel inside the Webflow Designer, a Copy to Webflow button on Claude previews, and writes to your clipboard when you convert. It reads another website only when you click Capture, and then only the section you pick. It doesn't track the sites you visit.
Stop rebuilding what AI already built.
Copy it from your AI. Paste it into Webflow. Get on with your day.
Add to Chrome, it's free →