Guides / HTML to Webflow

Convert HTML to Webflow with real classes

Webflow cannot import HTML as elements that you can edit. An Embed element keeps the code, but you cannot style that code in the Designer. FlowPaste reads your HTML and CSS and calculates the styles that apply to each element. Then FlowPaste pastes the result into Webflow as native elements with named classes.

Add to Chrome, free →See the demo
index.htmlSection.heroHeadingButton:hover
[IN]HTML + CSS
<section class="hero">
  <h1 class="hero-title">Ship faster</h1>
  <a href="/start" class="btn btn-primary">Start</a>
</section>
<style>
.hero { padding: 96px 24px; text-align: center; }
.hero-title { font-size: 56px; }
.btn { padding: 12px 20px; border-radius: 10px; }
.btn-primary { background: #4353ff; color: #fff; }
.btn:hover { opacity: .9; }
@media (max-width: 767px) { .hero-title { font-size: 36px; } }
</style>
[OUT]What you get in Webflow
  • section → a Section element with the class hero
  • h1 → a Heading element with the class hero-title. The font size is 36px on mobile landscape and smaller breakpoints.
  • a.btn.btn-primary → a Link element with the class btn and the combo class btn-primary
  • .btn:hover → a hover state on the class btn
  • Shorthand properties → Webflow longhand properties. Colors → the Webflow color format.

Steps

  1. Install the FlowPaste Chrome extension. Open your site in the Webflow Designer.
  2. Click the FlowPaste button. Paste your HTML into the panel. Keep the <style> tag in the HTML. Click Convert & copy.
  3. Select the location on the canvas, or select the Body. Press ⌘V or Ctrl+V.

Limits

  • If your CSS has pseudo-elements (::before, ::after) or @keyframes, FlowPaste keeps them in an Embed element.
  • If your HTML has inline SVG, FlowPaste puts the SVG in an Embed. To edit an Embed, you must have a paid Webflow site plan.
  • If a font is not on your Webflow site, add the font to the site. FlowPaste changes system font stacks to Arial, Georgia or Courier.

Questions

Can Webflow import an HTML file?

No, not as elements that you can edit. Webflow imports only its own exports, and CSV files for the CMS. To move outside HTML into Webflow as native elements, paste converted data from the clipboard.

Does FlowPaste keep my class names?

Yes. FlowPaste keeps your class names. If your site has a class with the same name and different styles, Webflow adds -2 to the new class name. Webflow does not overwrite the old class.

Try it with your own code.

Free: 3 conversions each day. You do not need a credit card.

Add to Chrome, free →