What is code export feature built for?

Community resources General
1

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?

1 Like
2

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.

1 Like