Penpot: The Open-Source Design and Code Collaboration Tool

Design & Development Tools

Discover Penpot, the first open-source design tool for seamless design and code collaboration. Create stunning designs, prototypes, and design systems with native design tokens, CSS Grid, and more. Available on browser or self-hosted, supporting open standards.

Penpot Logo

MPL 2.0 License Discourse Posts Managed with TAIGA.io Gitpod Ready-to-Code

Penpot is the world's first open-source design tool built for seamless design and code collaboration. It empowers designers to create stunning designs, interactive prototypes, and scalable design systems, while developers benefit from ready-to-use code, streamlining their workflow without the typical "handoff drama."

Available directly in your browser or through self-hosting, Penpot champions open standards like SVG, CSS, HTML, and JSON, and it's completely free to use!

Recent updates have propelled Penpot even further. It now stands as the first design tool to integrate native design tokens, establishing a single source of truth that significantly enhances efficiency and collaboration between product design and development teams.

With its massive 2.0 release, Penpot has elevated the platform to an entirely new level. This landmark update introduces a groundbreaking CSS Grid Layout feature, a comprehensive UI redesign, an advanced Components system, and many other enhancements.

For organizations requiring enhanced services and support for their teams, we encourage you to get in touch.

🎇 Design, Code, and Open Source Converge at Penpot Fest! Join us for the 2025 edition in Madrid, Spain, on October 9-10.

Table of Contents

Why Penpot?

Penpot revolutionizes the design process by expressing designs directly as code. This two-way collaboration ensures designers can focus on creating their best work, confident it will be impeccably implemented by developers.

Plugin System

Penpot plugins allow you to significantly expand the platform's capabilities, offering the flexibility to integrate with other applications and develop custom solutions tailored to your needs.

Designed for Developers

Penpot is meticulously crafted to serve both designers and developers, fostering a fluid design-to-code workflow. Enjoy the benefits of real-time collaboration or choose to work independently.

Inspect Mode

Accelerate your workflow with ready-to-use code. The inspect tab provides instant access to SVG, CSS, and HTML code, making implementation fast and easy.

Self-Host Your Own Instance

Provide your team or organization with a fully owned, collaborative design tool. You can opt for Penpot's cloud service or effortlessly deploy your own Penpot server.

Integrations

Penpot offers robust integration into existing development toolchains through its comprehensive support for webhooks and an API accessible via secure access tokens.

Building Design Systems: Design Tokens, Components, and Variants

Penpot brings sophisticated design systems to code-minded teams. It offers a single source of truth with native Design Tokens, Components, and Variants to ensure scalable, reusable, and consistent UI across all projects and platforms.

Penpot Design System Screenshot

Getting Started

Penpot is the only design and prototyping platform that is deployment-agnostic. You can choose to use our SaaS offering or deploy it anywhere you prefer. Learn how to install it using Docker, Kubernetes, Elestio, or other options on our website.

Getting Started Image

Community

We deeply value the open-source software community. Contributing is our passion, and if it's yours too, we invite you to participate and help us improve Penpot. All your designs, code, and ideas are warmly welcomed!

Whether you need help, have questions, want to share your Penpot experience, seek inspiration, or wish to connect with 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

Community Image

Code of Conduct

Everyone contributing to Penpot, whether through code, community engagement, or event participation, is expected to adhere to our Code of Conduct to foster a positive and safe environment.

Contributing

Every contribution, big or small, significantly helps improve Penpot. Here are various ways you can get involved:

  • Share your creations: Create and share Libraries & Templates that will benefit the broader community.
  • Grow the community: Invite your team to join and experience Penpot.
  • Spread the word: Give this repository a star and follow us on Social Media: Mastodon, YouTube, Instagram, LinkedIn, Peertube, X (formerly Twitter), and BlueSky.
  • Engage in the Community: Participate in the Community space by asking and answering questions, reacting to articles, starting your own conversations, and following project decisions.
  • Report bugs: Use our easy guide for bug hunting or report directly via GitHub issues.
  • Become a translator: Help make Penpot accessible to a wider audience.
  • Provide feedback: Email us with your thoughts and suggestions.
  • Contribute to Penpot's code: Watch this video by Alejandro Alonso (CIO and developer at Penpot), where he provides a hands-on demo on how to use Penpot’s repository and make changes to both the front-end and back-end.
  • For a comprehensive guide on contributing to Penpot, please refer to our contributing guide.

Contributing Image

Resources

Explore our comprehensive resources to learn more and get involved:

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 the provided link.

Copyright (c) KALEIDOS INC Penpot is a Kaleidos’ open source project.