# Fabric.js Document Engine

> Fabric.js save and load, undo and redo, autosave and export for your canvas editor. Stable object ids, versions, crash recovery and optional React hooks.

Fabric.js Document Engine (`fabricjs-document-engine` on npm) turns an existing Fabric.js canvas into an editable document: save and load, undo and redo, autosave with conflict checks, export, versions, crash recovery and custom objects. You keep your own canvas, toolbar and UI.

- Install: `npm install fabricjs-document-engine fabric`. Works with Fabric.js 6 and 7. No hosted service is needed.
- Main entry: `createDocumentEngine({ canvas, storage })` returns the engine with `save()`, `load(id)`, `undo()`, `redo()` and `export()`.
- Other entries: `/storage` (localStorage, memory and custom adapters), `/recovery` (IndexedDB crash recovery), `/react` (optional hooks).
- Every page below is markdown. Append `.md` to any docs URL to get the same.
- Everything in one file: https://fabricjs-document-engine.jscrate.dev/llms-full.txt
- Source: https://github.com/re-sohail/fabricjs-document-engine · Package: https://www.npmjs.com/package/fabricjs-document-engine

## Overview

- [Quick start](https://fabricjs-document-engine.jscrate.dev/docs/overview/quick-start.md): Save a Fabric.js canvas as JSON and load it back in a few lines. Install the package, connect your canvas and get undo redo and autosave too.
- [Editor tutorial](https://fabricjs-document-engine.jscrate.dev/docs/overview/tutorial.md): A Fabric.js editor tutorial in plain TypeScript: build a canvas editor with shapes, undo redo, autosave to localStorage and export to PNG.
- [Why a document engine](https://fabricjs-document-engine.jscrate.dev/docs/overview/why-document-engine.md): 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.
- [Comparison](https://fabricjs-document-engine.jscrate.dev/docs/overview/comparison.md): How this Fabric.js undo redo library compares with fabric-history, fabricjs-react and hand-written toJSON saving, so you can pick the right fit.
- [FAQ](https://fabricjs-document-engine.jscrate.dev/docs/overview/faq.md): Fabric.js FAQ: how to save a canvas as JSON, add undo redo, keep custom properties, use React and export images with this document engine.
- [Roadmap](https://fabricjs-document-engine.jscrate.dev/docs/overview/roadmap.md): The Fabric.js editor roadmap for this package: what is stable in 1.x, what may come next, and how to send feature requests through GitHub issues.

## Guides

- [Save and load](https://fabricjs-document-engine.jscrate.dev/docs/guides/save-and-load.md): Save a Fabric.js canvas and load from JSON safely. Replace toJSON and loadFromJSON with validated loading that never leaves a half-empty canvas.
- [Autosave](https://fabricjs-document-engine.jscrate.dev/docs/guides/autosave.md): Add Fabric.js autosave to your canvas editor. Track unsaved changes, show a save status, retry failed saves and never let an old save overwrite new work.
- [Save conflicts](https://fabricjs-document-engine.jscrate.dev/docs/guides/save-conflicts.md): Detect a canvas editor save conflict when two tabs or devices edit one document. Revision checks stop silent overwrites and let the user choose.
- [Undo and redo](https://fabricjs-document-engine.jscrate.dev/docs/guides/undo-redo.md): Add Fabric.js undo redo to your editor: one step per user action, transactions for code changes, keyboard shortcuts and a history that stays fast.
- [Custom objects](https://fabricjs-document-engine.jscrate.dev/docs/guides/custom-objects.md): Save and load a Fabric.js custom object with its custom properties. Register the class once, get objects by id, and avoid fromObject errors.
- [Images and fonts](https://fabricjs-document-engine.jscrate.dev/docs/guides/assets-and-fonts.md): Load Fabric.js images and fonts reliably: check every image before loading, load each font family first, upload local images and fix CORS issues.
- [Export](https://fabricjs-document-engine.jscrate.dev/docs/guides/export.md): Fabric.js export image files as PNG, JPEG or WebP, export SVG or export to JSON. Pick the area and scale, and find broken images before export fails.
- [Versions](https://fabricjs-document-engine.jscrate.dev/docs/guides/versions.md): Add canvas version history to your editor: keep named versions, save automatic ones every few saves, and restore a version without losing any work.
- [Recovery](https://fabricjs-document-engine.jscrate.dev/docs/guides/recovery.md): Recover unsaved canvas work after a crash or refresh. The engine copies edits to IndexedDB while the user works and offers them back on the next start.
- [Migration](https://fabricjs-document-engine.jscrate.dev/docs/guides/migration.md): Fabric.js migration without a rewrite: open canvas.toJSON output from Fabric 5, move to Fabric.js v6 or Fabric.js 7, and upgrade old documents on load.
- [Document format](https://fabricjs-document-engine.jscrate.dev/docs/guides/document-format.md): The Fabric.js JSON format this engine saves: schema version, canvas size, objects with stable ids, the asset list and metadata, with a JSON Schema.
- [Security](https://fabricjs-document-engine.jscrate.dev/docs/guides/security.md): Fabric.js JSON security for documents users upload: block prototype pollution, refuse unsafe image URLs and set an object limit before anything loads.
- [Accessibility](https://fabricjs-document-engine.jscrate.dev/docs/guides/accessibility.md): Build an accessible Fabric.js editor: undo buttons with clear names, save status for screen reader users, keyboard shortcuts and focus-safe dialogs.

## Storage

- [Storage adapters](https://fabricjs-document-engine.jscrate.dev/docs/storage/storage-adapters.md): Save a Fabric.js canvas to a database, localStorage or any REST API. Pick a built-in storage adapter or write your own with two functions.
- [Custom backend](https://fabricjs-document-engine.jscrate.dev/docs/storage/custom-backend.md): Write Fabric.js backend storage for your own REST API: revision checks in SQL, clear errors, image upload and versions, in one small adapter.
- [Verify an adapter](https://fabricjs-document-engine.jscrate.dev/docs/storage/verify-adapter.md): Test a storage adapter before users trust it with their work. verifyStorageAdapter checks save conflict handling, revisions, overwrite and versions.

## Frameworks

- [React](https://fabricjs-document-engine.jscrate.dev/docs/frameworks/react.md): Using Fabric.js with React: a complete Fabric.js React example with hooks for the engine, a toolbar built from useDocumentState, and StrictMode-safe cleanup.
- [Next.js](https://fabricjs-document-engine.jscrate.dev/docs/frameworks/next-js.md): Set up Fabric.js in Next.js without SSR errors: render the canvas editor in a client component with 'use client' and a dynamic import that skips the server.
- [Vue](https://fabricjs-document-engine.jscrate.dev/docs/frameworks/vue.md): Use Fabric.js with Vue 3: keep the canvas out of deep reactivity with shallowRef and toRaw, and drive your toolbar from createDocumentStateStore.
- [Svelte](https://fabricjs-document-engine.jscrate.dev/docs/frameworks/svelte.md): Use Fabric.js with Svelte: create the canvas in onMount, turn createDocumentStateStore into a Svelte store, and build undo and save buttons from it.
- [Plain JavaScript](https://fabricjs-document-engine.jscrate.dev/docs/frameworks/vanilla-js.md): Use this engine with Fabric.js plain JavaScript, without a framework: wire a toolbar to undo, redo and save with events or createDocumentStateStore.

## Production

- [Production checklist](https://fabricjs-document-engine.jscrate.dev/docs/production/production-checklist.md): Run a Fabric.js editor in production: a full engine setup, error handling for every failure, safe document opening and a checklist before you go live.
- [Compatibility](https://fabricjs-document-engine.jscrate.dev/docs/production/compatibility.md): Fabric.js compatibility for this engine: tested with Fabric.js 6 and 7 in Chromium, Firefox and Safari, with React 18 and 19, plus performance numbers.
- [Troubleshooting](https://fabricjs-document-engine.jscrate.dev/docs/production/troubleshooting.md): Fabric.js troubleshooting for editors: lost custom properties after loadFromJSON, UNKNOWN_OBJECT_TYPE, a tainted canvas on export, undo that misses changes.

## API

- [createDocumentEngine](https://fabricjs-document-engine.jscrate.dev/docs/api/create-document-engine.md): Every createDocumentEngine option: storage, autosave, history limit, assets, recovery, versions and safety limits, with types and default values.
- [DocumentEngine](https://fabricjs-document-engine.jscrate.dev/docs/api/document-engine.md): All DocumentEngine methods: save and load documents, undo and redo, export, versions, recovery, assets and events, with their types and behavior.
- [Events](https://fabricjs-document-engine.jscrate.dev/docs/api/events.md): Every document engine event with its payload: save:status, history:change, load, recovery, export and version events, and how to unsubscribe.
- [Error codes](https://fabricjs-document-engine.jscrate.dev/docs/api/error-codes.md): Every document engine error code, such as SAVE_CONFLICT, MISSING_ASSETS and UNSAVED_CHANGES, with when it happens and how to handle it in your editor.
- [React hooks](https://fabricjs-document-engine.jscrate.dev/docs/api/react-hooks.md): Reference for the Fabric.js React hooks: useDocumentEngine, useDocumentState, useDocumentEvent, useEngine and DocumentEngineProvider, with signatures.
- [Storage API](https://fabricjs-document-engine.jscrate.dev/docs/api/storage-api.md): The storage adapter API: createLocalStorage, createMemoryStorage, createKeyValueStorage, verifyStorageAdapter and the DocumentStorage interface.
- [Recovery API](https://fabricjs-document-engine.jscrate.dev/docs/api/recovery-api.md): The recovery store API: createIndexedDbRecovery, createMemoryRecovery and the RecoveryStore interface, including setNow for the moment a page closes.
- [Helpers](https://fabricjs-document-engine.jscrate.dev/docs/api/helpers.md): Document engine helpers for the browser and the server: downloadExport, bindKeyboardShortcuts, validateDocument, migrateDocument and more.

## Optional

- [Releases](https://fabricjs-document-engine.jscrate.dev/docs/overview/releases.md): fabricjs-document-engine release notes: what changed in each version, from the first save and load to the frozen 1.0 format for Fabric.js 6 and 7.
- [About](https://fabricjs-document-engine.jscrate.dev/docs/overview/about.md): About fabricjs-document-engine, an open source Fabric.js npm package for saving, loading and undo in canvas editors. MIT licensed and written in TypeScript.
- [GitHub releases](https://github.com/re-sohail/fabricjs-document-engine/releases): Full release notes for every version.