mirror of
https://github.com/penpot/penpot-plugins.git
synced 2025-01-23 07:08:47 -05:00
55 lines
1.2 KiB
Markdown
55 lines
1.2 KiB
Markdown
# 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`.
|
|
|
|
```json
|
|
{
|
|
"name": "Example plugin",
|
|
"code": "http://localhost:4201/plugin.js",
|
|
"permissions": ["page:read", "file:read", "selection:read"]
|
|
}
|
|
```
|
|
|
|
Add to the example `vite.config.ts`
|
|
|
|
```json
|
|
build: {
|
|
rollupOptions: {
|
|
input: {
|
|
plugin: 'src/plugin.ts',
|
|
index: './index.html',
|
|
},
|
|
output: {
|
|
entryFileNames: '[name].js',
|
|
},
|
|
},
|
|
}
|
|
```
|
|
|
|
Add to `tsconfig.app.json`
|
|
|
|
```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.
|
|
|
|
```ts
|
|
ɵloadPlugin({ manifest: 'http://localhost:4201/manifest.json' });
|
|
```
|
|
|
|
### More about plugin development
|
|
|
|
Check the [plugin usage](docs/plugin-usage.md) and the [create API](docs/create-api.md) documentation.
|