penpot-plugins/docs/create-plugin.md

Create plugin

To create the basic scaffolding run the following command. Remember to replace example-plugin with your own.

npx nx g @nx/web:application example-plugin --directory=apps/example-plugin

Create a manifes.json in /public.

{
  "name": "Example plugin",
  "code": "http://localhost:4201/plugin.js",
  "permissions": ["page:read", "file:read", "selection:read"]
}

Add to the example vite.config.ts

build: {
  rollupOptions: {
    input: {
      plugin: 'src/plugin.ts',
      index: './index.html',
    },
    output: {
      entryFileNames: '[name].js',
    },
  },
}

Add to tsconfig.app.json

  "include": ["src/**/*.ts", "../../libs/plugins-runtime/src/lib/index.d.ts"]

Then, run the static server

npx nx run example-plugin:build --watch & npx nx run example-plugin:preview

Finally, go to penpot and load the plugin. Run the command in the console devtools from your browser.

ɵloadPlugin({ manifest: 'http://localhost:4201/manifest.json' });

More about plugin development

Check the plugin usage and the create API documentation.