Plugins

Plugins extend the ImageEditor by registering toolbar tabs, panels, keyboard shortcuts, filter presets, and canvas post-processors.

Built-in plugins

pluginFilters

Import: svelte-chop-chop/plugins/filters
Registers a Filters tab with 17 Instagram-style color matrix presets: Original, Clarendon, Gingham, Moon, Lark, Reyes, Juno, Slumber, Crema, Ludwig, Aden, Perpetua, Mayfair, Rise, Hudson, Valencia and X-Pro II.

pluginFinetune

Import: svelte-chop-chop/plugins/finetune
Registers a Finetune tab with 7 adjustment sliders: Brightness, Contrast, Saturation, Exposure, Temperature, Clarity and Gamma.

pluginFrame

Import: svelte-chop-chop/plugins/frame
Registers a Frame tab to add decorative borders at export time. Frame styles: none, solid, line, and hook. Configurable color and width.

pluginWatermark

Import: svelte-chop-chop/plugins/watermark
Registers a Watermark tab to add text overlays at export time. Positions: top-left, top-center, top-right, center, bottom-left, bottom-center, bottom-right. Configurable text, color, font size, and opacity.

pluginResize

Import: svelte-chop-chop/plugins/resize
Registers a Resize tab for setting a target export resolution.

Plugin API

A plugin is an object with a setup(ctx: PluginContext) method. The context provides everything needed to hook into the editor:

import type { ChopPlugin, PluginContext } from '@we-are-singular/svelte-chop-chop';

export const myPlugin: ChopPlugin = {
  setup(ctx: PluginContext) {
    // Register a toolbar tab
    ctx.registerAction({
      id: 'my-tab',
      label: 'My Tool',
      icon: '🛠️',
      panel: MyPanel,     // Svelte 5 component
    });

    // Add logic that runs after image export
    ctx.registerPostProcessor(async (canvasCtx, canvas) => {
      // draw on canvasCtx / canvas before encoding
    });

    // Register filter presets
    ctx.registerFilterPresets([
      { name: 'Vintage', matrix: [...] },
    }]);
  },
};

PluginContext reference

Method	Description
`registerAction(action)`	Adds a tab button + panel to the toolbar.
`registerPostProcessor(fn)`	Runs `fn(ctx2d, canvas)` on the export canvas after filters.
`registerFilterPresets(presets)`	Adds named color-matrix presets to the `FilterStrip`.
`editor`	The full `ImageEditorReturn` state object.

Using plugins

<ImageEditor
  src="/photo.jpg"
  plugins={[pluginFilters(), pluginFinetune(), pluginResize()]}
/>

Plugins are applied in array order. Each plugin's tabs appear in the toolbar left to right.