Native, not embedded
Sections, divs, headings, images, and classes — editable in Designer like anything you built there.
HTML + CSS + JS → Webflow
Paste code.
Get native Webflow elements.
Flowtools rebuilds a page of HTML, CSS, and JavaScript as editable Webflow content — sections, styles, and classes you can keep building on inside Designer.
Built for one page at a time · Public beta
Why it exists
AI writes the code in seconds.
Webflow doesn't paste it as elements.
Webflow's clipboard needs its own native format. Without a translation step, every generated section gets rebuilt by hand — class by class — undoing most of what AI saved you.
Nothing to install
Runs in the browser. No plugin, no extension, no Designer setup — result lands on your clipboard.
JavaScript preserved
GSAP, ScrollTrigger, and custom scripts come across as embeds and run on publish — nothing dropped.
What you can paste in
One page at a time.
HTML, CSS, and JavaScript.
Flowtools is built around a single page — a landing page, a hero, a pricing block, one exported Webflow page. Cleaner input, cleaner output.
AI-generated pages
Standalone HTML from Claude, ChatGPT, Cursor, Gemini, v0, or Lovable — lands as real Webflow structure, not an embed.
Single Webflow page export
Bring one exported page back in. Head styles and scripts route to the right editors — reuse across pages may need class cleanup.
Coded prototypes
Move a hand-written page or single component into Designer without recreating its classes and layout by hand.
How it works
Four steps.
No setup.
Paste or upload your files, preview across breakpoints if you want, then convert. The result is copied to your clipboard as native Webflow content.
01
Paste or upload
Drop HTML, CSS, and JS into the editors — or upload files. A full Webflow export works too.
02
Preview (optional)
Check the layout at Desktop, Tablet, and Mobile before you convert.
03
Convert
Flowtools rebuilds the structure as native Webflow elements and copies the result to your clipboard.
04
Paste in Designer
⌘ V into any section. Styles, classes, and layout come across editable — keep building in Webflow.
What Flowtools actually does
One step in the middle.
Your workflow stays the same.
You generate the code. Webflow ships the site. Flowtools is the translation layer that hands the code to Webflow as editable elements — nothing more, nothing less.
Your code
HTML
CSS
JS
CSS
JS
FlowtoolsAnalyze
Translate
Convert
Translate
Convert
Webflow
Edit
Style
CMS
Interactions
Publish
Style
CMS
Interactions
Publish
Paste · convert · keep building
Editable, not embedded
Real Webflow content.
Not a static embed.
The output isn't wrapped in an Embed block. It's the same clipboard payload Designer produces itself — parsed, styled, and ready to edit.
Style panel keeps working
Classes map to Webflow classes. Hover, focus, transitions, and keyframes come across as native styles.
CMS placeholders you can wire up
Collection-style layouts land as wrapper + item divs — swap in a real Collection List and connect fields.
Preview before you convert
Render the page at Desktop, Tablet, and Mobile inside Flowtools — spot layout issues before pasting into Designer.
Made for AI-first workflows
AI shipped the layout.
Ship the site next.
There's a built-in prompt tuned for the converter — get cleaner HTML from ChatGPT, Claude, Cursor, Gemini, v0, or Lovable, then land it as native Webflow elements in one paste.
AI
ChatGPT · Claude · Cursor
Prompt for a page. Get HTML and CSS back.
Flowtools
Flowtools
Convert HTML and CSS into Webflow-ready structure.
Webflow
Refine · Ship
Continue building with real structure and classes.
What's next
Beta now.
Pro after that.
The converter is in public beta. Direction after that is shaped by what beta users actually need — send feedback and it lands on the roadmap.
Now
Public beta
Free while we sharpen the converter. Bug reports and feature requests move the roadmap directly.
Next
Pro
Advanced controls for serious Webflow builds. Shape is still forming — early access opens the door.
Later
More Flowtools
More utilities for the AI-era Webflow workflow. What ships next depends on what beta shows us.
Cleaner input, cleaner output
Better AI prompts.
More native elements.
How much of your page stays editable in Webflow depends on the code you paste in. The built-in prompt steers AI toward output the converter can turn into real elements.
Semantic HTML
Section, header, article, nav, footer — the tags Webflow understands as native elements.
Class-based styling
Named classes over tag or ID selectors — so the Style panel picks them up cleanly after paste.
One complete section
Wrap output in a single root element. Full sections convert more reliably than isolated fragments.
Where it works best
Built around one thing.
Standalone HTML pages.
Flowtools is tuned for a single HTML document with its CSS and JavaScript in place. Feed it that, and most of the page comes across as native Webflow content.
Best on standalone HTML
Vanilla HTML, CSS, and JavaScript in one page — the format we test against. Everything the docs recommend applies here.
JS animations preserved
GSAP and ScrollTrigger come across as embeds. They don't run inside Designer, but execute on preview and on your published site.
CMS layouts as placeholders
Collection-shaped divs come through ready to swap for a real Collection List — layout intact, easy to wire up.
“In the AI era, building faster is the need. Flowtools moves Webflow builders in that direction.”Flowtools · product direction
Good to know
Common questions.
No. Flowtools gives you a faster starting point. You continue building and refining the site in Webflow.
A single HTML page with its CSS and JavaScript — a landing page, a hero, one exported Webflow page. Flowtools is built around one page at a time; whole-site exports aren't in scope yet.
Scripts, including GSAP and ScrollTrigger, are preserved as Webflow embeds. They don't run inside Designer, but execute normally on Preview (with Render custom code) and on your published site.
Yes — that's the primary workflow. Use the built-in prompt with Claude, ChatGPT, Cursor, Gemini, v0, or Lovable to get output tuned for reliable conversion.
Flowtools is under active development. Most pages convert cleanly; some edge cases still won't. If something looks off, send it through the Report a bug form and it goes straight into the fix queue.
Free during public beta. A Pro tier will come later — early-access sign-ups help shape what goes into it.
Conversion runs where you paste and the result is copied straight to your clipboard for Designer. Your code is never uploaded, stored, or seen.
Paste your next page.
Skip the rebuild.
Free during public beta. No plugin, no Designer setup. Or sign up for early access to Pro.
More Flowtools tools are on the way.