Skip to main content
Fabric.js powered • Framework agnostic • Extensible

A canvas design tool engine you can actually extend

A framework-agnostic core, a thin React adapter, and a 17-plugin ecosystem — split into small, independently installable packages. Ship a batteries-included editor in one line, or build something entirely your own.

Get Started →Live Demo ↗View on GitHub ↗
TypeScript First
Tree-shakeable
Zero React Dependency
App.tsx
import { DesignEditor } from "@rifrocket/fdt-react";

function App() {
  return (
    <DesignEditor preset="default" theme="system" width={800} height={600} />
  );
}

Framework-agnostic core

@rifrocket/fabricjs-design-tool owns a single Fabric.js canvas and composes independently-testable managers — viewport, selection, layers, alignment, snapping, and command-pattern history — with zero React dependency.

A real plugin system

Object types, tools, panels, property fields, and export/import pipelines are all registry extension points. Ship your own plugin the same way the 17 built-in @rifrocket/fdt-plugin-* packages do.

A thin React adapter

<DesignEditor preset="default" /> gets you a batteries-included editor in one line, or drop down to <Editor> and useEditor() for full control over plugins, panels, and theme.

Batteries included, or à la carte

17 official plugin packages built on the exact same public registry API a third-party plugin uses — no special internal access, nothing to fork.

See the full plugin reference →

Ready to build?

Install what you need, skip what you don't — every package is independently installable.

Installation Guide →Browse Plugins