Upload vs Download vs View code icons and windows (UI/UX Suggestions)

Hi Stefan! I found your excellent project on Mastodon, and couldn't wait to check it out!

I wanted to share some UI observations/suggestions as first-time user in regards to the icons and windows in the top toolbar:

Import Button

This icons resembles a download icon, which made me think that the button would allow me to download the code. Perhaps something like this could represent this action?

Additionally, some kind of prompt of what to import / how to do so would be awesome. Having the existing code in this window as well would also help users understand what they're overwriting (like in the "Code" window). I presume it only takes in HTML code, but perhaps a note about that would make it more clear. Also, I'm not sure if this is possible to do in GrapeJS, but being able to paste in CSS would be dope, or even being able to upload a previous zip export.

Code Button

It took me a few minutes to figure out that this button was the one to click on to download my project.

I initially thought that I could edit the code from here as well, but it doesn't appear to be the case (though, it would be nice to merge this window with the import one, as a sort of way to view the existing structure, edit it, AND/OR overwrite it, you know?)

If editing isn't possible within the confines of GrapeJS, I would recommend:

Adding a "Copy" button, so that it's clear that it's a View-only mode of the code, and meant to be copy-pasted elsewhere
Adding some helper text on what to do from here ("Copy the following code into the text editor of your choice for further editing, or click on the Export button below to get a readymade zip folder that you can upload to the web host of your choice.")
Rename this window and icon to "View code / Export"

Missing Tooltips

Some icons appear to be missing their tooltip. Not sure if this is a Firefox thing?

stefanbohacek / simplepagebuilder