If you already have a website built in HTML and CSS, it is natural to ask whether you can simply import it into Webflow. The short answer is that Webflow does not have a one-click import that turns a hand-coded site into an editable project, and the options that do exist each come with trade-offs. Which one is right depends on how big the site is, how it is structured and how much you want to be able to edit it visually afterwards.
This guide explains what you can and cannot do, walks through each approach in detail, shows how to rebuild a coded page natively, and covers the things that go wrong most often: responsive behaviour, class names, content import, SEO and redirects. It is written for people moving a static HTML site, a site exported from another builder, or a custom-coded marketing site.
Can You Import HTML into Webflow?
Webflow is a visual builder. It generates its own HTML and CSS from the elements and styles you create in the Designer, so it does not take a folder of HTML files and turn them into an editable project. Importing full pages from code has been a long-standing request from Webflow users. Features change, so check Webflow's current documentation before you start.
The reason it is hard is that Webflow's Designer works with a specific model: elements such as sections, containers, div blocks, headings and links, styled through classes with breakpoints. Hand-written code rarely maps to that model one to one. A real import tool would have to guess your intent for every nested element, every selector and every media query, and the result would be a project that works but is painful to edit. That is the same problem converter tools run into.
That leaves four practical approaches.
Option 1: Rebuild the Site Natively in Webflow
You recreate the layout in the Designer, using your existing site as the reference. This is the cleanest option and the one I recommend for most sites.
- Pros: clean structure, reusable classes and components, a site your team can edit visually, and the CMS available for repeating content.
- Cons: it takes more time than pasting code.
For simple sites with a few pages, a rebuild is often quicker than expected, because most of the work is a handful of reusable sections. For larger sites it is still the best foundation, because you build the system once and every page benefits.
A rebuild workflow that works
- Inventory the pages and group them by layout. A 40-page site often has only six or seven distinct layouts. Build the layouts, not the pages.
- Set up global styles first. Define your colours, fonts, type scale, spacing and button styles as variables and base styles before you build any sections. Your CSS file already contains these values, so you can lift them directly. My guide to creating consistency with a Webflow design system explains how to organise them.
- Choose a naming convention. Decide how classes will be named before you create the first one. See the Webflow naming conventions guide.
- Build reusable sections and components. Navigation, footer, call-to-action bands and cards should be components, so one edit updates every page.
- Move repeating content into the CMS. Blog posts, team members, case studies and testimonials belong in collections, not copied into pages.
- Build the responsive versions as you go, not at the end.
How HTML maps to Webflow elements
Understanding the mapping makes a rebuild faster. A section becomes a Section element. A wrapper that centres and constrains content becomes a Container. A generic div becomes a Div Block. Headings, paragraphs, lists, links, images and forms all have direct equivalents. You can change an element's tag in the settings panel, for example making a Div Block a nav or footer, so you keep the semantic structure of your original markup. Your CSS classes become Webflow classes, and your media queries become breakpoint styles.
Option 2: Use an HTML Embed Element
Webflow's Embed element lets you add custom HTML, CSS or JavaScript inside a page. It works well for widgets, forms from other services, maps, calculators and small custom features.
- Pros: fast, and your code stays exactly as written.
- Cons: embedded code is not editable in the Designer's visual tools, does not use your Webflow classes and can conflict with your styles. Building a whole page this way defeats the point of using Webflow, because nobody can edit it without opening the code.
A good rule is to embed small, self-contained things and build everything else natively. If you find yourself pasting entire sections into Embeds, that is a sign you should rebuild them instead. Embeds also have size limits, so large blocks of code are better added as custom code in the page or site settings, or hosted as a file.
Option 3: Use a Converter Tool
Several third-party tools and plugins try to convert HTML and CSS into Webflow elements that you can paste into the Designer. Their quality varies, and they change over time.
- Pros: can save time on simple, well-structured pages.
- Cons: the result often needs cleaning up: messy class names, inline styles, unsupported features and layouts that break on tablet or mobile.
If you try one, use a copy of your project, test on a single page first and check the result at every breakpoint. Treat the output as a rough first draft. Converters work best on clean, simple markup that uses classes consistently, and worst on sites built with frameworks, deeply nested wrappers, inline styles or heavy JavaScript behaviour.
Option 4: Move Your Content, Not Your Code
If your site is mostly content, such as a blog or a set of repeating pages, import the content into Webflow CMS collections using a CSV file, and rebuild only the templates. This is often the best approach for larger sites, because the templates are small in number and the content is large.
To do it, extract your content into a spreadsheet with one row per item and one column per field: title, slug, date, author, summary, body and image. The body column can contain HTML, which Webflow will convert into rich text. Image columns need publicly accessible URLs, so host your images somewhere reachable before you import. Create the collection and its fields first, make sure the CSV column names match, then import. Always test with a small batch before importing everything, and check headings, links and images on the imported items. My guide to structuring content on a Webflow website helps you plan the fields.
How to Decide
- Few simple pages: rebuild natively.
- Many repeating pages or posts: build templates in the Designer and import the content through CSV.
- A custom widget or third-party tool: use an Embed element for that part only.
- A tight deadline and simple structure: try a converter on a copy, and budget time for cleanup.
What Does Not Come Across
Some parts of a coded site cannot be reproduced in Webflow at all, and it is better to know before you start. Server-side code such as PHP includes, server-rendered templates and custom back-end endpoints does not run on Webflow. Anything that depends on your own database needs a separate service. Form handling that posts to your own server needs to be replaced with Webflow forms or a third-party form service. Authentication and gated content need an additional tool or a different approach. Static assets such as downloadable files and fonts need to be uploaded to Webflow, and custom animations written in JavaScript may need to be rebuilt with Webflow interactions or added as custom code.
What to Check After Bringing Code into Webflow
- Responsiveness: check desktop, tablet and mobile breakpoints. Webflow is desktop-first, so styles cascade down from larger breakpoints, which is the opposite of how many hand-coded sites are written.
- Class names: rename messy classes to a consistent system so the project stays maintainable.
- Semantic tags: use proper headings, lists and landmarks. Do not use heading tags for styling.
- Images: upload them to Webflow, add alt text and compress them.
- Metadata: add page titles, descriptions and Open Graph settings to every page.
- Links: update internal links to the new URLs.
- Scripts: re-add analytics and tracking, and remove anything you no longer need.
- Forms: test every form, including notifications and where submissions go.
Don't Forget SEO and Redirects
If your site is already live, moving it to Webflow can change URLs. A static site often uses file-style URLs such as /about.html or /services/index.html, while Webflow serves clean paths like /about. Keep the same paths where you can, and set up 301 redirects for anything that changes, under Site settings → Publishing → 301 redirects. Publish after adding them, because redirects only take effect once the site is published. My Webflow 301 redirects guide explains the syntax and wildcards, and the Webflow SEO checklist lists the settings to check before launch.
Moving a site that already ranks carries the same risks as any other migration. Benchmark your traffic first, crawl the old site to capture every URL, and compare after launch. My ultimate guide to website migration to Webflow covers the full process.
For the step-by-step version of this process, read my guide to migrating a custom-coded website to Webflow. If you want it handled for you, see my Webflow migration services or get in touch.
Frequently Asked Questions
Can I import an HTML website into Webflow?
Not as a complete, editable project with a single click. You can rebuild it in the Designer, embed pieces of code, use a third-party converter, or import your content into the CMS and rebuild the templates.
Can I paste HTML and CSS into the Webflow Designer?
You can add code in an Embed element, but that does not turn it into editable Webflow elements. Converter tools claim to do this, and results vary, so test on a copy.
How do I convert HTML to Webflow?
The most reliable method is to rebuild the layout natively in the Designer. For content-heavy sites, build the templates and import content through CSV.
Is it better to rebuild or to convert?
Rebuilding gives you cleaner, more maintainable projects. Conversion can help with simple pages, but expect cleanup.
Will my SEO be affected if I move an HTML site to Webflow?
Only if URLs, metadata or content are lost. Keep your URLs where possible, redirect any that change, and carry over your titles, descriptions and structured data.
Can I export my Webflow site back to HTML?
Webflow offers a code export on some plans, but it does not include the CMS or hosted features, so check the current options before relying on it.
How long does it take to rebuild an HTML site in Webflow?
A small brochure site can take days. A larger site with many layouts takes weeks. The number of distinct page layouts, not the number of pages, drives the time.
