Penpot

Penpot is the open-source design platform built for teams that deliver digital products at scale. It eliminates the traditional handoff gap between designers and developers by expressing designs as real web standards—SVG, CSS, HTML, and JSON—so developers can inspect and implement directly from the tool, without translation layers or third-party handoff plugins.

Unlike other design tools, Penpot is self-hostable from day one, placing your design infrastructure entirely under your control. You can deploy it with Docker, Kubernetes, or Elestio, and run it fully air-gapped if compliance requires it. It supports real-time collaborative editing for teams working simultaneously on the same file, with the same level of feature parity as the hosted version.

Penpot’s technical depth extends well beyond aesthetics. A Rust/WebAssembly rendering engine powered by Skia delivers GPU-accelerated canvas performance directly in the browser. Native CSS Grid and Flex Layout support means designers create responsive interfaces that translate directly to production code. A first-class MCP (Model Context Protocol) server makes the workspace programmable for AI-driven automation and integrations with external tools and systems.

Built on Clojure and ClojureScript with isomorphic shared business logic, Penpot enforces design system consistency from the ground up. Native Design Tokens provide a single source of truth across projects, with a component and variant system that scales from small teams to large organizations managing dozens of products.

What You Get

• Native Design Tokens - A full design tokens system built into the platform as a first-class data type, providing a single source of truth for colors, typography, spacing, and shadows that syncs automatically across all components and projects.
• GPU-Accelerated Canvas Renderer - A Rust/WebAssembly rendering engine built on the Skia graphics library delivers smooth, GPU-accelerated canvas performance directly in the browser—no plugins or native apps required.
• Inspect Mode with Real Web Code - The inspect tab exposes production-ready SVG, CSS, and HTML for every design element, letting developers copy markup directly rather than interpreting design specs.
• CSS Grid and Flex Layout - Design responsive layouts using native CSS Grid and Flexbox behavior that mirrors actual web rendering, so what designers see is what developers implement.
• MCP Server for AI Workflows - A built-in Model Context Protocol server makes the design workspace programmable, enabling AI-assisted automation, multi-directional design-to-code workflows, and integrations with tools like Cursor or Claude.
• Self-Hosting on Any Infrastructure - Deploy on Docker, Kubernetes, or Elestio with full feature parity to the cloud version; supports air-gapped deployments for compliance-sensitive organizations.
• Plugin System - Extend the platform with custom plugins that integrate Penpot with internal tools, issue trackers, CI pipelines, or external design systems via the public Plugin API.
• Components & Variants - A full component system with multiple state variants (e.g., button/primary/hover) that propagates changes across every instance in a file automatically.

Common Use Cases

• Enterprise design system management - A platform team defines design tokens and components in Penpot, and all product teams reference the shared library—ensuring brand consistency across 20+ applications without manual style synchronization.
• Compliance-mandated self-hosting - A healthcare or financial services company deploys Penpot on its internal Kubernetes cluster to keep all design artifacts within its security perimeter while enabling designer-developer collaboration.
• AI-assisted design-to-code workflows - A development team connects Penpot’s MCP server to their AI coding assistant, enabling the model to query live design data and generate component code that matches the actual design tokens and layout.
• Open-source project UI collaboration - An open-source team shares Figma-equivalent design files with external contributors who access Penpot via browser with no license or software install required.
• Eliminating Figma handoff friction - A startup migrates from Figma + Zeplin to Penpot so that developers inspect CSS and copy SVG directly from the design file, reducing back-and-forth and cutting design-to-staging time significantly.
• Prototyping responsive layouts - A UX team uses Penpot’s native CSS Grid support to prototype multi-breakpoint responsive interfaces that map directly to the engineering team’s Flexbox and Grid implementations.

Under The Hood

Architecture Penpot is organized as a multi-module monorepo with clean separation between a Clojure/JVM backend, a ClojureScript frontend, an isomorphic common library compiled to both JVM and JavaScript, a Rust/WebAssembly rendering engine, an exporter service, and a TypeScript MCP server. The backend uses Integrant for dependency injection through declarative system maps, with the RPC command layer implementing layered middleware for rate limiting, concurrency limiting, audit logging, and retry logic. The frontend adopts Potok—a functional event-driven state management pattern—combined with Beicon reactive streams, giving the UI a Redux-like data flow with immutable state transitions. Shared business logic in common/ uses .cljc files that compile identically on both platforms, ensuring validation schemas, geometric math, and file format logic are never duplicated or allowed to diverge.

Tech Stack The backend runs on Clojure with the Yetti HTTP server (Jetty-based), PostgreSQL for persistence via a custom SQL abstraction layer, Redis for pub/sub messaging and real-time collaboration state, and pluggable storage backends supporting S3-compatible object stores or local filesystem. The frontend is ClojureScript compiled with Shadow-CLJS and rendered via React under the hood. The canvas rendering layer is a Rust WebAssembly module using Skia-Safe bindings to the Skia graphics library with OpenGL ES for GPU-accelerated drawing. The MCP server is TypeScript/Node.js. Infrastructure is containerized with Docker and supports Kubernetes; the build pipeline spans Clojure CLI, pnpm, and cargo/wasm-pack across three runtimes.

Code Quality Test coverage is comprehensive across all layers: extensive backend Clojure test suites covering RPC commands, media handling, audit trails, and database operations; a large common library test suite covering geometric calculations and data transformations; and frontend tests supplemented by Playwright end-to-end tests. The codebase applies property-based testing with schema-driven generators to validate data transformations and serialization. Error handling follows typed explicit patterns via ex/raise with semantic error types, rather than raw exceptions or silent failures. The shared .cljc isomorphic modules enforce that backend and frontend operate on identical validated schemas. Linting is enforced across JavaScript, TypeScript, and Clojure components.

What Makes It Unique Penpot’s most architecturally distinctive feature is its dual-rendering approach: a Rust/WebAssembly/Skia renderer delivers GPU-accelerated canvas performance in the browser—something no other open-source design tool offers—while the export layer produces semantically correct SVG, CSS, and HTML that functions as real web code rather than design approximations. The isomorphic Clojure common library means geometric, validation, and file-format logic runs identically on server and client without synchronization risk. The built-in MCP server—added as a first-class module—positions Penpot as the first design tool with a native AI protocol interface, enabling generative workflows where AI agents can read and act on live design state. Design tokens are implemented as a typed data primitive throughout the system stack, not bolted on as a plugin.

Self-Hosting

Penpot is released under the Mozilla Public License 2.0 (MPL-2.0), a weak copyleft license that applies file-level copyleft. This means modifications to existing Penpot source files must be shared under the same license if distributed, but code you write that merely uses or integrates with Penpot does not need to be open-sourced. For most self-hosting organizations—whether running Penpot internally or offering it to customers as part of a managed service—MPL-2.0 imposes minimal obligations as long as you are not modifying and distributing the Penpot codebase itself. Commercial use is fully permitted.

Running Penpot yourself is a non-trivial operational commitment. The platform requires at minimum a PostgreSQL database, a Redis instance, and a file storage backend (local disk or S3-compatible object store), all coordinated through Docker Compose or Kubernetes manifests. The official docker-compose configuration provides a complete working setup, but production deployments will need to configure SMTP for transactional email, handle SSL termination (via Traefik or a reverse proxy), and manage PostgreSQL backups independently. The application undergoes frequent releases—averaging more than two per month across the 2.x series—so staying current requires an active upgrade process. There is no automatic migration tooling; each release may include database migration scripts that must be applied in sequence.

Compared to the hosted cloud version at design.penpot.app, self-hosters receive full feature parity—every capability available in the cloud is present in the self-hosted release, including the MCP server, design tokens, and the plugin system. What self-hosters give up is managed operations: Kaleidos (the company behind Penpot) handles uptime, database backups, CDN, and infrastructure scaling for cloud users, while self-hosters own all of that themselves. Enterprise support contracts are available through the Kaleidos team for organizations that need SLAs, prioritized bug handling, or assistance with large-scale deployments, though the community forum and GitHub issues provide responsive support for most self-hosting questions.