# Penpot for websites

**URL:** <https://community.penpot.app/t/penpot-for-websites/8563>\
**Category:** Ask the community\
**Tags:** design\
**Created:** [April 25, 2025, 11:30am UTC](https://community.penpot.app/t/penpot-for-websites/8563 "2025-04-25T11:30:04Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![lazar](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/lazar/32/7829_2.png) [@lazar](https://community.penpot.app/u/lazar)\
**Post date:** [April 25, 2025, 11:30am UTC](https://community.penpot.app/t/penpot-for-websites/8563/1 "2025-04-25T11:30:04Z")

</div>

Hey, I am curious does anyone use Penpot for designing websites here?

If yes, I would love to quick chat with some of you!

---

<div class="post-metadata">

**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\
**Post date:** [April 25, 2025, 1:59pm UTC](https://community.penpot.app/t/penpot-for-websites/8563/2 "2025-04-25T13:59:05Z")

</div>

👋 I think Penpot is ideal for web design!

---

<div class="post-metadata">

**Author:** ![RenanMayrinckDesign](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/renanmayrinckdesign/32/3104_2.png) [@RenanMayrinckDesign](https://community.penpot.app/u/RenanMayrinckDesign)\
**Post date:** [April 25, 2025, 7:50pm UTC](https://community.penpot.app/t/penpot-for-websites/8563/3 "2025-04-25T19:50:14Z")

</div>

Yes I do use it for that and is awesome. The html code output from the tool is not perfect, but the CSS one is.

---

<div class="post-metadata">

**Author:** ![lazar](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/lazar/32/7829_2.png) [@lazar](https://community.penpot.app/u/lazar)\
**Post date:** [April 25, 2025, 8:10pm UTC](https://community.penpot.app/t/penpot-for-websites/8563/4 "2025-04-25T20:10:09Z")

</div>

What’s wrong with HTML?

---

<div class="post-metadata">

**Author:** ![RenanMayrinckDesign](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/renanmayrinckdesign/32/3104_2.png) [@RenanMayrinckDesign](https://community.penpot.app/u/RenanMayrinckDesign)\
**Post date:** [April 25, 2025, 8:43pm UTC](https://community.penpot.app/t/penpot-for-websites/8563/5 "2025-04-25T20:43:48Z")

</div>

Depending on how you have structured your component, it will not just be copy and paste to your code editor and everything will be fine. Sometimes you will need to recreate it to make things semantic.

It’s not exactly wrong, is just not perfect for every context.

---

<div class="post-metadata">

**Author:** ![cebulon](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/cebulon/32/8044_2.png) [@cebulon](https://community.penpot.app/u/cebulon)\
**Post date:** [May 25, 2025, 9:03am UTC](https://community.penpot.app/t/penpot-for-websites/8563/6 "2025-05-25T09:03:18Z")

</div>

Why? You can’t export what you created. It is pointless to use it for web design, other than have a nice picture. For which you can use Photoshop too.

---

<div class="post-metadata">

**Author:** ![cebulon](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/cebulon/32/8044_2.png) [@cebulon](https://community.penpot.app/u/cebulon)\
**Post date:** [May 25, 2025, 9:04am UTC](https://community.penpot.app/t/penpot-for-websites/8563/7 "2025-05-25T09:04:12Z")

</div>

How to get the HTML and CSS? I am on the free plan.

---

<div class="post-metadata">

**Author:** ![RenanMayrinckDesign](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/renanmayrinckdesign/32/3104_2.png) [@RenanMayrinckDesign](https://community.penpot.app/u/RenanMayrinckDesign)\
**Post date:** [May 26, 2025, 2:37am UTC](https://community.penpot.app/t/penpot-for-websites/8563/8 "2025-05-26T02:37:59Z")

</div>

Hello @cebulon

You have to select the element you want to see the code for, then switch to the inspect mode at the top right of the screen. Two other options will show up: info and code. Just choose **code** , and it will be there for you to copy.

Of course, Penpot does not translate every element to what it was supposed to be semantically on HTML, so if you’ve drawn a `<select>`, it will probably show as a div and you’ll have to correct it on your code editor.

---

<div class="post-metadata">

**Author:** ![MarioPeters](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/mariopeters/32/8528_2.png) [@MarioPeters](https://community.penpot.app/u/MarioPeters)\
**Post date:** [August 2, 2025, 6:47am UTC](https://community.penpot.app/t/penpot-for-websites/8563/9 "2025-08-02T06:47:38Z")

</div>

I’m currently using Figma for web design and am experimenting with Penpot to see if I can move my workflow to Penpot. It’s promising so far. I’m looking forward to play with variants and see what is possible in combination with design tokens.
