Penpot Plugins Samples
https://github.com/penpot/penpot-plugins-samples- Category
- Developer Tools
- Rank
- No. 1872Tools index
Previous survey · No. 1879 ·
- Pricing
- Open Source
- Type
- TOOL
- Builder
- penpot
- GitHub
- 21 stars
- Date
About
Examples showing specific Penpot API functionality to help you start building Penpot plugins.
What it does
A collection of small TypeScript plugins that turn user interface actions into Penpot document changes. The samples create and style objects, manage groups and colors, respond to theme changes, and pass messages between an embedded interface and the plugin runtime.
Why it's ranked here
A strong learning resource because each sample isolates one concrete interaction and includes explanatory comments. It also shows both sides of the plugin boundary: browser interface code and Penpot-facing logic. The awkward setup keeps it from serving as a ready-made project.
What's good
The examples expose practical details that summaries often miss. Text styling demonstrates order-dependent font changes and range-specific formatting. Shape creation covers size, position, fills, strokes, and corner radius. Theme handling shows initial state transfer plus later updates. Grouping checks the selected object type before acting.
Tradeoffs
The repository is a code collection, not a directly runnable package. Testing requires copying or replacing sample content inside a separate starter project. Several interfaces use unrestricted cross-window messaging, and the shown handlers perform limited validation. Color creation also carries a documented limitation around choosing the initial color directly.
How to use it well
Use it when learning Penpot plugin mechanics or prototyping one focused feature. Start with the closest sample, move it into the starter project, then modify and test it in Penpot. It does not replace a complete application scaffold, broader API documentation, or framework-based examples.
Technical notes+
The samples split iframe-side DOM and messaging code from Penpot runtime code. For example, create-text/src/main.ts posts an action to its parent, while create-text/src/plugin.ts receives typed messages, creates text, styles both the object and a character range, centers it, and updates selection. theme/src/main.ts reads the theme from URL parameters and listens for window messages; theme/src/plugin.ts opens the UI with the current theme and forwards theme-change events. Other supplied runtime examples cover rectangles in create-shape/src/plugin.ts, grouping in group-ungroup/src/plugin.ts, and local color-library access in colors-library/src/plugin.ts. README.md directs users to transplant an example into the separate starter template and run its development command.
Observed
- Primary language
- TypeScript
- Interface
- Penpot plugin API with an embedded browser UI
- Install and test surface
- Copy sample files into the separate Penpot plugin starter template, run its npm development command, then install the local manifest URL in Penpot
- Sample structure
- Each contributed sample is expected to contain a source directory, two TypeScript entry files, an HTML page, and a plugin manifest
- Demonstrated capabilities
- Theme synchronization, text and rectangle creation, grouping, ungrouping, and local color-library access
- Framework position
- The samples use the plain TypeScript starter template; the README links separately to framework-based examples
Read from README.md, theme/src/main.ts, theme/src/plugin.ts, create-text/src/main.ts, create-shape/src/main.ts, group-ungroup/src/main.ts, create-text/src/plugin.ts, colors-library/src/main.ts, create-shape/src/plugin.ts, create-comments/src/main.ts, third-party-api/src/main.ts, group-ungroup/src/plugin.ts, colors-library/src/plugin.ts, create-flexlayout/src/main.ts, create-gridlayout/src/main.ts.
What it can do
Demonstrate plugin development patterns
Penpot plugin development requirements → Working code examples and templates
Show API integration methods
Penpot API endpoints and functions → Sample implementations and usage patterns
Provide plugin architecture examples
Plugin structure requirements → Organized code samples with proper file structure
Illustrate UI component creation
Plugin interface requirements → Sample UI components and interaction patterns
Guide event handling implementation
Penpot events and user interactions → Event listener examples and response handlers
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.