Skip to main content

Fabric Design Tool

@rifrocket/fdt-* is a Fabric.js-based design tool engine, split into small, independently installable packages: a framework-agnostic canvas core, a thin React adapter, a CSS theme, and a plugin ecosystem covering shapes, QR codes, SVG import, images, effects, PDF export, and more.

It's built for two different audiences at once:

  • Application developers who want a batteries-included design editor (think: a Canva-style canvas) embedded in their product in a few lines of React.
  • Framework consumers who want just the canvas engine — object model, undo/redo, viewport, plugin registries — with no UI opinions at all, to build a completely custom editor on top.

Why a framework-agnostic core?​

Most Fabric.js-based editors hard-wire the canvas, the UI, and the feature set together, which makes them impossible to extend without forking. @rifrocket/fabricjs-design-tool owns exactly one thing — a single Fabric.js Canvas instance — and exposes every other capability (object types, tools, panels, property fields, import/export formats) as a registry that plugins register into. The React package, and every one of the 17 official plugin packages, are built entirely on top of that same public registry API — nothing in this framework has special internal access that a third-party plugin doesn't also have.

Two ways in​

import { DesignEditor } from "@rifrocket/fdt-react";

// Batteries-included: shapes, clipboard, SVG import, images, effects, PDF export, QR codes.
<DesignEditor preset="default" theme="system" width={800} height={600} />;
import { createEngine } from "@rifrocket/fabricjs-design-tool";

// Framework-agnostic: no React, no bundled plugins, just the engine.
const engine = createEngine(canvasElement, { width: 800, height: 600 });
engine.addObjectOfType("rect", { left: 10, top: 10, width: 100, height: 60 });

Head to Getting Started to install the packages you need, or jump straight to the Quick Start for a verified-working example.

Project status​

Every @rifrocket/fdt-* package (and @rifrocket/fabricjs-design-tool itself) is published to npm, at 3.0.0 and up — this is the v2+ rewrite of a previously-published @rifrocket/fabricjs-design-tool (v1). See the migration guide if you're coming from v1, and the GitHub repository for release status.

Where to go next​

  • Choosing your entry point — <DesignEditor> vs <Editor> vs createEngine(), and which one fits your app.
  • Architecture overview — how the monorepo, the CanvasEngine, and the React adapter fit together.
  • Plugins overview — the 17 official plugin packages, and the different plugin shapes you'll want to know about before you install one.
  • Writing a plugin — build your own extension end-to-end.