@rifrocket/fdt-plugin-devtools

Five diagnostic panels for developing against Fabric Design Tool.

A panel-slot wrapper plugin: five debugging panels, all built entirely from the engine's public API (no private/internal access), registered into sidebar-right in one shot by install(). Each panel is also individually exported, so you can mount just the ones you want in your own layout instead of taking all five.

Features

• EventLogPanel — a live feed of engine.events
• CanvasStateViewer — zoom, pan, selected object ids, propertyVersion
• HistoryPanel — engine.history.list(), oldest first
• HierarchyPanel — the object tree
• PerformanceStats / usePerformanceStats — render-loop performance stats, as a component or a hook

Recommended dev-only, e.g. plugins: { add: [...(import.meta.env.DEV ? [devtoolsPlugin] : [])] }. Not bundled into either <DesignEditor> preset.

devtoolsPlugin.uninstall(engine) removes all 5 panels from only that engine.

Install

npm install @rifrocket/fdt-plugin-devtools

Peer dependencies: fabric, react, react-dom. Depends on @rifrocket/fabricjs-design-tool and @rifrocket/fdt-react.

Quick start

import { devtoolsPlugin } from "@rifrocket/fdt-plugin-devtools";

engine.use(devtoolsPlugin); // registers all five panels into "sidebar-right"

Or mount panels individually:

import { CanvasStateViewer, HistoryPanel, PerformanceStats } from "@rifrocket/fdt-plugin-devtools";

<MyDevToolsShell>
  <CanvasStateViewer engine={engine} />
  <HistoryPanel engine={engine} />
  <PerformanceStats engine={engine} />
</MyDevToolsShell>;

Documentation

• Full plugin reference

License

MIT © Fabric Design Tool Contributors