penpot / penpot

Penpot: The open-source design tool for design and code collaboration

Website • Getting Started • User Guide • Tutorials & Info • Community

Youtube • Peertube • Linkedin • Instagram • Mastodon • X

video-hero-homepage_v5.webm

Penpot is the first open-source design tool for design and code collaboration. Designers can create stunning designs, interactive prototypes, design systems at scale, while developers enjoy ready-to-use code and make their workflow easy and fast. And all of this with no handoff drama.

Penpot is available on browser and self host. It’s web-based and works with open standards (SVG, CSS and HTML). And last but not least, it’s free!

Penpot’s latest huge release 2.0, takes the platform to a whole new level. This update introduces the ground-breaking CSS Grid Layout feature, a complete UI redesign, a new Components system, and much more. Plus, it's faster and more accessible.

🎇 Penpot Fest is back! Our design, code & Open Source event is happening in Barcelona | June 5-7th. Get your tickets to join other designers and developers from open-source communities and beyond. Check out the highlights from Penpot Fest 2023 edition!

Table of contents

• Why Penpot
• Getting Started
• Community
• Resources
• License

Why Penpot

Penpot expresses designs as code. Designers can do their best work and see it will be beautifully implemented by developers in a two-way collaboration.

Designed for developers

Penpot was built to serve both designers and developers and create a fluid design-code process. You have the choice to enjoy real-time collaboration or play "solo".

Inspect mode

Work with ready-to-use code and make your workflow easy and fast. The inspect tab gives instant access to SVG, CSS and HTML code.

Self host your own instance

Provide your team or organization with a completely owned collaborative design tool. Use Penpot's cloud service or deploy your own Penpot server.

Integrations

Penpot offers integration into the development toolchain, thanks to its support for webhooks and an API accessible through access tokens.

What’s great for design

With Penpot you can design libraries to share and reuse; turn design elements into components and tokens to allow reusability and scalability; and build realistic user flows and interactions.

Getting started

Install with Elestio

Penpot is the only design & prototype platform that is deployment agnostic. You can use it or deploy it anywhere.

Learn how to install it with Elestio and Docker, or other options on our website.

Community

We love the Open Source software community. Contributing is our passion and if it’s yours too, participate and improve Penpot. All your designs, code and ideas are welcome!

If you need help or have any questions; if you’d like to share your experience using Penpot or get inspired; if you’d rather meet our community of developers and designers, join our Community!

You will find the following categories:

• Ask the Community
• Troubleshooting
• Help us Improve Penpot
• #MadeWithPenpot
• Events and Announcements
• Inside Penpot
• Penpot in your language
• Design and Code Essentials

Contributing

Any contribution will make a difference to improve Penpot. How can you get involved?

Choose your way:

• Create and share Libraries & Templates that will be helpful for the community
• Invite your team to join
• Star this repo and follow us on Social Media: Mastodon, Youtube, Instagram, Linkedin, Peertube and X.
• Participate in the Community space by asking and answering questions; reacting to others’ articles; opening your own conversations and following along on decisions affecting the project.
• Report bugs with our easy guide for bugs hunting or GitHub issues
• Become a translator
• Give feedback: Email us
• Contribute to Penpot's code: Watch this video by Alejandro Alonso, CIO and developer at Penpot, where he gives us a hands-on demo of how to use Penpot’s repository and make changes in both front and back end

To find (almost) everything you need to know on how to contribute to Penpot, refer to the contributing guide.

Resources

You can ask and answer questions, have open-ended conversations, and follow along on decisions affecting the project.

💾 Documentation

🚀 Getting Started

✏️ Tutorials

🏘️ Architecture

📚 Dev Diaries

License

This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) KALEIDOS INC

Penpot is a Kaleidos’ open source project

penpot's Issues

History version numbers sometimes skip numbers.

Path objects and pencil objects should be differentiated.

Path objects and pencil objects use different tools and icons to create them, but they are represented by the same icon and name in the layers panel. It would be more consistent and easier to identify if the pencil objects were given a pencil icon and name.

Remove full name from sign up.

The need for full name at sign up is unclear. If there is no reason for it, can we remove it, to make sign up simpler? This will require removal from profile page as well.

Cannot login/register

I'm getting "Unable to connect to backend server" message.
In the console:

XMLHttpRequest cannot load https://test.uxbox.io/api/auth/token. Response for preflight is invalid (redirect)

'on-error: {:status 0, :payload ""} uxbox$main$ui$on_error @ ui.js:39'

undefined uxbox$main$ui$on_error @ ui.js:41

However, I can login to the demo site.

Clicking the Ruler icon does not do anything.

Ruler is showing, whether the ruler icon is clicked or not.

Tested on Chromium and Firefox at commit #ba40b99c.

Text does not become transparent.

Opacity slider does not change text transparency, whether the text object or actual text is selected.

Improve backend error message

If I cannot connect to demo.uxbox.io after I log in, I get the "Unable to connect to backend server" error message. However, my pages load and most of the functionality is available. Therefore, the error message could be more descriptive and tell me what functionality remains and what is lost. Obviously, if my work has been saved is the most important!

Note that this is the same message I get if I cannot login, so there may need to be specific messages, not just 1 generic message.

Finally, some kind of help or suggestions would be nice to troubleshoot.

View mode is missing the "Sitemap" title.

Edit mode

View mode

Close button does not close "new project" dialogue box

Also, the close button does not change colour until I click it. It should change (I think) when I hover over it. I can only close the dialogue box if I click outside the box, but not on the close button.

Interestingly, I can close the "new color" dialogue box by clicking on the button (but again the colour only changes when I click it).

Cannot create shapes in all directions when using proportion lock.

When I hold down Ctl, the shape is not created in the same direction as the mouse movement. See gif. This happens with circles and text boxes as well.

View mode icon is a different colour.

Is there a reason why the view mode icon is a different colour to all the other icons?

Make functionality of ruler tool icon more obvious.

The function of the ruler icon is not clear. It is currently next to the grid icon which shows/hides the grid, which suggests that the ruler icon shows/hides the x-y axis page rulers (it actually measures distances between 2 points). The location, icon, etc should be improved to make the function clearer.
See issue #48 for an example of confusion!

View Mode Redirection

When click on View Mode (Ctrl + P). The url dosent hold the IP on which the application is hosted. it goes to local host IP.

Cannot ungroup objects.

If I select the group layer, the ungroup icon is disabled. I expect to be able to ungroup all objects if the group-1 object is selected.

If I select a grouped object, the ungroup icon is enabled, but does not ungroup. It would be nice if selecting one grouped object (eg Circle-1) let me ungroup only that object.
.

However, I can ungroup nested groups. But it still does strange things. Notice in the gif that after I ungroup Group-3, the ungroup icon is still enabled and only after I click it again does it become disabled.

Connection to Running UXBOX Docker Image

Hi,

when i try to reconnect the docker image, it restarts the process of running the app and thus it done finds uxbox under /home/uxbox/ . How to reconnect the running application Docker image/Container terminal.

NOTE: STILL THE APPLICATION IS ACCESSIBLE FROM WEB URL.

Explain uxbox's vision in Readme and landing page.

A vision of what uxbox aspires to be will encourage early adoption and contribution. Contributors will be able to decide if uxbox is a project that they want to contribute to. This also helps keep uxbox on track. It also improves transparency. See Jared Spool's 3Qs.

The vision should describe uxbox's raison d'etre. This boils down to:

• values of the organisation
• what differentiates uxbox from other prototyping tools
• why you are building uxbox. What pain points are you trying to solve.
• a description of what uxbox intends to be at version 1 (?)

Change location of error messages

Error messages cover the top toolbar and prevent me from using it, even though the toolbar is functional. Perhaps showing it at the top of the canvas is less intrusive?

Grid is disabled when pages are changed.

how to use

I've started the docker container but I'm unfamiliar with tmux and not sure how to use it.

I'm not even sure what to look for, are there screenshots anywhere to help get started?

Recover password does not work.

Password recovery email does not get sent. Is this just because those settings are disabled or not configured for the dev environment?

NVM Git Clone Issues

Hi, i am facing the issues over NVM git clone. able to clone form the server but this docker file is uable to pull it. Can u please have look on the bellow error i faced.

Inconsistent naming: "Shapes" and "Draw tools"

"Canvas tools" may be a better name. The ruler tool would fit semantically with these tools then.

Export as HTML does not work

Clicking the "Export HTML" button does nothing in Chromium or Firefox.

Rectangles and text boxes cannot be drawn right to left or bottom to top

Drawing a rectangle from top left down works, but starting from any other corner does not. Text boxes have the same bug. Other drawing tools (circle, line etc) are fine. I guess that negative lengths cannot be drawn.

Login page button should be renamed "Sign in".

"Continue" suggests that there are more steps to be completed. (Also, I think "Get started" is more friendly than "Register").

Measure tool needs text background

Measurements cannot be seen if the background and measurement text are the same colour. A (semi-transparent) text background would fix this.

In sign up and login page, the first form input should have tabindex=1.

At present, sections that are unrelated to inputs have initial focus.
Also, the other links "Forgot your password?", "Don't have an account?" should also get tab focus.

Autoconf missing

FYI: I got the following error message when running the manage.sh script:

CDPATH="${ZSH_VERSION+.}:" && cd . && /bin/bash /imagemagick/config/missing autoconf
/imagemagick/config/missing: line 81: autoconf: command not found
WARNING: 'autoconf' is missing on your system.
         You should only need it if you modified 'configure.ac',
         or m4 files included by it.

Fixed it by adding autoconf to the Dockerfile :)

X-axis ruler is transparent, Y-axis ruler is grey.

I mentioned this in #50, but it has not been addressed, so I have opened another issue.

Redo does not work.

I hope I'm not annoying you with all this feedback!!! :D Keep up the great work. I'm looking forward to an amazing release!

dockerfile imagemagick version

• update imagemagick version

7.0.4-6 is out of date and not retrievable at url.

Export icon is unclear.

The export icon is very similar to the common "share" icon.
.
In View mode, the same icon has a "share" tooltip.

In the export dialogue box, all the explanations use the word "download".
Perhaps, the export icon should be called "download" and the icon changed to reflect this.

Magnet is checked, but not enabled when grid is off.

Grid is off in the image below, but the magnet is checked. If I move objects when grid is off, it does not snap to grid.

There are three solutions:

1. snap to grid even when grid is off.
2. dim and disable magnet (and other grid settings) when grid is off.
3. dim and disable grid settings, on click of grid settings, undim, enable and edit settings and show grid.

Option 3 is the best UX and most work :D. This would require some thought as to how to show that the settings are disabled. The text is so dim already, another visual indicator is required.
As an aside, the "Magnet option" would be better named "Snap", with the checkbox labelled "Snap to grid".

npm bugs uxbox Gulp Error On start up

Hii, during the start i am getting an error with gulp. please check the below screen shot, and can you guide me for this.

"Sitemap" should be renamed "Pages".

Even if you are planning to show pages as a tree structure, the Sitemap panel should be renamed. Sitemaps are very different things. I guess the icon should also be changed at the same time. The position of the project name coud be improved as well.
Something like this?

Lock icon for size and radius is unclear.

Only the colour changes, not the shape. This makes it difficult to remember which is which and tell the difference, especially for colour blind people. Hovering over the icon also changes the icon to the same colour as locked, but does not change the state, unless you click, which makes things even more confusing. A slightly bigger icon would be even clearer!
Screenshot is from firefox, but Chromium is similar.

Clicking current history version flashes dialogue box.

When I click the current history version, the dialogue box appears and disappears.

No server error message at recover password.

I do not get an error message when I submit a recover password request when I have no connection.

getting error during starting

I got the error in figweel(#1) tmax screen

Saving to: ‘/home/uxbox/.lein/self-installs/leiningen-2.7.1-standalone.jar.pending’

/home/uxbox/.lein/self-installs/leini 100%[=======================================================================>]  14.66M   136KB/s    in 3m 5s   

2017-01-20 14:43:01 (81.2 KB/s) - ‘/home/uxbox/.lein/self-installs/leiningen-2.7.1-standalone.jar.pending’ saved [15370238/15370238]

Could not transfer artifact lein-ancient:lein-ancient:pom:0.6.10 from/to clojars (https://clojars.org/repo/): Specified destination directory cannot be created: /home/uxbox/.m2/repository/lein-ancient/lein-ancient/0.6.10
This could be due to a typo in :dependencies or network issues.
If you are behind a proxy, try setting the 'http_proxy' environment variable.

npm ERR! Linux 4.8.0-34-generic
npm ERR! argv "/home/uxbox/.nvm/versions/node/v6.9.1/bin/node" "/home/uxbox/.nvm/versions/node/v6.9.1/bin/npm" "run" "figwheel"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] figwheel: `PATH=./scripts:$PATH ./scripts/build-worker && PATH=./scripts:$PATH ./scripts/figwheel`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] figwheel script 'PATH=./scripts:$PATH ./scripts/build-worker && PATH=./scripts:$PATH ./scripts/figwheel'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the uxbox package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     PATH=./scripts:$PATH ./scripts/build-worker && PATH=./scripts:$PATH ./scripts/figwheel
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs uxbox
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls uxbox
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/uxbox/uxbox/frontend/npm-debug.log
uxbox@44074e1b6533:~/uxbox/frontend$

and backend(#2) tmax screen too

uxbox@44074e1b6533:~/uxbox/backend$ ./scripts/run.sh 
Could not transfer artifact lein-ancient:lein-ancient:pom:0.6.10 from/to clojars (https://clojars.org/repo/): Specified destination directory cannot be created: /home/uxbox/.m2/repository/lein-ancient/lein-ancient/0.6.10
This could be due to a typo in :dependencies or network issues.
If you are behind a proxy, try setting the 'http_proxy' environment variable.

Some errors trying to start the docker container:

Error on starting figwheel in frontend

In frontend:

npm run figwheel

> [email protected] figwheel /home/uxbox/uxbox/frontend
> PATH=./scripts:$PATH ./scripts/build-worker && PATH=./scripts:$PATH ./scripts/figwheel

Could not transfer artifact lein-ancient:lein-ancient:pom:0.6.10 from/to clojars (https://clojars.org/repo/): Specified destination directory cannot be created: /home/uxbox/.m2/repository/lein-ancient/lein-ancient/0.6.10
This could be due to a typo in :dependencies or network issues.
If you are behind a proxy, try setting the 'http_proxy' environment variable.

npm ERR! Linux 4.8.0-37-generic
npm ERR! argv "/home/uxbox/.nvm/versions/node/v6.9.2/bin/node" "/home/uxbox/.nvm/versions/node/v6.9.2/bin/npm" "run" "figwheel"
npm ERR! node v6.9.2
npm ERR! npm  v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] figwheel: `PATH=./scripts:$PATH ./scripts/build-worker && PATH=./scripts:$PATH ./scripts/figwheel`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] figwheel script 'PATH=./scripts:$PATH ./scripts/build-worker && PATH=./scripts:$PATH ./scripts/figwheel'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the uxbox package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     PATH=./scripts:$PATH ./scripts/build-worker && PATH=./scripts:$PATH ./scripts/figwheel
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs uxbox
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls uxbox
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/uxbox/uxbox/frontend/npm-debug.log

Error on starting clojure stuff in backend

In backend:

./scripts/run.sh

Could not transfer artifact lein-ancient:lein-ancient:pom:0.6.10 from/to clojars (https://clojars.org/repo/): Specified destination directory cannot be created: /home/uxbox/.m2/repository/lein-ancient/lein-ancient/0.6.10
This could be due to a typo in :dependencies or network issues.
If you are behind a proxy, try setting the 'http_proxy' environment variable.

I've no idea where I am going wrong here.

Any idea?

Cannot revert to previous history versions

Even if I click a previous version and press "accept", the latest ("current") version is always highlighted.

"Activate magnet" does not do anything.

I expect "activate magnet" to align objects to the grid (when I move them), but nothing happens. There are also a number of usability issues (like the name and "magnet option" is not necessary), which perhaps should go in a different issue.

Tested on Chromium and Firefox at commit #ba40b99c.

Keyboard collision for many keyboard shortcuts

Many of the uxbox keyboard shortcuts are standard browser keyboard shortcuts (on Chrome, Firefox, Edge for Windows/Linux). For example:
Ctl-R -> reload page
Ctl-Shift-H -> open history window
Ctl-Shift-O -> open bookmarks window
See Chrome, Firefox, Edge and Safari keyboard shortcuts for details.

Whoever designed uxbox's shortcuts was obviously using a Mac ;-)

I can suggest some hopefully better shortcuts (later) if you want.

Order of pages is different in edit mode and view mode.

In edit mode, new pages are added above the current page. In view mode, pages are added to the end of the list. Personally, I think adding new pages immediately below the current page is the most intuitive.

No form validation messages on sign up

I do not see any error messages when:

• username is missing
• Email is invalid/missing

Nothing happens when I click the register button.

Paths should have a fill colour of "none".

When paths are created, the default fill colour is black at an opacity of 0%. However, this is confusing because the path is not filled (the first thing you see is the black palette, my eye did not go further to see the opacity setting). If it were set to "none", it would be more intuitive. Inkscape has a "no fill" button (see below).

Further, even when you change the colour, the path does not change, because opacity is 0%. If you change from a colour of "none", to some colour, the opacity should default to 100%.
Maybe, something like this?

In sign up and login page, tab does not highlight "Continue" or "Register" button.

Even though the button is focused, there is no visual indication. Changing colour and bolding text/border change is required. Links, should also change visually on focus.

"Export project" button in "Export options" dialogue box does not state what format is zipped.

I do not know if the zipped files are svg or html or other. Perhaps explain as "Download all pages as svg in a zip file."

Docker Installation error

Hii i am facing an error during installation in step 21 which is imagemagick installations. Also have atatched the screenshot of the error which i got. can you please help me with the same.

Ctl-drag does not create a perfect square or circle.

When using the rectangle or circle tool to create a new shape, I expect Ctl-drag to create a perfect square or circle, but it does not. This is the default for most graphics software.