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/

Create a plugin from scratch or run the examples from the apps folder

First of all it's necessary to have penpot running locally, you can check the steps here

Once you've done the previous step, you'll need to move to the following branch as we still have the penpot part WIP Remember to run penpot:

./manage.sh pull-devenv
./manage.sh run-devenv

Then, you need to run npm start in the penpot-plugins repository.

At this point, you have 2 choices:

• if you want to run the examples you should run:

// for the example plugin
npm run start:example

or

npm run start:pc-plugin

or

// for the contrast plugin
npm run start:contrast-plugin

Open in your browser: http://localhost:4210/

• if you want to create a new plugin, read the following README

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/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/

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