Streaming live at 10am (PST)

What is code export feature built for?

Hi,

I’m a coder and was looking for a “drag’n drop” to “Responsive editable HTML/CSS code” tool (not counting on animations/javascript), so that I can work with any javascript framework (React, Vue, Svelte, etc…).

After some research for feedbacks with “webflow code export quality” (literraly every article/topic/comment was complimenting the clean exported code), I decided to give it a try.

I tried to export a simple landing page with no animation nor interaction (link here) with following structure:

  • Body
    • Container (with a background image, a radial gradient, and a overlay)
      – -- Heading
      – -- Paragraph
      – -- Button

In the exported code bundle, beside of the index.html file (2kB) and the /Images directory, here’s what I got:

In the /js folder:

  • webflow.js (32kB)

In /css folder:
[project-name].webflow.css (4kB)
normalize.css (8kB)
webflow.css (39kB)

I was surprised by the size of the total boilerplate code… So basically it’s a 85kB code bundle for a 4-elements static html/css website!

I can’t use the exported HTML/CSS code as it is now, because of all the Webflow’s specific naming convention (I can’t dive in the 40kB .css file to extract what I need, and even if I could, what would be the benefit of spending hours for some 50ish lines of CSS?).

So my question is, what is the code export functionnality built for?

It is primarily for site owners whom are not using the CMS and wish to host a complete site themselves. On a full site or landing page the load is insignificant. The exported code is not scaled based on what you use as you have found out. Rather a kitchen sink approach.