Overview
The monorepo
The CanvasEngine
CanvasEngine is the central object in @rifrocket/fabricjs-design-tool. It owns one Fabric.js Canvas and composes narrow, independently-testable managers around it instead of exposing the raw canvas as the primary surface.
Store & Events
CanvasEngine exposes two separate reactivity mechanisms, and it's worth knowing why there are two rather than one.
History & Commands
Undo/redo is built on the command pattern, not whole-canvas snapshots. Every mutation stores a small object describing what changed and how to reverse it, instead of a full serialized copy of the canvas. This matters because a snapshot-based approach costs memory proportional to total document size on every single edit — the cost gets worse as a document grows, on every undo step, regardless of how small the actual edit was. Command objects instead cost memory proportional to the number of changes.
The React Adapter
@rifrocket/fdt-react is intentionally thin. ` doesn't add any capability @rifrocket/fabricjs-design-tool doesn't already have — it wires createEngine() into React's lifecycle, provides the resulting CanvasEngine` through context, and renders four named panel slots.