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

npm 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 npm install to install the required dependencies. Then, run npm start to launch the plugins wrapper.

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
npm 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	4301	npm run start:plugin:poc-state	http://localhost:4301/assets/manifest.json
contrast-plugin	Sample plugin that gives you color contrast information	4302	npm run start:plugin:contrast	http://localhost:4302/assets/manifest.json
icons-plugin	Tool to add icons from Feather	4303	npm run start:plugin:icons	http://localhost:4303/assets/manifest.json
lorem-ipsum-plugin	Generate Lorem ipsum text	4304	npm run start:plugin:loremipsum	http://localhost:4304/assets/manifest.json
create-palette-plugin	Creates a board with all the palette colors	4305	npm run start:plugin:palette	http://localhost:4305/assets/manifest.json
table-plugin	Create or import table	4306	npm run start:table-plugin	http://localhost:4306/assets/manifest.json
rename-layers-plugin	Rename layers in bulk	4307	npm run start:plugin:renamelayers	http://localhost:4307/assets/manifest.json

Web Apps

App	Description	PORT	Start command	URL
plugins-runtime	Runtime for the plugins subsystem	4200	npm run start:app:runtime
example-styles	Showcase of some of the Penpot styles that can be used in plugins	4201	npm 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

Penpot is a Kaleidos’ open source project