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-data-parser: useful functions to parse the data we get from penpot. It has its own README.
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.

example-plugin or 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/

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:

// for the example plugin
npm run start

or

npx nx run example-plugin:serve-static --port 4201

// for the contrast plugin
npx nx run contrast-plugin:serve-static --port 4210

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