Penpot is the first open-source design tool built for seamless collaboration between designers and developers. It eliminates handoff drama by rendering designs as real web standards—CSS, SVG, and HTML—so developers can inspect, reuse, and implement designs directly, while designers maintain creative control. Built for teams that value transparency, interoperability, and open standards, Penpot supports both cloud and self-hosted deployments.
Technically, Penpot is built with Clojure and ClojureScript, leveraging open web standards and a plugin system to enable deep customization. It integrates with modern dev toolchains via webhooks and a public API, supports design tokens for consistent theming, and offers full self-hosting options using Docker, Kubernetes, or Elestio. Its architecture is designed for scalability, with a modular plugin system and native support for components, variants, and CSS Grid Layout.
What You Get
- Native Design Tokens - A single source of truth for colors, typography, and spacing that syncs between design and code, eliminating inconsistencies across teams and projects.
- CSS Grid Layout Support - Native grid system that mirrors real CSS Grid behavior, allowing designers to build responsive layouts that developers can directly implement without translation.
- Inspect Mode with Real Code - Instant access to exported SVG, CSS, and HTML code for any design element, enabling developers to copy-paste production-ready markup directly from the design tool.
- Self-Hosting Support - Deploy Penpot on your own infrastructure using Docker, Kubernetes, or Elestio, giving full control over data, compliance, and network access.
- Plugin System - Extend functionality with custom plugins to integrate with external tools like Jira, Figma, or internal design systems via the Penpot Plugin API.
- Components & Variants System - Create reusable UI components with multiple states and variants (e.g., primary/secondary buttons) that auto-update across all instances in a project.
Common Use Cases
- Running a design system at scale - A product team uses Penpot’s design tokens and components to maintain consistent UI across 10+ web apps, with developers pulling styles directly from the design file.
- Self-hosting for enterprise compliance - A financial institution deploys Penpot internally to ensure all design assets remain within their secure network while enabling cross-department collaboration.
- Open-source project collaboration - A team building an open-source web app uses Penpot to share Figma-like designs with contributors who don’t have design licenses, using only browser-based access.
- Reducing designer-developer handoff friction - A startup replaces Figma + Zeplin with Penpot to cut design-to-code turnaround time by 60%, as developers inspect CSS and SVG directly in the tool.
Under The Hood
Architecture
- The codebase suffers from severe obfuscation due to minified and mangled class names, obscuring module boundaries and violating transparency principles.
- No clear separation of concerns is evident, with components tightly coupled and no discernible service, repository, or view layering.
- Dependency injection is absent, with components instantiated directly and dependencies implicitly embedded.
- UI logic appears entangled with DOM manipulation, lacking a modern component-based framework or clean MVC structure.
- Modularity exists only at the bundler level, with no meaningful interfaces, contracts, or conventional directory structures in the source.
Tech Stack
- Node.js powers the backend with ESBuild as the primary bundler, enabling cross-platform builds across Linux, macOS, and Windows.
- pnpm ensures reproducible builds through comprehensive dependency locking.
- Handlebars is used for server-side templating, with minimal frontend JavaScript and no traditional UI framework detected.
- EditorConfig enforces consistent formatting across contributors, while the absence of a traditional backend framework suggests a lightweight, client-centric design.
- Extensive cross-platform esbuild binaries support diverse hardware architectures, indicating production-grade build tooling.
Code Quality
- Extensive test coverage spans unit, integration, and end-to-end scenarios using Clojure test, Playwright, and Vitest.
- Strong type safety and immutability patterns in Clojure code enforce structural invariants through validation and schema-based generators.
- Domain-driven naming and clear separation between data models, serialization layers, and UI components enhance clarity.
- Error handling relies on runtime predicates and functional patterns rather than exceptions, complemented by assertion-based UI validation.
- Robust linting and property-based testing ensure fidelity in data transformations and serialization behavior.
- Modular test suites with reusable helpers promote maintainability and reduce duplication across domains.
What Makes It Unique
- A native WASM-based rendering engine optimizes performance by batching shape property serialization and eliminating redundant JavaScript-to-WASM calls.
- A unified design system built on immutable ClojureScript data structures enables real-time, undoable state changes without external state management libraries.
- Cross-platform vector editing is achieved through a shared WASM core, ensuring consistent behavior across web and desktop without code duplication.
- Protocol-level binary serialization of design properties enables zero-cost data transfer between frontend and rendering engine.
- Design constraints like auto-layout and blend modes are deeply integrated into WASM memory layout, allowing sub-millisecond updates at scale.
- Custom ClojureScript UI components unify form validation, accessibility, and reactivity within a single declarative layer.