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.

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

pluginFinetune

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

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

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.

<ImageEditor
  src="/photo.jpg"
  plugins={[pluginFrame()]}
/>

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.

<ImageEditor
  src="/photo.jpg"
  plugins={[pluginWatermark()]}
/>

pluginResize

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

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

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

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.