@rifrocket/fdt-plugin-effects

22 stackable object effects for Fabric Design Tool — shadow, glow, glitch, duotone, and more.

A pure engine plugin that registers an object-effects system — 22 named effects, each independently reorderable/stackable on any object type. Unlike other plugin-* packages, this one exports a factory function, createEffectsPlugin(), rather than a plain plugin object: the effect list is configurable, and since every effect is a side-effect-free independent export, passing a curated subset genuinely shrinks your bundle.

Features

All 22 built-in effects, grouped by category (also exported as BASIC_EFFECTS, CREATIVE_EFFECTS, TEXT_EFFECTS, IMAGE_EFFECTS, or together as ALL_BUILTIN_EFFECTS):

shadow · glow · inner-shadow · outline · blur · opacity · echo · glitch · neon · duotone · pixelate · noise · vintage · retro · gradient-fill · multi-layer-shadow · brightness · contrast · saturation · hue · vignette · sepia

• createEffectsPlugin() is idempotent — safe to call more than once across engines
• Every effect ships a matching *Props type (e.g. ShadowProps, GlitchProps) for its configurable parameters
• Register your own effect alongside the built-ins via engine.registry.effects.register(myCustomEffect)
• Included in both <DesignEditor preset="default"> and preset="minimal" (with no arguments — every built-in effect)
• Safe with multiple CanvasEngines on the same page (e.g. @rifrocket/fdt-plugin-pages' one-engine-per-page model), including engines installed with different effect sets — each engine's own effect registry is resolved per-object at render time, not just whichever engine installed first. uninstall() cleanly removes one engine's own contribution without affecting any other still-live engine.

Install

npm install @rifrocket/fdt-plugin-effects

Peer dependencies: fabric. Depends on @rifrocket/fabricjs-design-tool.

Quick start

import { createEffectsPlugin, shadowEffect, glowEffect } from "@rifrocket/fdt-plugin-effects";

engine.use(createEffectsPlugin());                    // every built-in effect (the default)
engine.use(createEffectsPlugin([shadowEffect, glowEffect])); // a curated subset, smaller bundle

engine.registry.effects.has("shadow"); // true

Documentation

• Full plugin reference

License

MIT © Fabric Design Tool Contributors