f07b954b7e
* ♻️ Convert snap-points components to modern rumext format Migrate snap-point, snap-line, snap-feedback, and snap-points from legacy mf/defc format to modern * suffix format. This enables optimized props handling by the rumext macro, eliminating implicit JS object wrapping overhead on each render. All internal and external call sites updated to use [:> component* props] syntax. * ♻️ Convert frame-title to modern rumext format Migrate frame-title from legacy mf/defc format to modern * suffix format. The component was using legacy implicit props wrapping without ::mf/wrap-props false or ::mf/props :obj, causing unnecessary JS object conversion overhead on each render. The parent frame-titles* call site updated to use [:> frame-title* props] syntax. * ♻️ Convert interactions components to modern rumext format Migrate interaction-marker, interaction-path, interaction-handle, overlay-marker, and interactions from legacy mf/defc format to modern * suffix format. These five components had zero props optimization applied, causing implicit JS object wrapping on every render. All internal and external call sites updated to use [:> component* props] syntax. * ♻️ Convert rulers components to modern rumext format Migrate rulers-text, viewport-frame, and selection-area from legacy mf/defc format to modern * suffix format. These three components in the always-visible rulers layer had zero props optimization applied. Internal call sites in the parent rulers component updated to use [:> component* props] syntax. * ♻️ Convert frame-grid components to modern rumext format Migrate square-grid, layout-grid, grid-display-frame, and frame-grid from legacy mf/defc format to modern * suffix format. These four components render grid patterns per-frame with zero props optimization. All internal and external call sites updated to use [:> component* props] syntax. * ♻️ Convert gradient handler components to modern rumext format Migrate shadow, gradient-color-handler, and gradient-handler-transformed from legacy mf/defc format to modern * suffix format. These components are rendered during gradient editing with zero props optimization applied. Internal call sites in gradient-handler-transformed and gradient-handlers-impl updated to use [:> component* props] syntax. * ♻️ Rename ?-ending props in modernized workspace viewport components Apply prop naming rules to all * components migrated in the previous batch: - remove-snap? -> remove-snap in snap-feedback* (and get-snap helper) - selected? -> is-selected in interaction-path* - hover-disabled? -> is-hover-disabled in overlay-marker* and interactions* - show-rulers? -> show-rulers in viewport-frame* Update all internal and external call sites consistently. * 🐛 Fix get-snap call in snap-feedback* using JS props object Modern rumext *-suffix components receive props as JS objects, not Clojure maps. snap-feedback* was pushing the raw props object into the rx/subject and get-snap was destructuring it as a Clojure map, causing all keys to resolve to nil. Fix by: - Changing get-snap to take positional arguments (coord, shapes, page-id, remove-snap, zoom) instead of a map-destructured opts arg - Building an explicit Clojure map from the bound locals before pushing to the subject - Destructuring that map inside the rx/switch-map callback and calling get-snap with positional args Also mark get-snap and add-point-to-snaps as private (defn-), consistent with the other helpers in the namespace — none are referenced externally.
Website • User Guide • Learning Center • Community
Youtube • Peertube • Linkedin • Instagram • Mastodon • Bluesky • X
Penpot is the first open-source design tool for design and code collaboration. Designers can create stunning designs, interactive prototypes, design systems at scale, while developers enjoy ready-to-use code and make their workflow easy and fast. And all of this with no handoff drama.
Available on browser or self-hosted, Penpot works with open standards like SVG, CSS, HTML and JSON, and it’s free!
The latest updates take Penpot even further. It’s the first design tool to integrate native design tokens—a single source of truth to improve efficiency and collaboration between product design and development. With the huge 2.0 release, Penpot took the platform to a whole new level. This update introduces the ground-breaking CSS Grid Layout feature, a complete UI redesign, a new Components system, and much more. For organizations that need extra service for its teams, get in touch
🎇 Design, code, and Open Source meet at Penpot Fest! Be part of the 2025 edition in Madrid, Spain, on October 9-10.
Table of contents
Why Penpot
Penpot expresses designs as code. Designers can do their best work and see it will be beautifully implemented by developers in a two-way collaboration.
Plugin system
Penpot plugins let you expand the platform's capabilities, give you the flexibility to integrate it with other apps, and design custom solutions.
Designed for developers
Penpot was built to serve both designers and developers and create a fluid design-code process. You have the choice to enjoy real-time collaboration or play "solo".
Inspect mode
Work with ready-to-use code and make your workflow easy and fast. The inspect tab gives instant access to SVG, CSS and HTML code.
Self host your own instance
Provide your team or organization with a completely owned collaborative design tool. Use Penpot's cloud service or deploy your own Penpot server.
Integrations
Penpot offers integration into the development toolchain, thanks to its support for webhooks and an API accessible through access tokens.
Building Design Systems: design tokens, components and variants
Penpot brings design systems to code-minded teams: a single source of truth with native Design Tokens, Components, and Variants for scalable, reusable, and consistent UI across projects and platforms.
Getting started
Penpot is the only design & prototype platform that is deployment agnostic. You can use it in our SAAS or deploy it anywhere.
Learn how to install it with Docker, Kubernetes, Elestio or other options on our website.
Community
We love the Open Source software community. Contributing is our passion and if it’s yours too, participate and improve Penpot. All your designs, code and ideas are welcome!
If you need help or have any questions; if you’d like to share your experience using Penpot or get inspired; if you’d rather meet our community of developers and designers, join our Community!
You will find the following categories:
- Ask the Community
- Troubleshooting
- Help us Improve Penpot
- #MadeWithPenpot
- Events and Announcements
- Inside Penpot
- Penpot in your language
- Design and Code Essentials
Code of Conduct
Anyone who contributes to Penpot, whether through code, in the community, or at an event, must adhere to the code of conduct and foster a positive and safe environment.
Contributing
Any contribution will make a difference to improve Penpot. How can you get involved?
Choose your way:
- Create and share Libraries & Templates that will be helpful for the community
- Invite your team to join
- Give this repo a star and follow us on Social Media: Mastodon, Youtube, Instagram, Linkedin, Peertube, X and BlueSky
- Participate in the Community space by asking and answering questions; reacting to others’ articles; opening your own conversations and following along on decisions affecting the project.
- Report bugs with our easy guide for bugs hunting or GitHub issues
- Become a translator
- Give feedback: Email us
- Contribute to Penpot's code: Watch this video by Alejandro Alonso, CIO and developer at Penpot, where he gives us a hands-on demo of how to use Penpot’s repository and make changes in both front and back end
To find (almost) everything you need to know on how to contribute to Penpot, refer to the contributing guide.
Resources
You can ask and answer questions, have open-ended conversations, and follow along on decisions affecting the project.
✏️ Tutorials
🏘️ Architecture
License
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
Copyright (c) KALEIDOS INC
Penpot is a Kaleidos’ open source project