Penpot Plugin Starter Template
https://github.com/penpot/penpot-plugin-starter-template- Category
- Developer Tools
- Rank
- No. 1883Tools index
Previous survey · No. 1889 ·
- Pricing
- Open Source
- Type
- TOOL
- Builder
- penpot
- GitHub
- 41 stars
- Date
About
Starter template for building Penpot plugins — open-source design tool extension scaffold.
What it does
It supplies a working plugin example with a small interface and host integration. The interface sends a request to Penpot, which creates and selects text on the canvas. Theme changes also pass from Penpot into the interface.
Why it's ranked here
This is a practical starting point because it demonstrates the full interaction boundary, not just build configuration. It combines typed API access, interface messaging, theme synchronization, local loading, and production builds in a compact example.
What's good
The example teaches the crucial separation between Penpot API code and interface code. Strict TypeScript settings catch common mistakes, while bundled API types provide autocomplete and documentation. Included styles help the interface match Penpot.
Tradeoffs
The starter is intentionally narrow. It demonstrates one button action and theme updates, but provides no tests or test script. Changes to the Penpot integration code require restarting development. Deployment remains the developer’s responsibility.
How to use it well
Choose it when building a first Penpot plugin or validating a small plugin idea. Replace the sample action, declare only required permissions, and extend the interface gradually. It does not provide hosting, deployment automation, testing infrastructure, or a broader application framework.
Technical notes+
package.json defines a private ES module package with dev running vite build --watch and build running tsc && vite build. src/plugin.ts opens the Penpot UI, handles typed messages, creates canvas text, updates selection, and forwards theme changes. src/main.ts reads the initial theme, posts the create request to its parent, and receives theme messages. vite.config.ts builds src/plugin.ts and index.html as separate entries, fixes output entry names, enables source maps and live reload, and configures preview port 4400 with CORS. public/manifest.json points to plugin.js and requests content read and write permissions. tsconfig.json enables strict checking and Penpot plugin types. src/style.css imports the Penpot style package.
Observed
- License
- MIT License
- Primary language
- TypeScript, with HTML and CSS for the plugin interface
- Packaging and install
- Private npm package with dependencies installed through npm
- Development interface
- GitHub template with npm development and build scripts
- Plugin interface
- Loaded into Penpot through a hosted manifest URL
- Included libraries
- Penpot plugin styles and Penpot plugin API types
- Testing structure
- No test script is defined in the package configuration
Read from README.md, package.json, src/main.ts, src/plugin.ts, src/vite-env.d.ts, vite.config.ts, LICENSE, index.html, tsconfig.json, src/style.css, public/manifest.json.
What it can do
Generate plugin boilerplate code
Plugin configuration parameters → Complete plugin project structure with files
Scaffold plugin manifest file
Plugin metadata and settings → Manifest.json file with plugin configuration
Create plugin API integration templates
Penpot API requirements → JavaScript/TypeScript code templates for API calls
Setup development environment configuration
Development preferences and build settings → Build scripts, package.json, and tooling configuration
Generate plugin UI component templates
UI framework choice and component specifications → HTML/CSS/JavaScript files for plugin interface
Create plugin event handlers scaffold
Penpot event types and handler requirements → Event listener and handler function templates
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.