Convert a penpot design to HTML and CSS

Ask the community
1

Hello,

Newbie here, is there any tools or learning resources to convert a penpot design to HTML and CSS?

Thanks!

2 Likes
2

Hi @securegh,

Welcome to the penpot discourse!

…any tools or learning resources to convert a penpot design to HTML and CSS?

As far as I am concerned, this is not easily possible. While being also a web standard, Penpot’s underlying format, SVG, is hard to convert to HTML (as it covers different concerns) and even if this would be done, the resulting HTML/CSS code would probably be hard to maintain.

Until the mid-2000s, a lot of money and time was invested into tools that combined design and code output. However, this software category was only successful for some time and is not actively pursued anymore.

There are tools that allow to assemble pre-made components to websites; and penpot (and other tools like it) make an effort to be helpful for the people who write the code, but it is not a conversion rather than a handover/collaboration between disciplines or modes-of-work.

2 Likes
3

When creating a design in penpot, I thought that backend code is creating html, JS and CSS ready to export to as a website template, something like wordpress DIVI, what I don’t like about DIVI it’s limited to wordpress. It would be great to have an opensource universal website design builder. As far as Figma alternative penpot is awesome!

4

Yes – Penpot is more like a figma/sketch/XD alternative than a website builder. While the resulting design can look similar, a website builder has different features and is also usually bound to a certain content management system like Wordpress.

1 Like