f993f203bd
* ✨ Adds static dispatch safe stubs in tests * 🐛 Fix shapesColors metadata key to match ColorShapeInfo * 🐛 Fix CommentThread.remove rejecting the owner's own threads * 🐛 Fix page.removeCommentThread throwing on a spurious Promise * ✨ Implement ShapeBase.swapComponent in the plugin API * ✨ Expose File.revn in the plugin API * 🐛 Fix FileVersion.createdAt calling Luxon method on a js/Date * 🐛 Fix plugin font/typography application to text and ranges * 🐛 Default plugin overlay interaction position for non-manual types * 🐛 Fix plugin interaction setters passing an id-only shape * 🐛 Fix grid addColumnAtIndex rejecting valid track types * 🐛 Expose libraryId on library color/typography/component proxies * ✨ Implement LibraryTypography.setFont in the plugin API * 🐛 Fix typography.applyToTextRange reading unexposed range bounds * 🐛 Fix utils.geometry.center argument mismatch * 🐛 Fix localStorage.removeItem calling getItem * 🐛 Fix shape backgroundBlur proxy key casing * 🐛 Report boolean shape type as 'boolean' in the plugin API * 🐛 Return the resulting paths from plugin flatten * 🐛 Make plugin z-order methods act on the target shape * 🐛 Make is-variant-container? return a boolean * ✨ Implement Group.isMask in the plugin API * 🐛 Return a shape proxy from TextRange.shape * 🐛 Return the duplicated set from TokenSet.duplicate * 🐛 Fix theme addSet/removeSet reading set name with a keyword * 🐛 Accept string fontFamilies token value in the plugin API * 🐛 Fix combineAsVariants ignoring the passed component ids * 🐛 Fix board removeRulerGuide ignoring its argument * 🐛 Fix board guides setter schema and parser * 🐛 Avoid 0-byte allocation when syncing empty grid tracks * 🐛 Validate grid track indices in the plugin API * 🐛 Return null for empty input in group() and centerShapes() * 🐛 Return TokenTypographyValue[] from a typography token's resolvedValue * 🐛 Return TokenShadowValue[] from a shadow token's resolvedValue * 🐛 Return string[] from a fontFamilies token's resolvedValue * 🐛 Clear mutually-exclusive reps when setting LibraryColor gradient/image * 🐛 Add readonly tags to types, deprecate Image type * 📚 Update plugins changelog
Penpot Plugins
What can you find here?
We've been working in an MVP to allow users to develop their own plugins and use the existing ones.
There are 2 important folders to keep an eye on: apps and libs.
In the libs folder you'll find:
- plugins-runtime: here you'll find the code that initializes the plugin and sets a few listeners to know when the penpot page/file/selection changes. It has its own README.
- plugins-styles: basic css library with penpot styles in case you need help for styling your plugins.
In the apps folder you'll find some examples that use the libraries mentioned
above.
-
contrast-plugin: to run this example check Create a plugin from scratch
-
example-styles: to run this example you should run
pnpm run start:styles-example
Open in your browser: http://localhost:4202/
Run Penpot sample plugins
This guide will help you launch a Penpot plugin from the penpot-plugins repository. Before proceeding, ensure that you have Penpot running locally by following the setup instructions.
In the terminal, navigate to the penpot-plugins repository and run pnpm -r install to install the required dependencies. Then, run pnpm run start to
launch the plugins runtime.
After installing the dependencies, choose a plugin to launch. You can either run one of the provided examples or create your own (see "Creating a plugin from scratch" below). To launch a plugin, Open a new terminal tab and run the appropriate startup script for the chosen plugin.
For instance, to launch the Contrast plugin, use the following command:
// for the contrast plugin
pnpm run start:plugin:contrast
Finally, open in your browser the specific port. In this specific example would
be http://localhost:4302
A table listing the available plugins and their corresponding startup commands is provided below.
Sample plugins
| Plugin | Description | PORT | Start command | Manifest URL |
|---|---|---|---|---|
| poc-state-plugin | Sandbox plugin to test new plugins api functionality | 4202 | pnpm run start:plugin:poc-state | http://localhost:4202/assets/manifest.json |
| contrast-plugin | Sample plugin that gives you color contrast information | 4202 | pnpm run start:plugin:contrast | http://localhost:4202/assets/manifest.json |
| icons-plugin | Tool to add icons from Feather | 4202 | pnpm run start:plugin:icons | http://localhost:4202/assets/manifest.json |
| lorem-ipsum-plugin | Generate Lorem ipsum text | 4202 | pnpm run start:plugin:loremipsum | http://localhost:4202/assets/manifest.json |
| create-palette-plugin | Creates a board with all the palette colors | 4202 | pnpm run start:plugin:palette | http://localhost:4202/assets/manifest.json |
| table-plugin | Create or import table | 4202 | pnpm run start:table-plugin | http://localhost:4202/assets/manifest.json |
| rename-layers-plugin | Rename layers in bulk | 4202 | pnpm run start:plugin:renamelayers | http://localhost:4202/assets/manifest.json |
| colors-to-tokens-plugin | Generate tokens JSON file | 4202 | pnpm run start:plugin:colors-to-tokens | http://localhost:4202/assets/manifest.json |
| poc-tokens-plugin | Sandbox plugin to test tokens functionality | 4202 | pnpm run start:plugin:poc-tokens | http://localhost:4202/assets/manifest.json |
Web Apps
| App | Description | PORT | Start command | URL |
|---|---|---|---|---|
| plugins-runtime | Runtime for the plugins subsystem | 4200 | pnpm run start:app:runtime | |
| example-styles | Showcase of some of the Penpot styles that can be used in plugins | 4201 | pnpm run start:app:styles-example | http://localhost:4201/ |
Creating a plugin from scratch
If you want to create a new plugin, read the following README
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 Sucursal en España SL
Penpot is a Kaleidos’ open source project