Asset Management

How plugins load and serve static assets (images, icons, data files) both in development and production.

usePluginResource Hook

Load a static asset bundled with your plugin:

import { usePluginResource } from '@/lib/opengpex/core/plugin';

function MyPanel() {
  const logoUrl = usePluginResource('assets/logo.png');
  return <img src={logoUrl} alt="Logo" />;
}

How It Works

Development Mode (Track 1: Static)

Assets are served directly from the plugin's directory via Next.js:

/plugins/user/MyPlugin/assets/logo.png
→ Served as: /api/plugins/serve?plugin=MyPlugin&path=assets/logo.png

Production Mode (Track 2: Dynamic)

Assets from installed ZIP plugins are extracted to the data directory and served via the API route.

Supported Asset Types

Type	Extensions	Use Case
Images	.png, .jpg, .svg, .webp	Icons, thumbnails
Data	.json, .csv	Configuration, presets
Fonts	.woff2, .woff	Custom typography
Audio	.mp3, .wav	Sound effects (rare)

Asset Bundling in ZIP

When packaging, place assets in an assets/ subdirectory:

MyPlugin/
├── index.tsx
├── components.tsx
└── assets/
    ├── icon.svg
    └── presets.json

The pack-plugin script automatically includes the assets/ directory in the ZIP.

Next Steps

Packaging & Distribution — ZIP structure details
Plugin API Reference — All available hooks
Your First Plugin — End-to-end tutorial

Last updated: 2026-06-14