Main features
- Real-time collaborative vector design in the browser
- Flex Layout and CSS Grid Layout for responsive screens
- Components, variants and shared libraries
- Native design tokens with sets and themes
- Interactive prototypes and a view mode for testing
- Inspect mode with SVG, CSS and HTML output
- Comments on designs
- Export to PNG, JPEG, WEBP, SVG and PDF
- Plugins, API access tokens, webhooks and an MCP server
- Open .penpot file format (ZIP of JSON and media)
- Figma import through the official exporter plugin
What Penpot does
Penpot is a design and prototyping platform for teams that build websites and apps. It runs in the browser and covers the same core work as Figma: drawing screens on boards, building reusable components and variants, keeping colors and type in shared libraries, and linking screens into clickable prototypes that can be tested in a view mode. Several people can work on the same file at once and leave comments.
What sets it apart is that the design model follows web standards. Layout uses Flex Layout and CSS Grid Layout, so a design behaves like the code that will eventually implement it, and the inspect tab shows SVG, CSS and HTML for any element. Design tokens are built in rather than added through a plugin, and they can be organized in sets and themes. Penpot also offers a plugin system, an API with access tokens, webhooks and an MCP server so that AI clients can read and change designs.
File formats and migration
Native files use the .penpot format, a ZIP archive of readable JSON (pages, colors, components, typographies, tokens) plus the image and font assets. Layers can be exported to PNG, JPEG, WEBP, SVG and PDF, and a page of boards can be exported as a single PDF for presentations.
For moving from Figma, the Penpot team maintains a Figma plugin that exports a file as a ZIP that Penpot can import. It handles shapes, vectors, frames, groups, masks, text, components and component sets, auto layout, variants, and color and typography libraries. Prototyping settings are not carried over, and features that work differently in the two tools may not look identical after import. Penpot’s migration guide recommends trying one representative file first and expecting some cleanup of layouts; the exporter is meant for one-off migration rather than ongoing sync.
Self-hosting Penpot
Penpot can be self-hosted with Docker Compose, Kubernetes (an official Helm chart, with notes for OpenShift and Rancher), Elestio or TrueNAS. The Compose file runs a ClojureScript and React frontend, a Clojure backend on the JVM, an exporter that renders files with a headless browser, PostgreSQL and Valkey. The documentation says 4 CPUs and 16 GB of RAM are enough for thousands of users and suggests starting with 50 to 100 GB of database storage for up to 10 editors, plus about 5 GB for each additional editor. Because Penpot does much of its work in the browser, users also need reasonably capable computers; Chrome is the recommended browser.
The project says the experience is the same in the cloud and self-hosted, but Docker images are published shortly after each cloud update, so a self-hosted server can run slightly behind. Installing it takes working knowledge of Docker, DNS and a reverse proxy.
Hosted version
Penpot’s own cloud runs at design.penpot.app. Its pricing page lists a free plan described as fully featured, paid plans with more storage and longer version history, an Enterprise plan, and a dedicated private server option.
Limitations
The MPL-2.0 code covers the design tool itself. The Enterprise plan’s Admin Console, organizations and single sign-on are a proprietary layer sold for cloud and self-hosted installs. Imports from Figma lose prototype interactions, and very large files depend heavily on the client’s browser and graphics hardware; a WebGL renderer for complex files is still in beta and off by default.
Who it suits
Penpot fits product teams that design web and mobile interfaces and want a Figma-style workflow without depending on a proprietary cloud, especially organizations that need to keep design files on their own servers. Teams whose work centers on design systems and close handoff to front-end developers benefit most from its tokens and CSS-based layouts.
License details
MPL-2.0. The Enterprise plan adds a proprietary administration layer (Admin Console, organizations, SSO) that is not in the public repository.
Technical details
Self-hosting needs
- PostgreSQL
- Valkey or Redis
- Docker
Built with
- Clojure
- ClojureScript
- React
- Rust
GitHub topics
- clojure
- clojurescript
- design
- prototyping
- ui
- ux-design
- ux-experience
Reviewed by the OpenSourcePicks editors from the project's repository and documentation. Something out of date? Tell us.