explaingit

penpot/penpot

Analysis updated 2026-06-20

47,311ClojureAudience · designerComplexity · 4/5LicenseSetup · hard

TLDR

Penpot is a free, open-source design and prototyping tool you can self-host, a Figma alternative where designers create UIs and developers get ready-to-copy CSS and SVG code directly from designs.

Mindmap

mindmap
  root((penpot))
    What it does
      UI design tool
      Prototyping
      Design handoff
    Key features
      Real-time collaboration
      Design tokens
      CSS and SVG export
    Tech stack
      Clojure backend
      SVG-based storage
      Docker deployment
    Audience
      Designers
      Frontend developers
      UX researchers
    Why use it
      Figma alternative
      Self-hostable
      No vendor lock-in
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Self-host a Figma-like design tool on your own server for teams that need data privacy or compliance.

USE CASE 2

Create UI mockups and interactive prototypes with your team in real time, then hand off exact CSS to developers.

USE CASE 3

Build a shared design system with reusable components and design tokens that stay consistent across your product.

USE CASE 4

Export SVG and CSS code from any design element directly, removing the manual translation step between designers and developers.

What is it built with?

ClojureClojureScriptSVGDockerKubernetes

How does it compare?

penpot/penpotmetabase/metabaselogseq/logseq
Stars47,31147,21142,684
LanguageClojureClojureClojure
Setup difficultyhardmoderateeasy
Complexity4/53/53/5
Audiencedesignerpm founderwriter

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · hard Time to first run · 1h+

Requires Docker and a multi-container setup, self-hosting needs a server with sufficient RAM and storage.

Use, modify, and self-host freely including for commercial projects under the Mozilla Public License.

In plain English

Penpot is an open-source design and prototyping application that runs in the browser and can also be self-hosted on your own server. It targets the same problem that commercial tools like Figma address: designers and developers working on user interfaces need a shared space where designers can create layouts, components, and interactive prototypes, and developers can then inspect those designs and extract usable code from them. The "handoff drama" Penpot's description mentions is the friction that occurs when a design lives in one tool and developers have to manually translate it into code, often resulting in mismatches and back-and-forth. Penpot is built around open web standards: designs are stored as SVG (the same vector format used in web browsers), and the inspect panel gives developers ready-to-copy CSS, HTML, and SVG code directly from any design element. It supports real-time collaboration so multiple people can work in the same file simultaneously, similar to how Google Docs works. The platform also supports design tokens, a system for naming and centralizing design decisions like colors and spacing so that the same values are used consistently across a product, as well as reusable components and CSS Grid layout. A plugin system allows custom extensions and integrations with other tools. You would use Penpot when your team wants a collaborative design tool but prefers to avoid vendor lock-in, needs to self-host for data privacy or compliance reasons, or simply wants a free alternative to paid design platforms. Designers, UX researchers, and front-end developers all interact with it. The backend is written in Clojure and ClojureScript (a variant of the Lisp language that compiles to JavaScript), and it is deployed via Docker or Kubernetes.

Copy-paste prompts

Prompt 1
I want to self-host Penpot on a VPS using Docker. Give me the step-by-step docker-compose setup including environment variables.
Prompt 2
I'm a developer receiving a Penpot design handoff. Show me how to use the inspect panel to extract CSS and SVG code from a specific component.
Prompt 3
How do I set up design tokens in Penpot to keep colors and spacing consistent across my entire product design?
Prompt 4
My team is migrating from Figma to Penpot. What's the best way to import our existing Figma files and which features work differently?
Prompt 5
How do I install a Penpot plugin and what can plugins do to extend the tool?

Frequently asked questions

What is penpot?

Penpot is a free, open-source design and prototyping tool you can self-host, a Figma alternative where designers create UIs and developers get ready-to-copy CSS and SVG code directly from designs.

What language is penpot written in?

Mainly Clojure. The stack also includes Clojure, ClojureScript, SVG.

What license does penpot use?

Use, modify, and self-host freely including for commercial projects under the Mozilla Public License.

How hard is penpot to set up?

Setup difficulty is rated hard, with roughly 1h+ to a first successful run.

Who is penpot for?

Mainly designer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub penpot on gitmyhub

Verify against the repo before relying on details.