Penpot
penpot.app- Category
- Developer Tools
- Rank
- No. 131Tools index
- Pricing
- Open Source
- Type
- TOOL
- Builder
- penpot
- GitHub
- 59.7k stars
- Latest release
- 2.17.2
- Date
About
Open-source Figma alternative. Web-native design and prototyping, self-hostable.
What it does
Penpot gives product teams a shared workspace for interface design, interactive prototypes, reusable components, variants, and design tokens. Designers can collaborate live, while developers inspect SVG, CSS, and HTML output. Grid and flex layouts model responsive behavior, and plugins, webhooks, APIs, and MCP connections extend the workspace.
Why it's ranked here
Penpot is compelling because it joins visual design, developer inspection, automation, and infrastructure control in one system. Open standards reduce translation friction, while native tokens and reusable components support larger design systems. Its strongest case is for teams that value programmable workflows and control enough to accept operational responsibility.
What's good
Inspect mode exposes SVG, CSS, and HTML directly. Native tokens, components, and variants create a shared design-system vocabulary. Real-time collaboration supports team work without excluding solo use. The plugin API, access-token API, webhooks, and MCP server provide several practical routes for automation and integration.
Tradeoffs
Self-hosting shifts deployment and configuration work onto your team. Plugins must be hosted independently, and existing Figma plugins cannot be converted directly. MCP acts only on the currently focused page and stays active in one browser tab. Remote MCP cannot import local files and offers restricted local export behavior.
How to use it well
Choose Penpot for code-minded product teams maintaining responsive interfaces and shared design systems. Start with tokens, components, variants, grid, and flex layouts, then use inspection during developer handoff. Add MCP or API automation incrementally, beginning with read-only operations. Plan separate hosting for custom plugins because Penpot does not host them.
Technical notes+
package.json defines a private ESM package managed with pnpm and includes Playwright test and MCP development dependencies. docs/mcp/index.md describes remote and local HTTP MCP modes, an in-app plugin bridge, a personal MCP key, focused-page context, and read/write design tools; remote mode lacks local-path image import and limits exports. docs/plugins/getting-started.md documents iframe-isolated plugins installed from a hosted manifest URL, while docs/plugins/create-a-plugin.md specifies message-based communication and granular content, library, user, comment, download, and local-storage permissions. docs/technical-guide/integration.md documents team-level outbound webhooks and personal access tokens for the internal API, but says webhook event documentation is not yet specific.
Observed
- License
- Mozilla Public License 2.0
- Deployment
- Hosted SaaS or self-hosting with documented Docker, Kubernetes, and Elestio options
- Design interfaces
- Browser workspace with real-time collaboration and inspect output for SVG, CSS, and HTML
- Automation interfaces
- Remote and local MCP servers, plugin API, access-token API, and outbound webhooks
- Plugin packaging
- Plugins install from externally hosted manifest URLs and run separately inside iframes
- Package surface
- Private ESM root package managed with pnpm
- Open formats
- Uses SVG, CSS, HTML, and JSON standards
Read from README.md, package.json, docs/404.md, docs/README.md, docs/mcp/index.md, docs/plugins/api.md, docs/plugins/faq.md, docs/plugins/deployment.md, docs/technical-guide/index.md, docs/plugins/beta-changelog.md, docs/plugins/create-a-plugin.md, docs/plugins/getting-started.md, docs/mcp/prompting-token-aware.md, docs/plugins/examples-templates.md, docs/technical-guide/integration.md.
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.