# Local environment and help offering

**URL:** <https://community.penpot.app/t/local-environment-and-help-offering/2476>\
**Category:** Ask the community\
**Tags:** design\
**Created:** [February 6, 2023, 11:50am UTC](https://community.penpot.app/t/local-environment-and-help-offering/2476 "2023-02-06T11:50:30Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![ondrejkonec](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/ondrejkonec/32/673_2.png) [@ondrejkonec](https://community.penpot.app/u/ondrejkonec)\
**Post date:** [February 6, 2023, 11:50am UTC](https://community.penpot.app/t/local-environment-and-help-offering/2476/1 "2023-02-06T11:50:30Z")

</div>

Hi team!

I have 2 topics I would like to discuss.

1. Is there any way how I can run Penpot app (for e.g. using Docker what works for me) locally where I can debug changes in code? By this I mean if there is some approach like when I run Penpot help, where I can see every change in code when running locally.

2. I saw that you have new Penpot site. Do you plan update also help center based on new designs? I’m offering you my coding experience so if you plan to change your Help site with same visual designs as Penpot site, I can code your Help center based on that.

I can do it without prepared designs (using your design foundations), but I’m not sure if this is something you would like to do. If this approach is also welcome, I can create changes based on your new Penpot site. Feel free to contact me - or can I be more active?

Ondřej

---

<div class="post-metadata">

**Author:** ![alotor](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/alotor/32/42_2.png) [@alotor](https://community.penpot.app/u/alotor)\
**Post date:** [February 6, 2023, 3:31pm UTC](https://community.penpot.app/t/local-environment-and-help-offering/2476/2 "2023-02-06T15:31:59Z")

</div>

Thanks for the offering Ondřej.

About the first one. Yes, of course. If you clone the repository of Penpot you can run `./manage.sh run-devenv` and a development environment using docker containers will be up and running. The terminal it will open is a Tmux with 4 windows: 0- gulp 1- frontend 2-exporter 3-backend. So if you’re doing frontend development just change with “Ctrl+b 1” and you will see the compilation results.

We’ve got that documented here: [3.3. Dev environment](https://help.penpot.app/technical-guide/developer/devenv/)

You can see me doing it in a video i recorded some time ago: [Challenges of developing a tool for designers - YouTube](https://www.youtube.com/live/owZD7ORa4dg?feature=share&t=710) (I start the environment around 11:50)

---

<div class="post-metadata">

**Author:** ![myfunnyandy](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/myfunnyandy/32/54_2.png) [@myfunnyandy](https://community.penpot.app/u/myfunnyandy)\
**Post date:** [February 7, 2023, 11:23am UTC](https://community.penpot.app/t/local-environment-and-help-offering/2476/3 "2023-02-07T11:23:55Z")

</div>

About the topic 2. At the Help Center we will update the illustrations for the categories (user guide, faqs, etc) probably today. Nothing else is in our minds, as the rest of the look & feel (colors and typography) is still in line with the new web aesthetics.

If you have more specific proposals to update the Help Center we’d love to know about them and the reasons behind so we can have a clear idea before coding anything.

Thanks for the offering!

---

<div class="post-metadata">

**Author:** ![ondrejkonec](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/ondrejkonec/32/673_2.png) [@ondrejkonec](https://community.penpot.app/u/ondrejkonec)\
**Post date:** [February 8, 2023, 7:58am UTC](https://community.penpot.app/t/local-environment-and-help-offering/2476/4 "2023-02-08T07:58:36Z")

</div>

Thank you for your reply. I somehow missed this part in documentation and I think that there is only one way how to run app locally using Docker or Elestio.

Anyway, I have some issues. When I use “docker compose -p penpot -f docker-compose.yaml up -d”, app is running smoothly. When I tried approach with “./manage.sh run-devenv” nothing is happening and I can’t figure out where the problem is. Do you think that [you can take a look on the video](https://youtu.be/3DaQEN4FPHQ) and tell me, if there is something wrong (note that [there is long building process, you can skip it)](https://youtu.be/3DaQEN4FPHQ?t=433)?

_What is interesting is that I can watch CSS changes, just can’t run it in browser for some reason_:

 ![Snímek obrazovky 2023-02-08 v 9.52.46](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/e/e222f5768e6e5d95bcaf2a7a2eb53cb244017fa9.png)

Thank you for your help @alotor !

---

<div class="post-metadata">

**Author:** ![ondrejkonec](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/ondrejkonec/32/673_2.png) [@ondrejkonec](https://community.penpot.app/u/ondrejkonec)\
**Post date:** [February 8, 2023, 8:37am UTC](https://community.penpot.app/t/local-environment-and-help-offering/2476/5 "2023-02-08T08:37:59Z")

</div>

Thank you for reply @myfunnyandy. What I meant is changing for example color shades based on your main page, swap typography setting (line-heights, letter spacing, sizes, weights etc.) and font family (Source Sans Pro vs. Work Sans), small graphic details like border radiuses, button sizes etc.

 ![Snímek obrazovky 2023-02-08 v 9.32.57](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/1/187b7ab8af37cd3e9abc3e985026c406282ec9ed.png)

There is an example and if you like this idea, I can prepare changes and post prev/update version next to each other.

I’m not sure if it’s your goal, but I have experience in this, so I thought I could take it on.

Ondřej

---

<div class="post-metadata">

**Author:** ![myfunnyandy](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/myfunnyandy/32/54_2.png) [@myfunnyandy](https://community.penpot.app/u/myfunnyandy)\
**Post date:** [February 8, 2023, 12:36pm UTC](https://community.penpot.app/t/local-environment-and-help-offering/2476/6 "2023-02-08T12:36:53Z")

</div>

Much clearer now, thaks for the explanation. I’ve discussed this with the design team and as long as changes are constrained to look & feel following the aesthetics of the new website and maintain content and structure we will feel confortable with your approach.

So yes, please go ahead preparing those changes, we’d love to see them.

---

<div class="post-metadata">

**Author:** ![ondrejkonec](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/ondrejkonec/32/673_2.png) [@ondrejkonec](https://community.penpot.app/u/ondrejkonec)\
**Post date:** [February 8, 2023, 4:39pm UTC](https://community.penpot.app/t/local-environment-and-help-offering/2476/7 "2023-02-08T16:39:31Z")

</div>

I was thinking about these changes:  
**General** :

1. Change font typeface to “Work Sans”
2. Created new color palette from Penpot page
3. Change paragraphs `<p>` and lists `<li>` font size to 16px from 17.6px according to website

**Homepage** :

1. Change heading `<h1>` size and settings
2. Change primary button settings - radius, size, leading, inner spacing (padding), motion effects and transitions - 1:1 w/ Penpot site)
3. Added new gray palette from Penpot site (I kept old one) and applied to (border, header, inputs, texts color)
4. **Search input** update: larger radius, border color, icon color and vertical alignment, inner padding, placeholder typography settings (kerning, indented from the left side)
5. **Menu** - font size change to 16px, font weight changed to Medium (500) - everything according to Penpot web, Added blu effect according to Penpot page
6. **Cards** (User guide, FAQ’s etc.) - changed border, inner spacing, description text darker gray from new palette, removed green border and shadow effect on hover (it’s softer then on Penpot page, because here it looks little bit aggressive)
7. **Advice tag in Card** (WIP) - try different approach, that fit more to rest of the page and does not look like buggy button. Please feel free to advice any changes here - it’s a bigger change.
8. **Github section** - change font size from 17.6 to 16px, changed dashed top/bottom borders color to new gray medium
9. **Pre footer** - changed dashed border color

**Page detail**

1. Changed font size for **leading intro text** from 24px to 20px (because Work Sans have different propositions)
2. Polish typography settings (maily paragraph spacing because of new font)
3. Intro section cards (e.g. Quick Start, Interface) - align to the grid (see screenshot below)

 ![Snímek obrazovky 2023-02-08 v 16.34.37](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/e/eb745bab6e8eb999ca78f5ae7794afd536563b03.png)

And few more changes, that I will describe on PR if you agree. There you can see screenshot and video from updated version. Feel free to comment anything that you think should be changed. There is more things to improve (mobile version, heading settings in articles etc.) but I would like to start with this and confirm, if it add value for you.

There is screenshot and video from Homepage and detail:

 ![screencapture-localhost-8080-2023-02-08-17_04_18](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/5/5e9535eb1c60271ca471ce977b41d4c589b9e840.png)

**Video** (not sure if this approach is useful and you can focus on details), it’s better to run docs and compare it in browser.

[![](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/b/bf9ccdcb934fab7e4bc939218de946b4977242d1.jpeg "Penpot Doc Update") ](https://www.youtube.com/watch?v=SPDroSxkX3Q)

Please, let me know, if it was useful for you and if I can prepare PR for you.

---

<div class="post-metadata">

**Author:** ![myfunnyandy](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/myfunnyandy/32/54_2.png) [@myfunnyandy](https://community.penpot.app/u/myfunnyandy)\
**Post date:** [February 9, 2023, 1:02pm UTC](https://community.penpot.app/t/local-environment-and-help-offering/2476/8 "2023-02-09T13:02:23Z")

</div>

Great and subtle job @ondrejkonec and great summary too. Having a reasoned, comprehensive list of changes helps us a lot to be able to accept them.

About the “WIP” tag, I like the new approach. Funny thing is that I was thinking on removing it as the purpose of it seems to be outdated. We’ve launched this documentation with very few information and we felt that this was neccessary to indicate that we kwen that a lot of content were still missing, and the situation is more than a bit different now.

About the search box, have you tried to write something there? It displays a list with the predicted results that had suffered some missalingments in the past. It might worth to check it this time.

Please go ahead with the PR, we’d love to publish those changes.

---

<div class="post-metadata">

**Author:** ![ondrejkonec](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/ondrejkonec/32/673_2.png) [@ondrejkonec](https://community.penpot.app/u/ondrejkonec)\
**Post date:** [February 9, 2023, 2:34pm UTC](https://community.penpot.app/t/local-environment-and-help-offering/2476/9 "2023-02-09T14:34:55Z")

</div>

Thanks @myfunnyandy and I hope it help.

Talking about WIP tag - do you want to remove it right now? I can do it on already existing pull request.

This PR is already here [https://github.com/penpot/penpot-docs/pull/132](https://github.com/penpot/penpot-docs/pull/132) and feel free to ask for more help.

I did not check (even did not know that there is search list) so I’ll check this item and add commit if need.

I will also create one more PR in few days with mobile version improvements (mostly bugs) so I’ll mention you in the comment. What do you think?

I’m happy to help.

Ondřej

---

<div class="post-metadata">

**Author:** ![myfunnyandy](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/myfunnyandy/32/54_2.png) [@myfunnyandy](https://community.penpot.app/u/myfunnyandy)\
**Post date:** [February 9, 2023, 3:00pm UTC](https://community.penpot.app/t/local-environment-and-help-offering/2476/10 "2023-02-09T15:00:36Z")

</div>

As it no longer serves its initial purpose you can remove the WIP tag. If it’s any inconvenience for you we can do it ourselves, of course.

Don’t worry about the search list, we’ll check that case when reviewing the PR. And I’ll be happy to keep discussing you more proposals. The Help Center has a lot of room for improvements at smaller/mobile sizes, so bugfixing sounds great.

I’m happy you’re happy to help 🙂

---

<div class="post-metadata">

**Author:** ![ondrejkonec](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/ondrejkonec/32/673_2.png) [@ondrejkonec](https://community.penpot.app/u/ondrejkonec)\
**Post date:** [February 9, 2023, 3:32pm UTC](https://community.penpot.app/t/local-environment-and-help-offering/2476/11 "2023-02-09T15:32:23Z")

</div>

I think what I can do for searchbox right now is that I can change list height according to list items. I think that is better experience even it’s just a detail.

[https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/4/46ee9a5d6af7ea34b61a03969e8b4e9f35ff6e9c.webm](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/4/46ee9a5d6af7ea34b61a03969e8b4e9f35ff6e9c.webm)

**Current version** :

 ![Snímek obrazovky 2023-02-09 v 16.31.39](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/a/a03b37c96c098df4b4398f3fc66048c2daf9d0d5.jpeg)

What do you think @myfunnyandy ?

---

<div class="post-metadata">

**Author:** ![myfunnyandy](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/myfunnyandy/32/54_2.png) [@myfunnyandy](https://community.penpot.app/u/myfunnyandy)\
**Post date:** [February 9, 2023, 4:28pm UTC](https://community.penpot.app/t/local-environment-and-help-offering/2476/12 "2023-02-09T16:28:11Z")

</div>

Adapting the container size to its content at dropdowns it’s a common best practice so that’s definitely better.

---

<div class="post-metadata">

**Author:** ![ondrejkonec](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/ondrejkonec/32/673_2.png) [@ondrejkonec](https://community.penpot.app/u/ondrejkonec)\
**Post date:** [February 9, 2023, 4:40pm UTC](https://community.penpot.app/t/local-environment-and-help-offering/2476/13 "2023-02-09T16:40:10Z")

</div>

Allright. I update my branch with this fix + I already removed the tag “WIP” from User guide.

---

<div class="post-metadata">

**Author:** ![myfunnyandy](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/myfunnyandy/32/54_2.png) [@myfunnyandy](https://community.penpot.app/u/myfunnyandy)\
**Post date:** [February 10, 2023, 12:39pm UTC](https://community.penpot.app/t/local-environment-and-help-offering/2476/14 "2023-02-10T12:39:26Z")

</div>

@ondrejkonec the changes are already published at [https://help.penpot.app](https://help.penpot.app) and look great. Thanks!

---

<div class="post-metadata">

**Author:** ![ondrejkonec](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/ondrejkonec/32/673_2.png) [@ondrejkonec](https://community.penpot.app/u/ondrejkonec)\
**Post date:** [February 10, 2023, 1:01pm UTC](https://community.penpot.app/t/local-environment-and-help-offering/2476/15 "2023-02-10T13:01:51Z")

</div>

Thanks @myfunnyandy for publishing my changes, I appreciate that! And it really works great IMHO 🙂

---

<div class="post-metadata">

**Author:** ![ondrejkonec](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/ondrejkonec/32/673_2.png) [@ondrejkonec](https://community.penpot.app/u/ondrejkonec)\
**Post date:** [February 13, 2023, 9:28am UTC](https://community.penpot.app/t/local-environment-and-help-offering/2476/16 "2023-02-13T09:28:02Z")

</div>

Just letting you know, that I [figure out how to run the app](https://community.penpot.app/t/code-contributions-welcome/1870/14). Thank you for you help!
