Self-Hosting Penpot for Complete Design Infrastructure Control

Penpot is an open-source design platform tailored for teams building digital products, focusing on self-hosting and full ownership of design infrastructure. This allows organizations to maintain strict compliance and data governance requirements without sacrificing the features typical of modern design and prototyping tools. With its real-time collaboration, a native focus on CSS Grid and Flex layouts, and integrated Design Tokens, Penpot naturally bridges the gap between designers and developers. It provides a full-stack workspace where design is directly translatable to code.

Beyond its core design and prototyping capabilities, Penpot operates with open standards at its foundation, generating scalable SVG, CSS, and HTML instead of proprietary, opaque formats. This philosophy aligns perfectly with organizations running open-source ecosystems, as they can directly extract assets and tokens for their CI/CD pipelines or frontend repositories.

Getting Started with Docker

Penpot can be easily started using a docker-compose file downloaded directly from their repository. This provides a fast and reliable path to setting up the backend API, the frontend client, the Postgres database, and the necessary asset storage volumes on any machine capable of running Docker and Docker Compose.

To begin the deployment process, you must download the official docker-compose.yaml configuration file. You can fetch this directly from Penpot's official GitHub repository:

Once the file is available locally in your working directory, you can start the Penpot instance by running the following orchestration command. This process will pull the latest stable Docker images from Docker Hub, initialize the persistence layers, and start the services in detached mode in the background:

When the initialization completes, the Penpot application will begin listening on http://localhost:9001 on your host machine. At this point, the core application is running, but further configuration is recommended for a production deployment.

Configuring NGINX Proxy

For production environments, serving Penpot securely over HTTPS is crucial to ensure user data and sessions remain safe. To achieve this, you need to set up a reverse proxy in front of the Penpot Docker containers. An NGINX proxy can be configured to serve Penpot over HTTPS, with specific settings for handling Websockets used by notifications and the multiplayer collaboration engine.

Because Penpot heavily relies on WebSocket connections for its real-time collaborative editing and cursor tracking, it is vital to explicitly define the proxy headers that upgrade standard HTTP connections to WebSockets. Here is a partial NGINX configuration snippet that correctly maps the WebSocket traffic for real-time notifications to the underlying Penpot container:

Ensuring that both $http_upgrade and Connection 'upgrade' are properly set enables the continuous bidirectional synchronization that makes the multiplayer collaborative features inside Penpot function seamlessly. You will also need to configure the standard proxy passes for regular traffic and adjust client_max_body_size to permit large asset uploads.

For the complete documentation on configuring the environment, performing version upgrades, and running Penpot reliably, be sure to check out the official Docker Installation Guide.