How to Import Any Website Section into Webflow (2026)
Webflow has no HTML import. Here are the four ways to get an existing website section onto the Designer canvas, what each one does to your classes and breakpoints, and which to use.
Soraia
Founder, PocketUI
Webflow cannot import raw HTML into the Designer. Your options are rebuilding the section by hand, dropping it into an Embed element, going through Figma with Webflow's official plugin, or capturing the section from the live page and pasting it in as native elements. Only the last two produce elements you can restyle in the Style panel, and only the last one works when the design exists as a website rather than a Figma file.
Webflow gives you a Designer that is better than almost anything else at turning a layout into clean, class-based markup. What it does not give you is a way to bring an existing website into that Designer.
There is no "import HTML" button, and there is a good reason for it: Webflow's whole model is that every element has classes, and every class has values per breakpoint. Raw HTML has none of that structure in a form Webflow understands.
So here are the four routes, and what each does to the thing that matters, your classes.
1. Rebuild it by hand
Read the original in DevTools, then build it again with div blocks, headings and links, naming classes as you go.
Best result, highest cost. You end up with exactly the class structure you wanted, because you chose it. You also spend an hour per section transcribing values, and you will quietly drop the hover transition and the tablet padding.
2. Drop it into an Embed element
Paste the markup and its CSS into a Webflow Embed.
It renders. It does not become Webflow. The Navigator shows one item. The Style panel has nothing to style. Breakpoint controls do nothing, because your pasted CSS is deciding the layout, not Webflow. If anyone needs to edit this later, they are editing code inside a box.
There is also a practical trap: Embed content does not show in the Designer preview the way normal elements do, so you are designing around a grey box.
3. Figma to Webflow
Webflow's own Figma plugin converts Figma frames into Webflow elements, and it is the officially supported path. If your design starts in Figma, use it.
For an existing website, though, you have to get that website into Figma first. That usually means an HTML-to-Figma plugin, and those tend to produce absolutely positioned frames. Absolute positioning is exactly what converts badly into a class-based, flow-layout system like Webflow's. You end up cleaning up two conversions instead of one.
4. Capture the section from the live page
Read the page directly and write Webflow's own clipboard format, then paste.
This is worth explaining, because it sounds like magic and is not. When you copy an element inside Webflow and paste it into a different Webflow site, the clipboard carries a JSON payload describing elements, classes and their per-breakpoint values. A conversion tool can write that same payload from a captured section. Webflow accepts it as if it came from another Webflow project.
That is why this route produces real elements rather than an embed: you are speaking Webflow's own language, not asking it to parse HTML.
What to check before you build on top of it
Whatever route you take, check these four things before you start styling. They are the ones that quietly go wrong.
- Classes, not combo class soup. Repeated styles should be a handful of reusable classes. If every element has its own one-off class, maintenance will be miserable.
- All four breakpoints. Switch through tablet, mobile landscape and mobile portrait in the Designer. Desktop always looks fine; the others are where a bad conversion shows.
- Hover states. They live in Webflow's interactions and state controls, not in the base style. Many conversions drop them silently.
- Images. Check whether they are linked to the original site or uploaded to your assets. Hotlinking someone else's images is both fragile and not yours to do.
Doing it with PocketUI
PocketUI is a Chrome extension that saves parts of live websites as real code: structure, authored CSS, hover and focus states, and breakpoints. One capture can go to Figma as editable layers, out as HTML, Tailwind, React or Vue, or into a page builder.
- Find the section on the live site. A hero, a feature row, a pricing block.
- Capture it. Drag over the section in the extension.
- Copy it for Webflow. The capture is converted into Webflow's clipboard format, with repeated styles as classes and media queries mapped to Webflow breakpoints.
- Paste it onto the canvas. It appears as native elements in the Navigator.
- Check each breakpoint before you build on top of it.
- Replace the content with your own.
Being straight about the status: the Webflow export is not live yet. Figma and the code exports work today; Webflow, Elementor, Bricks and Shopify are in development and go to early-access members first. Today, route 1 or 3 is your answer. If route 4 is the one you want, put your name on the list.
About copying
Layout and structure are things the whole industry learns from. Text, photographs, logos and brand assets are not. Rebuild the layout, replace the content. Moving a client's existing site into Webflow is ordinary agency work; republishing a stranger's copy under your own domain is not.
Which route to pick
- Simple section, or you want to change the design: rebuild by hand.
- Something that has to ship today and will never be edited: Embed, and accept it.
- Design already in Figma: Webflow's own Figma plugin.
- Design exists as a live website, and you want real classes: capture it from the page.
Frequently asked questions
Not into the Designer as editable elements. Webflow can render raw markup inside an Embed element, but the Designer treats that as one opaque block: no classes, no Style panel, no breakpoint controls. To get editable elements you need the markup converted into Webflow's own clipboard format, which is what paste-based tools produce.
Webflow's Designer accepts a copy-paste payload in its own JSON format. When you copy an element inside Webflow and paste it into another site, that is the format being used. A conversion tool writes the same structure from a captured section, so pasting on the canvas creates real div blocks, headings, links and images with classes attached.
They do if the tool maps them. Repeated styles should become reusable Webflow classes rather than dozens of one-off combo classes, and the original media queries should be written into Webflow's desktop, tablet, mobile landscape and mobile portrait breakpoints. If they are not mapped, you get a section that looks right on desktop and falls apart on a phone.
It is the right route when the design already lives in Figma, and it is made by Webflow so it stays current. For an existing website it adds a step: you have to get the page into Figma first, usually with another plugin, and that import is the part that tends to produce absolutely positioned layers which convert poorly.
Pasting onto the canvas is a Designer action, so it works on any plan that gives you Designer access, including the free starter plan. Publishing limits still apply as normal.
Keep reading
How to Convert a Website to Elementor (HTML to Elementor, 2026)
Four ways to turn an existing website section into Elementor, from rebuilding it by hand to pasting real widgets. What each method keeps, what it breaks, and when to use it.
Read ExportHow to Export Design Tokens From a Website to Figma and Code
How to extract the real color and typography tokens from any live website, read from computed styles, not stylesheets, and import them into both Figma variables and your codebase as CSS variables or a Tailwind config.
Read ExportHow to Convert Any Website to Figma (2026 Guide)
How to bring a live website into Figma as editable layers, and why the best workflow gives you both Figma layers and clean HTML + Tailwind code from a single extraction, not one or the other.
Read