Be a Beta Tester for Penpot’s Plugins System. Call for creators!

Help us improve Penpot
22

The betatest is officially over but we will keep accepting feedback. Just write to support@penpot.app so we can send you instructions about how to participate.

1 Like
23

I’m not a designer so maybe my opinion on whether it is useful or not is not worth much but I think this plugin is really great for showing light and dark modes in a beautiful way. I love the day and night animation, it looks amazing!

2 Likes
24

I’m working on the All Icons plugin, a library of popular icon sets. It has a dedicated post at Penpot Community.

However, here I would like to share some development details that might help you with your plugins.

  • All Icons is FOSS, uses Vite, React, and TypeScript, and you can find the code at GitHub.
  • If you are hosting a plugin’s code on GitHub (or GitLab) and it’s a static app, Pages is a good place to host the plugin itself. Pages hosting integrates well with the platform’s CI/CD system (you can see the Actions’ workflows in the code), has a great infrastructure, and you can set up a custom domain.
  • If you are using Vite for development, you might encounter an issue with the dev server not being able to serve a standalone script (eg plugin.js) and an app simultaneously. For a partial workaround (at least until Vite 6), I wrote a Node server script for All Icons. It runs in front of the plugin script’s production build in watch mode and the app’s dev server, serving the plugin file and routing traffic accordingly. This means everything is available under a single port, and the app has all the development tools like source maps and HMR. The solution includes two dev config files and the server script, so it’s best to take a look at the “dev” npm script and go from there.
1 Like