Packaging & Distribution

How to build, package, and distribute OpenGPEX plugins for installation by other users.

Build Tool

Use the built-in packaging script:

pnpm pack-plugin <PluginFolderName>

Example:

pnpm pack-plugin ColorPickerDrawer
# Output: dist/plugins/ColorPickerDrawer.zip

ZIP Structure

The packaged ZIP contains:

ColorPickerDrawer.zip
├── manifest.json       # Plugin metadata (generated from index.tsx)
├── index.mjs           # ESM bundle (compiled from TypeScript)
├── styles.css          # Extracted CSS (if any)
└── assets/             # Static assets (icons, images)
    └── icon.png

Manifest Requirements

The manifest.json must include:

{
  "id": "drawers.color_picker",
  "displayName": "Color Picker",
  "version": "1.0.0",
  "description": "A simple color picker tool",
  "author": "my-username",
  "category": "drawers",
  "engine": ">=1.0.0",
  "entrypoint": "index.mjs"
}

The engine field specifies the minimum OpenGPEX version required.

External Dependencies

Plugins cannot bundle external npm packages. They must rely on:

APIs provided by the editor (via hooks and context)
Built-in libraries exposed by the runtime (React, Lucide icons)
Self-contained code within the plugin bundle

Distribution Channels

Channel	Method
GPEX Hub	Upload ZIP via the Hub web interface (coming soon)
Direct share	Send ZIP file; recipient installs via Settings > Plugins
Git repository	Clone and place in `plugins/user/` for local dev

Installation (User Side)

Download the .zip file
Open Editor → Settings → Plugins → Install
Select the ZIP file
Plugin appears in the appropriate slot immediately

Next Steps

Your First Plugin — Create a plugin to package
Asset Management — Bundle static assets
Security & Isolation — Trust levels for distributed plugins

Last updated: 2026-06-14