Penpot – Open Source Design & Code Collaboration Platform for Real-Time Multi-User Collaboration

1. What is Penpot

Penpot is an open-source design and code collaboration platform built on open web standards such as SVG, CSS, and HTML. It runs entirely in the browser with no need to install any desktop client. It provides end-to-end capabilities from UI design and interactive prototyping to code export, with the core mission of eliminating the "translation loss" between design and development, allowing design files to directly output usable code. The platform supports real-time multi-user collaboration, W3C Design Tokens management, and MCP Server integration, enabling AI agents to directly read the actual components, tokens, and layer structure of design files rather than relying solely on screenshots for understanding. Through Inspect mode, developers can copy native code with one click, truly realizing the concept of "design as code."

Image source: Official article
Image source: official article

Technical positioning and domain: Penpot belongs to the UI/UX design tool domain, but its uniqueness lies in the fact that it is not a "design software" in the traditional sense, but rather a design collaboration platform that uses web standards (SVG, CSS, HTML) as its underlying expression. It breaks down the barriers between design tools and front-end development, making design drafts themselves structured data that can be interpreted by both machines and humans. This is a disruptive positioning in the design tool space, directly challenging the closed ecosystems of proprietary commercial tools like Figma.

Development background: Penpot is developed and maintained by the Spanish company Kaleidos Open Source, which focuses on open-source software and design tools. Its development motivation stems from concerns about "vendor lock-in" and data sovereignty issues with existing design tools (such as Figma). The Kaleidos team aimed to create a fully open, standards-based, self-hostable design tool that allows enterprises and designers to truly own their design data and achieve deep integration between design and development. The project has garnered over 53.5k stars on GitHub, making it one of the most active open-source design tools today.

Core value: Penpot's core value lies in solving two fundamental problems in the design tool space: first, data closure and vendor lock-in, where traditional tools use proprietary formats preventing users from freely migrating data; second, the disconnect between design and development, requiring repeated communication and manual recreation between designers and developers. Penpot gives users full control over their data through open standards (SVG/CSS/HTML) and self-hosting capabilities, and significantly shortens the design-to-development delivery cycle by directly outputting usable code via Inspect mode. Additionally, through native support for W3C Design Tokens and MCP Server, Penpot provides infrastructure for AI-driven design-to-code workflows.

Technical features: Penpot's technical advantage lies in its core concept of "design as code." From the very beginning of creation, it uses web standards to express design, ensuring that the output code is visually identical. It natively supports CSS Grid and Flex layouts for true WYSIWYG. At the same time, it is the first design tool to fully support the W3C Design Tokens standard, and it comes with a built-in MCP Server, allowing AI agents to bidirectionally read and write structured data from design files, enabling automated design and code generation.

2. Key Features

• Design as Code (Inspect Mode): This is Penpot's most core differentiating feature. Select any element in the design file to view and copy its corresponding SVG, CSS, or HTML code directly in the Inspect panel. Developers no longer need to manually measure spacing, colors, or font sizes, nor guess at implementation methods, because the output code is directly based on the design's real web layout properties. This fundamentally eliminates the "translation loss" in design-development collaboration, boosting delivery efficiency by an order of magnitude.

• Native CSS Grid & Flexbox Support: Penpot does not render designs as bitmaps but uses a real web layout engine. The Grid and Flexbox layout rules designers use are identical to how they render in the browser. This means there is zero deviation between the "visual representation" of the design and its "implementation code," achieving true WYSIWYG. For frontend developers, this drastically reduces the difficulty of implementation and minimizes rework.

• W3C Design Tokens Management: Penpot is the first design tool in the industry to fully support the W3C Design Tokens standard. Designers can define design variables like colors, font sizes, spacing, and shadows in the Tokens panel and bind them to design elements. When a Token value changes, all elements referencing that Token update automatically. This provides standardized, automated infrastructure for building scalable design systems, avoiding the chaos and errors of manual variable management.

• Components & Variants System: Penpot supports creating reusable design components and defining multiple state variants for each component (e.g., hover, click, disabled). This allows designers to build extensible design systems where any modification in the component library syncs automatically to all instances. The variants system enables a single component to handle multiple interaction states, simplifying prototyping and design system management.

• MCP Server Integration: Penpot includes a built-in Model Context Protocol (MCP) server, a cutting-edge feature for the AI era. Through the MCP Server, AI agents (e.g., code generation models, design assistants) can directly read structured data from Penpot design files, including component trees, layer hierarchies, and Design Token values—not just screenshots or pixel information. This enables AI to understand the logical structure of a design and perform precise code generation, automatic layout adjustments, or style modifications, enabling a true bidirectional design-code workflow.

• Multiplayer Real-time Collaboration: Penpot supports multiple people editing the same design file simultaneously, with all collaborators' actions synced in real time. The platform also offers commenting and annotation features, allowing team members to discuss and provide feedback directly on the design. This collaboration capability rivals commercial tools like Figma but stands out in the open-source space, providing an efficient design collaboration environment for distributed teams.

• Fully Open Source & Self-hosted: Penpot is licensed under MPL-2.0, with its code fully open. Users can easily deploy Penpot on their own servers using Docker Compose, achieving 100% data sovereignty. This is critical for industries with strict data sovereignty and compliance requirements, such as finance, government, and healthcare, allowing them to use Penpot within an intranet where design files never leave the local network.

3. How to Use

Penpot offers two usage methods: SaaS online service and Docker self-hosted deployment, each suitable for different scenarios.

1. SaaS Online Usage (Quick Start):

   • Register an Account: Visit design.penpot.app and register a free account using your email. All features are available without payment.
   • Create a Project: After logging in, create a new team or project on the dashboard, then click to enter the design canvas. The canvas interface is similar to mainstream design tools, making it easy to get started.
   • Design Interface: Use the left toolbar to draw shapes, add text, and create components. The right panel is used to adjust element properties, layout, and styles. Multi-page management is supported, making it suitable for creating complex prototypes.
   • Manage Tokens: Define design variables such as colors, fonts, and spacing in the Tokens panel. Once defined, you can directly bind these Tokens to design elements for unified global style management.
   • Enable Collaboration: Invite team members to join the project. Multiple people can edit the same design file simultaneously, with all changes synced in real time. Comments can be added to elements for design reviews.
   • Export Code: Select any design element and open the Inspect panel. The panel displays the element's SVG, CSS, and HTML code. Click the copy button to paste the code directly into your development project.

2. Docker Self-Hosted Deployment (Data Autonomy and Control):

   • Environment Requirements: Requires a server (Linux or macOS) with Docker and Docker Compose installed. It is recommended that the server has at least 4GB of RAM and a 2-core CPU. Port 9001 needs to be opened for web access.
   • Download Configuration: Execute the curl command in the server terminal to obtain the official docker-compose.yaml file. Specific commands can be found in the Penpot official documentation.
   • Start the Service: Run the docker compose up -d command. Docker will automatically pull the required images and start Penpot's backend services (including database, storage, and web server). The startup process usually takes a few minutes.
   • Register Admin: Create the first admin account on the initialization page. After that, you can independently use all of Penpot's features within your intranet environment, with all design data stored on your own server.

Notes: The SaaS version is suitable for individual users, small teams, or rapid prototype validation. The self-hosted version is suitable for enterprises with strict data security requirements. After self-hosted deployment, it is recommended to regularly back up Docker data volumes to prevent data loss. Additionally, Penpot is updated and iterated frequently, so it is advisable to monitor the Release page of the official GitHub repository to upgrade the service version in a timely manner.

4. Pros and Cons Analysis

5. Tool Comparison

Selection Recommendations:

For enterprises prioritizing data sovereignty and compliance (e.g., finance, government, healthcare), Penpot is the only choice. Its self-hosting capability ensures design data never leaves the internal network, and being based on open standards eliminates vendor lock-in risks. For open-source communities and educational institutionswith limited budgets, Penpot's zero-cost full-feature offering is also highly attractive.

If the team pursues the ultimate design collaboration experience and a rich plugin ecosystemwith low data sovereignty requirements, Figma remains the industry benchmark. Its mature real-time collaboration engine, vast community, and extensive plugin resources make it dominant among large commercial design teams. For small design teams using only macOS, Sketch remains an option, but its collaboration capabilities and cross-platform support have clearly fallen behind Penpot and Figma.

6. Editor's Take

The emergence of Penpot signals a significant paradigm shift in the design tools landscape. It no longer settles for being merely a "design software," but strives to become a "universal language" and "collaboration infrastructure" between design and development. From a technological innovation perspective, Penpot's "design as code" philosophy and web-standards-based underlying architecture pose a powerful challenge to the closed ecosystems of proprietary tools like Figma. It is among the first to natively support the W3C Design Tokens standard and comes with a built-in MCP Server, paving the way for AI-driven design-to-code workflows—a testament to its forward-looking technical vision.

From a practical value standpoint, Penpot's core strength lies in solving the "translation loss" problem in design-development collaboration. The Inspect mode allows developers to directly access usable code, Design Tokens enable scalable maintenance of design systems, and self-hosting capabilities return data sovereignty to users. These features offer immense practical value for teams prioritizing high efficiency and compliance. While its plugin ecosystem and advanced prototyping capabilities still lag behind Figma, Penpot is more than capable of handling the vast majority of enterprise-level UI design needs.

In terms of target users, Penpot is especially suitable for: 1) Design teams in finance, government, and healthcare with strict data security requirements; 2) Medium-to-large enterprises committed to building standardized design systems; 3) Technical teams looking to integrate AI into design-development workflows; 4) Startups, open-source communities, and educational institutions with limited budgets.

The future development potential is enormous. As AI agent technology matures, Penpot's MCP Server capability will become its most core competitive advantage. In the future, designers may only need to sketch out layout requirements in Penpot, and AI can automatically populate components and generate code, achieving true "design as code" automation. Meanwhile, as the open-source community grows, the shortcomings in the plugin ecosystem are also expected to be gradually addressed.

7. Application Scenarios

• Enterprise Design System Development: Enterprises can use Penpot's Design Tokens and component system to build consistent design specifications across products and platforms. Design variables (colors, spacing, fonts) are centrally managed in Tokens, while the component library supports variants and states, ensuring visual consistency across all product lines. When a brand update occurs, simply modify the Token values, and all references update automatically, significantly reducing maintenance costs.

• Financial and Government UI Development: Industries such as finance and government have extremely high data security requirements, and design drafts are often not allowed to be uploaded to public clouds. Penpot's Docker self-hosted deployment allows these organizations to run the design platform independently within an intranet environment, ensuring design data and project files never leave the local network, meeting data sovereignty and compliance requirements.

• AI-Driven Frontend Development: Developers can combine Penpot's MCP Server with AI code generation models (such as GPT-4, Claude) to allow AI to directly read structured data from Penpot design drafts (component trees, Tokens, layouts). The AI then generates precise frontend code based on this data, enabling an automated workflow of "design draft in, code out," significantly shortening the cycle from design to launch.

• Open Source Communities and Educational Institutions: Open source project teams and schools can use all of Penpot's features at zero cost, without paying any subscription fees. Educational institutions can use it for UI/UX design teaching, open source communities can use it for project interface design, and leverage collaboration features for synchronous creation by distributed teams.

• Seamless Design-Development Collaboration: After designers complete interface designs in Penpot, developers do not need to wait for annotations or asset exports. They can directly open the Inspect panel to copy the element's CSS and HTML code. When designers adjust the layout, the code viewed by developers updates in real-time, achieving "same-source synchronization" between design and development, significantly reducing communication costs and rework.

8. FAQ

Q: What is Penpot's biggest advantage over Figma?
A: Penpot's greatest advantage lies in its "design-as-code" philosophy and fully open-source nature. Built on web standards (SVG/CSS/HTML), its Inspect mode can directly output usable code, eliminating design-to-development translation overhead. Additionally, the MPL-2.0 license allows private deployment, giving users full control over data with no vendor lock-in risk. In contrast, Figma is proprietary commercial software with private file formats and data stored on Figma's cloud.

Q: Does Penpot support offline use?
A: Penpot's SaaS version requires an internet connection. However, through Docker self-hosted deployment, users can run Penpot independently in an intranet environment, effectively enabling "offline" use (no public internet access needed). Design files are stored on your own servers, unaffected by external networks.

Q: How does Penpot's MCP Server integrate with AI?
A: The MCP Server is an open protocol that allows AI agents to read structured data from Penpot design files, including component trees, layer hierarchies, and Design Token values. Developers can create custom AI agents to retrieve design information via the MCP interface and generate code or automatically adjust designs accordingly. Specific implementation requires referencing Penpot's official documentation and MCP protocol specifications.

Q: Can Penpot design files be imported into Figma or Sketch?
A: Since Penpot uses open standards like SVG/CSS/HTML while Figma and Sketch use proprietary formats, direct import has compatibility issues. Theoretically, elements can be exported from Penpot as SVG or PDF and imported into Figma/Sketch, but this loses layer structures, component relationships, and Token information. The reverse is also true. Therefore, teams are advised to standardize on Penpot to fully leverage its open-standard advantages.

Q: How is Penpot's real-time collaboration performance? Does it support many collaborators?
A: Penpot supports multi-user real-time collaboration with good performance for small-to-medium teams (10-20 people). However, performance may lag behind Figma's maturity when large teams (50+ people) simultaneously edit complex files. For self-hosted deployments, it's recommended to allocate sufficient server resources (CPU, memory, bandwidth) based on team size to optimize the collaboration experience.

Q: How is Penpot's plugin ecosystem? Can it meet advanced needs?
A: Penpot's plugin ecosystem is still in early stages, with fewer plugins and lower quality compared to Figma. Currently, official basic plugins are available, with gradual community contributions. For advanced needs (e.g., data visualization, advanced charts, batch processing), developers may need to write custom plugins or use external tools. Penpot's API documentation provides plugin development guidelines.

9. Project Address

• Official Website: https://penpot.app/
• GitHub Repository: https://github.com/penpot/penpot
• Online Service URL: https://design.penpot.app/