Join the Webstudio community

Updated 9 months ago

Inserting a navbar from penpot into an html embed

At a glance

A community member tried to insert a navbar they prepared earlier on Penpot by using the HTML code in an HTML Embed, but it didn't work well. The community members discussed the issue, noting that the HTML code from Penpot didn't contain any CSS, making it impossible to get the styles information. They suggested that the CSS might be inline in the original Penpot design, and that copying the entire code might work better. However, some community members warned that this approach could result in poor performance. They also highlighted the differences between design tools and production-grade builders, with the latter focusing on optimizing performance. The community members concluded that directly importing designs from tools like Penpot may not be viable without significant investment in rebuilding or rewriting the code, potentially using AI.

Hi, I tried to insert a navbar that I prepared earlier on Penpot and used the HTML code from Penpot in an HTML Embed, but unfortunately, it doesn't work well. However, I really think it could be an amazing feature!
O
S
20 comments
can you paste it here to show us?
the navbar copied on penbot with Html
Attachment
Capture_decran_2024-05-21_a_08.41.51.png
The result on webstudio after paste in HTML embed
Attachment
Capture_decran_2024-05-21_a_08.43.48.png
I hope it could help you! Thanks
can you show us the HTML?
I see, this doesn't contain CSS at all, so its impossible get the styles information from that
Actually it contains some of it inline
how does the original look like in penpot? maybe all css they used is inline and classes are only for some functional things
Attachment
Capture_decran_2024-05-21_a_09.43.22.png
I copied/pasted HTML but i didn't see the button "Copy all code". Then, it works well when paste alll the code
Yeah, I wouldn't do that, this is going to result in terrible performance
This is the difference between pure design tool and production-grade builder. We build everything so that the result has amazing performance. This tool just spits out a bunch of crap
I don't think its ever going to be viable to just import stuff from design tools 1:1 without a massive investment into rebuilding evertything they produced either via AI or manually.
Its possible that with AI we can rewrite everything to something that is more acceptable, but we are not there yet.
Ok, good to know that! thanks for your answer!
it was a test and in reality, it's that easy to design on webstudio
We will get it over time to be even better at designing
a few things are missing to have a comparable designing experience
Add a reply
Sign up and join the conversation on Discord