Streaming live at 10am (PST)

Export modal shows HTML on one line — changes exported HTML


#1

Hi All,

My name is Stan and this is my very first comment here on WebFlow’s forum :slight_smile:

A bit of a long message, but I wanted to share my experience regarding the one-line-bug with you. Maybe it helps someone.

I encountered the same one-line code problem when trying to export my work (which is why I found this thread). I’ve got it solved, well… not really solved, I found two workarounds for it that worked for me.

Initially when I noticed the one line code I thought that maybe WebFlow automatically minifies the code after a certain length (I was working on a very long and complex page). This would not have been convenient because I like the possibility to make quick changes or additions in the code when necessary, but then again there are always un-minify tools online (Google it).

So I exported the code and opened the (what I thought to be) minified code in my text editor to find that it didn’t look like minified html at all (see screenshot below).

In addition the page looked as intended in WebFlow, but didn’t display as intended on my local server. The page showed excessive spacing between sections and stacked divs as if there was a margin added between them.

So it wasn’t minified code, but this did give me the idea to minify the code inside WebFlow before exporting to see if that would solve the issue. And it did! So if my theory is correct that this one-line-bug appears with very long/complex pages, minifying seems to work. After exporting just un-minify the code in case you want to be able to make edits manually outside WebFlow :slight_smile:

Exporting minified html in Webflow

However, I wasn’t sure if the problem was actually because of the very long/complex page. That was just my initial theory. To test this I split up the page in two separate pages with the intention to later stitch them together in my code editor.

The plus side for this approach, it worked! The code generated by WebFlow looked as it should (multiple lines and beautiful!) and both parts looked as intended in WebFlow and the browser as well.

The downside comes when you have animations in both parts (which are now separate pages). The animations of the part that you’re copying to the other page will stop working. So if you copy the code from page 2 (the second part of the long page to be added back) and add it to page 1 only the animations that were on page 1 already will work.

The reason for this (for as far as I understand) is because of the generated “data-wf-page” tag ID (the bunch of numbers next to the html opening tag in the exported code - see also image below) which is unique per page and communicates with the JS making the animations happen on that specific page (I think :wink: ).

I haven’t been able to figure out how to add both those IDs on one page. Not sure if that is even possible. But if you like puzzles, like myself, you could choose to add all animated sections on page 1 (if you don’t happen to have animated sections only) and the static sections on page 2. Then put them together in a code editor. Fun!

I hope the above made sense. Please note that the above is what worked for me. I can’t guarantee that it will work for you as well :slight_smile:

I’d also like to mention that, even though it is against my own rules, I did use copied text straight from the design PSD on this page because of the inhuman deadline, but this didn’t seem to be an issue after splitting up the page in two.

Hope this might help someone who encountered this issue to get creative with bugs and possibly give some insight to the WebFlow team.

Cheers,

Stan.


HTML exports single line
#2

Any update of this, i still having the problem with some projects


#4

Hi @SirStancelot @bernardo15

Thanks for posting such awesome deatils about this issue @SirStancelot! This is definitely helpful for the WF team.

I went ahead and split this into a new topic as the root causes of the issue may be unrelated.

The team is still digging into this but the information you provided here is super useful.

I’ll post back when we have more details on the problem.

One other piece you could try is to paste the text from your PSD file without formatting — or paste it into a google doc first and copy from there.


#5

Hi @Brando,

Thanks for getting back with me! I’m glad the information is of use for the team!

Just a thought that popped up when reading the thread; Could it have to do with possible size limits set for the database that WF uses to build the websites? If it gets flooded with more data than the set limit it prevents the HTML from rendering properly. Just thinking out loud. Hope it helps :slight_smile:


#6

Hi @SirStancelot

Could it have to do with possible size limits set for the database that WF uses to build the websites?

This definitely could be a contributing factor! Hopefully we’ll be able to get down to the root cause soon and confirm that. I’ll keep you updated as we learn more. :slight_smile: