Penpot is the first open-source design tool built for seamless collaboration between designers and developers. Unlike traditional tools that create a disconnect between visual design and code implementation, Penpot expresses designs as code using open web standards—SVG, CSS, HTML, and JSON. This enables designers to create rich prototypes, design systems, and UI components while developers gain instant access to production-ready code through an inspect mode. Designed for teams that value transparency and control, Penpot supports both SaaS usage and self-hosting, giving organizations full ownership of their design infrastructure. With its 2.0 release, Penpot introduced native design tokens and CSS Grid Layout, making it the first Figma-like tool to unify design systems with code-driven development workflows.
Penpot is ideal for product teams, UX designers, frontend developers, and DevOps engineers who want to eliminate the friction of handoffs between design and development. Whether you’re a startup building your first MVP or an enterprise managing hundreds of components across multiple products, Penpot provides a unified platform that scales with your needs—without vendor lock-in.
What You Get
- Native Design Tokens - Penpot introduces design tokens as a single source of truth for colors, typography, spacing, and other design properties. These tokens sync automatically between design and code, ensuring consistency across UI elements and reducing manual documentation.
- Inspect Mode with Real Code - Developers can inspect any design element to view exact SVG, CSS, and HTML code. No more manual pixel measurements or guesswork—copy-paste production-ready styles directly from the interface.
- Self-Hosting Support - Deploy Penpot on your own infrastructure using Docker or Kubernetes. Configuration files and deployment guides are available in the official documentation, enabling full data control and compliance with enterprise security policies.
- Components & Variants System - Create reusable components with variants (e.g., button states: primary, secondary, disabled) that automatically propagate changes across all instances. This enables scalable design systems for large teams and multi-platform projects.
- Plugin System - Extend Penpot’s functionality with custom plugins. Integrate third-party tools, automate workflows, or build internal utilities using the official plugin API documented on PenpotHub.
- Webhooks & API Access - Trigger external actions (e.g., CI/CD pipelines, Slack notifications) via webhooks when designs are updated. Access design data programmatically using token-based API endpoints for automation and integration with other tools.
Common Use Cases
- Building a design system for a SaaS product - A team of 15 designers and developers uses Penpot to create shared components (buttons, cards, modals) with design tokens for brand consistency. Changes in color or spacing propagate instantly across all pages and to the codebase.
- Reducing design-to-code handoff delays - A startup replaces Figma with Penpot to eliminate back-and-forth between designers and frontend devs. Developers copy CSS directly from the inspect panel, cutting implementation time by 40%.
- Enterprise design governance - A financial services company self-hosts Penpot to enforce brand compliance across departments. Design tokens prevent unauthorized color usage, and versioned components ensure UI uniformity in regulated environments.
- DevOps teams managing multi-cloud design infrastructure - Teams deploy Penpot on Kubernetes in AWS and Azure, using Helm charts for consistent configuration. Design files are backed up to S3 and synced with internal documentation systems via webhooks.
Under The Hood
Penpot is a collaborative design platform that enables real-time teamwork on UI designs, built with a modular architecture supporting both frontend and backend in functional languages. It emphasizes open-source development, extensibility, and native vector graphics support.
Architecture
Penpot follows a layered architecture that promotes modularity and clear separation of concerns across its backend and frontend systems.
- The system uses a multi-layered structure with distinct modules for authentication, data handling, and external services such as storage and email.
- A clear separation exists between backend logic (Clojure) and frontend components (ClojureScript), enabling a unified development model.
- Design patterns like middleware for HTTP handling and strategy-based feature extensions support extensibility and maintainability.
- Component communication is managed through event-driven mechanisms and message buses, allowing decoupled interaction between core services.
Tech Stack
The project leverages modern functional and reactive technologies to deliver a scalable, collaborative design tool.
- Built primarily with Clojure on the backend and JavaScript/TypeScript on the frontend, integrating React and Shadow-CLJS for frontend development.
- Relies on a suite of Clojure libraries such as Reitit, Transit, and Cognitect’s transit for data handling and communication.
- Employs Vite, Webpack, and Shadow-CLJS for frontend builds, with pnpm for package management and cljfmt/clj-kondo for code formatting.
- Comprehensive testing is supported through Playwright, Vitest, and Kaocha across both frontend and backend components.
Code Quality
The codebase demonstrates a mature approach to testing with extensive coverage and consistent style, although some technical debt remains.
- Extensive test suites validate core functionalities on both backend and frontend, ensuring robust behavior across components.
- Error handling is implemented using standard patterns such as try/catch blocks and exception propagation, though inconsistency exists in some areas.
- Code consistency is maintained through established conventions and linting tools, supporting maintainability and readability.
What Makes It Unique
Penpot stands out through its unique blend of real-time collaboration, multi-language support, and native SVG rendering capabilities.
- A modular architecture supports extensible plugin systems and component-based UI rendering for flexible customization.
- Real-time collaborative editing is powered by a custom message bus with optimistic concurrency control for seamless teamwork.
- Multi-language support (Clojure, JavaScript, Rust) allows performance-critical operations while keeping the system accessible to developers.
- Built-in SVG handling and rendering engine provide native vector graphics support without external dependencies or third-party integrations.