# Why a document engine

> Fabric.js draws and serializes. A Fabric.js document engine adds what a real canvas editor needs: stable ids, safe saving, undo redo and recovery.

Source: https://fabricjs-document-engine.jscrate.dev/docs/overview/why-document-engine
Last updated: 2026-09-28

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.** `toJSON` drops 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, `loadFromJSON` may 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](https://fabricjs-document-engine.jscrate.dev/docs/overview/quick-start): the smallest working setup.
- [Comparison](https://fabricjs-document-engine.jscrate.dev/docs/overview/comparison): how it compares to undo plugins and hand-written saving.