Penpot is an open-source design and prototyping platform that runs in the browser and can be self-hosted, used by designers and developers to create interfaces, components, prototypes and design systems collaboratively. In design workflow, it is the main open-source alternative to proprietary tools such as Figma and Sketch.
Penpot is distinguished by its reliance on open web standards. Designs are represented as SVG, and its layout features map directly to CSS Flexbox and CSS Grid, so what designers build is close to what developers implement. It is released under the Mozilla Public License 2.0 and is developed by the Spanish company Kaleidos together with a public community.
How Penpot works
Penpot is a web application with real-time multiplayer editing. Team members open the same file in a browser, see each other’s cursors and changes live, and leave comments on the canvas. Files are organized into projects and teams, with shared libraries that distribute components, colors and typography across files.
Because Penpot uses SVG as its underlying representation, shapes, paths, masks and boolean operations correspond to standard vector constructs rather than a proprietary format. Layouts built with Flex layout and Grid layout follow the same rules as CSS: direction, gap, padding, alignment, wrapping and track sizing.
The main building blocks of a Penpot file are listed in the table below.
| Element | Purpose | Web equivalent |
|---|---|---|
| Board | Container for screens and layout | A section or container element |
| Flex layout | One-dimensional automatic layout | CSS Flexbox |
| Grid layout | Two-dimensional layout in rows and columns | CSS Grid |
| Component | Reusable main element with copies | A UI component in code |
| Shared library | Components and styles reused across files | A component library package |
| Inspect tab | Code and measurements for developers | Generated CSS, SVG and HTML |
Deployment options and key features
Penpot can be used as a hosted cloud service or installed on an organization’s own infrastructure, usually with Docker or Kubernetes. Self-hosting is the decisive feature for teams with strict data residency, security or offline requirements, such as public administration, defense suppliers, healthcare and regulated industries.
| Option | Who operates it | Typical reason to choose it |
|---|---|---|
| Hosted cloud | The vendor | Quick start, no maintenance |
| Self-hosted with Docker | The organization | Data control, internal network use |
| Self-hosted with Kubernetes | The organization | Larger scale, existing cluster operations |
| Local development instance | An individual or developer team | Testing, contributing, plugin development |
Beyond layout, Penpot supports interactive prototyping with flows, transitions and overlays, a plugin system for automation and integrations, version history with saved snapshots, and support for design tokens that can be exchanged with code in a structured format. Files can be exported as .penpot archives and assets exported as SVG, PNG, JPEG or PDF.
Penpot compared with Figma and Sketch
Penpot, Figma and Sketch overlap in core interface design capabilities, and the choice usually depends on licensing, hosting, ecosystem and handoff needs rather than on drawing tools alone.
| Aspect | Penpot | Figma | Sketch |
|---|---|---|---|
| License | Open source, MPL 2.0 | Proprietary subscription | Proprietary subscription |
| Platform | Browser, any operating system | Browser and desktop app | macOS app with web viewing |
| Self-hosting | Supported | Not offered | Not offered |
| Layout model | Flex and Grid matching CSS | Auto layout, grid features | Stacks and smart layout |
| Developer handoff | Inspect tab with CSS, SVG, HTML | Figma Dev Mode | Inspector in web app |
| Ecosystem size | Growing community and plugins | Very large plugin and template ecosystem | Mature plugin ecosystem |
Penpot’s main advantage is independence: no vendor lock-in, standards-based files and full control over where data lives. Its main trade-off is a smaller ecosystem of plugins, community files and integrations, and teams migrating from other tools should expect some imported files to need cleanup.
Using Penpot in a design workflow
Penpot fits best in teams that want a close connection between design and front-end code. Because layouts follow CSS rules, a well-structured Penpot file reduces interpretation during developer handoff.
| Situation | Recommendation | Reason |
|---|---|---|
| Strict data protection or air-gapped network | Self-hosted Penpot | Design files never leave internal systems |
| Open-source product or community project | Penpot cloud or self-hosted | Contributors use the tool without license costs |
| Team heavily invested in another tool’s plugins | Pilot before migrating | Plugin parity may be incomplete |
| Design system tied closely to CSS | Penpot with Grid and Flex layout | Layout properties translate directly to code |
Good practice includes building components with layout from the start, naming layers and components consistently with code, keeping tokens and shared libraries as the single source of truth, and assigning ownership of a self-hosted instance, including updates and backups.
Limitations and common mistakes
Adopting Penpot successfully depends on realistic expectations about migration and operation.
- Expecting perfect imports from other tools, although complex components and effects may need rebuilding.
- Self-hosting without an operations owner, which leads to outdated versions and missing backups.
- Ignoring Flex and Grid layout, which wastes Penpot’s main advantage for handoff.
- Underestimating training time for designers used to another tool’s shortcuts and terminology.
- Assuming every plugin has an equivalent, instead of checking critical workflows during a pilot.
Performance also deserves attention. Very large files with thousands of layers, heavy images or deeply nested components can feel slower in a browser, so teams benefit from splitting work into several files connected through shared libraries. A structured pilot of four to twelve weeks, covering real projects, handoff and administration, usually reveals whether Penpot fits before a full migration is planned.
Stripped to the essentials
Penpot is a free, open-source program for designing apps and websites. It runs in a web browser, and several people can work on the same design at once, much like a shared online document.
What makes it different is who controls it. An organization can install Penpot on its own servers, so its designs never leave the building. It also describes layouts in the same way web code does, which makes it easier for developers to build exactly what the designer drew.
Where it is applied
A regional government digital office must keep all project files on infrastructure it controls, which rules out cloud-only design tools. The team installs self-hosted Penpot with Docker on an internal server, connects it to the existing single sign-on and schedules daily backups.
The designers rebuild the public service design system as a shared Penpot library, with buttons, form fields and page templates built using Flex and Grid layout. Developers use the Inspect tab to read spacing and layout values that already match the CSS of the front-end framework. After a three-month pilot with two service teams, the office adopts Penpot for all projects, eliminating per-seat license costs and meeting its data residency requirement.