Fabric.js draws objects, handles pointer interaction and turns the canvas into JSON. A canvas editor needs more than that. A Fabric.js document engine coordinates those pieces into a document you can save, reopen, undo and recover.
What toJSON and loadFromJSON leave to you
Most editors start with canvas.toJSON() and canvas.loadFromJSON(). They work for a demo. In a real product, these problems show up one by one:
- Custom properties disappear.
toJSONdrops properties it does not know, unless you list them on every call. - Objects have no stable ids. You cannot link a shape to a comment or a database row, because nothing identifies it across saves.
- A failed load leaves a half-empty canvas. If one image is missing,
loadFromJSONmay clear the canvas and load only part of the document. - Two loads race. The user opens document A, then quickly B. If A finishes last, it wins.
- Old saves overwrite new ones. A slow save can land after a newer one. Another tab can overwrite your work without a warning.
- There is no undo. Fabric.js has no undo redo built in. Snapshotting the whole canvas on every change gets slow with large drawings.
What the engine adds
| Problem | What the engine does |
|---|---|
| No ids | Every object, including children of groups, gets stable object ids |
| Lost custom properties | You register a class and its properties once |
| Half-loaded canvas | The document is validated and every image is checked before the canvas is touched |
| Racing loads | The newest load wins, and older ones are cancelled |
| Old saves overwrite new ones | One save at a time, with revision checks that detect other tabs |
| No undo | One undo step per user action, storing only what changed |
| Lost work after a crash | Unsaved work is copied to IndexedDB while the user edits |
You keep your canvas, toolbar and UI. The Fabric.js document engine only listens to the canvas, and changes it when you load, undo or restore.
What it does not do
- It does not draw a toolbar or any UI. Your app renders the buttons.
- It does not host your data. You plug in your own storage, or use the built-in localStorage adapter.
- It does not replace Fabric.js. You still create objects with Fabric.js classes.
- It does not do real-time collaboration. Revision checks detect conflicts, but two people cannot edit live together.
When to use it
Use a Fabric.js document engine when people save work in your canvas editor and expect to find it again: design tools, floor plans, label designers, whiteboards or image annotation. For a one-off drawing that is never saved, plain Fabric.js is enough.
Next steps
- Quick start: the smallest working setup.
- Comparison: how it compares to undo plugins and hand-written saving.