Hi, So i have a question about the code generated under the inspect tab and the “gibberish” it sometimes contains.
i am started learning HTML and CSS, and its hard to get my head around the concepts of Grid, Flex an all options related. I have been trying some online css grid generators but they all lack something, or are very focused on one approach. Then i remembered that Penpot was mentioned by someone able to take the HTML straight from the inspect app. My search is over… or so i thought.
I Feel that this feature is rather new, is it still in or under development? Should i look at it as a tool to assist me in code or should i be able to copy past the code and expect it to work? I expect the later, but vs code doesnt agree 
example of some gibberish :
[["^ ","~:fill-color","#
Or is this just a bug?
funny thing, if i paste it as formatted text here it gets corrected:
[["^ ","~:fill-color","#
here an example of the diff after i asked Chatgpt for a cleanup:
diffchecker
fyi im using Firefox on windows.
love to hear from others…
1 Like
Hey there @mushers!
I’ve never noticed such problems before. I usually just use the CSS feature of the inspect tab, as the HTML is a new thing and is not quite there yet (for me). Unfortunately, the inspect tab, as of right now, is more of a way to help you get some code features than to make code in some sort of WYSIWYG form.
If you ever need such a feature, there are some platforms like TeleportHQ that will be more helpful in that specific task. Though I do believe and full-support the idea of improvements on how the inspect tab generates the HTML and CSS code, specially in more complex (or nested) elements.
Have you got a bit more of the HTML and CSS to share? And whether this is included in the HTML or the CSS?
It might be a bug. The number of "es looks like code that is rendering incorrecting (should be ") and fill-color suggests its SVG.
But it could be (and this is often a lot of the “gibberish” you’ll see in the generated code) base64 encoded images. Basically, to make sure that your images render correctly when you share the code to a different environment, Penpot encodes them as a string of text-like code (that looks like gibberish!) that a browser can interpret and display without you having to add all your images separately as PNG, JPG files etc when you want to share your designs.
If you have any questions about Grid, Flex, and the related HTML/CSS, please feel free to ask me! I’m a designer and an HTML/CSS nerd. I’m keen to know the questions that I can answer in tutorials and videos for Penpot!
