HTML to Webflow

Webflow App · Free

HTML to Webflow, inside the Designer

Paste HTML, CSS or Tailwind from any AI tool into the app, convert it, and paste native, editable Webflow elements on the canvas. Works in any browser.

Try the web converterGet the Chrome extension

Native elements, real classes

Sections become Webflow elements with readable class names such as hero, pricing-card and pricing-card-c. No code embeds, no inline styles.

Breakpoints and hover states

Tailwind prefixes like md: and hover:, and media queries in your CSS, are mapped to Webflow’s breakpoints and hover states.

Report and preview first

Before you paste, see how many elements and classes will be created, anything that needs a manual touch, and a desktop and mobile preview.

Doesn’t touch your site

The app never reads or changes your project through the Designer API. You decide where the result goes by pasting it yourself.

How to use it

  1. 1

    Open the app

    In the Webflow Designer, press E to open the Apps panel and launch HTML to Webflow.

  2. 2

    Paste and convert

    Paste HTML (with a <style> block or Tailwind classes), optionally add separate CSS with + CSS, and click Convert.

  3. 3

    Check the result

    Read the short report and open Preview to check the desktop and mobile layout.

  4. 4

    Copy to Webflow

    Click Copy to Webflow.

  5. 5

    Paste on the canvas

    Select an element on the canvas or in the Navigator and press ⌘V (Ctrl+V on Windows). The section is pasted inside or after it.

Questions

What code can I paste?
Plain HTML with a <style> block, HTML plus separate CSS, or HTML with Tailwind CSS v3 or v4 classes. Code from Claude, ChatGPT, v0, Lovable and Cursor works as is. Scripts are not converted.
Why doesn’t the section look exactly the same?
Some things need a manual step in Webflow. Custom fonts must be added in Site settings → Fonts before pasting; SVG icons and elements Webflow can’t build natively are kept as embeds. The report lists everything that needs attention.
Nothing happens when I press ⌘V.
Click Copy to Webflow again, then click once on the canvas or select an element in the Navigator so the Designer has focus, and press ⌘V.
Is it free?
Yes. There’s no account and no limit. The same converter is available on this website and as a Chrome extension.
What happens to my code?
The conversion runs in your browser. To find and fix conversion problems, the code you convert and the result are logged and deleted after 30 days. See the privacy policy for details.

Something didn’t convert well? Email [email protected] with the code you pasted. Read the privacy policy.