Document engine helpers

The main entry exports a few document engine helpers next to createDocumentEngine. The browser helpers wire the engine into the page. The document helpers work in Node without a canvas.

Browser helpers

function bindKeyboardShortcuts(engine: UndoRedoTarget, options?: KeyboardShortcutOptions): () => void

Ctrl/Cmd+Z undoes. Ctrl/Cmd+Shift+Z and Ctrl+Y redo. Ignored while the user types in an input or in Fabric text. Returns an unbind function.

function bindUnsavedChangesWarning(engine: UnsavedChangesSource, target?: EventTarget): () => void

Asks the browser to confirm before a page with unsaved changes closes. Returns an unbind function.

function downloadExport(result: DownloadableExport, fileName?: string): void

Starts a browser download of an export result.

Name	Type	Default	Description
target	EventTarget	window	Where to listen for key presses.

State for any framework

function createDocumentStateStore(engine: DocumentEngine): DocumentStateStore

Framework-free { getSnapshot, subscribe, destroy } with DocumentState. Fits Vue, Svelte and useSyncExternalStore.

Document helpers

These document engine helpers run anywhere, including a server:

function validateDocument(value: unknown): DocumentIssue[]

Checks a value against the document format. Returns a list of issues with the path of each problem.

function migrateDocument(value: unknown, context: MigrationContext, steps?: Readonly<Record<number, Migration>>, targetVersion?: number): MigrationResult

Upgrades an older document or plain Fabric JSON to the current format. Useful for server-side batch upgrades.

function detectSchemaVersion(value: unknown): number | undefined

Returns 1 for a document, 0 for plain Fabric JSON, otherwise undefined.

function secureDocument(input: unknown, limits?: ContentLimits): unknown

Removes prototype keys and enforces the object and depth limits. Throws UNSAFE_DOCUMENT.

function isSafeImageUrl(url: string): boolean

The default image address rule: http, https, blob, relative addresses and data:image/ are allowed.

Errors

function isDocumentEngineError(value: unknown): value is DocumentEngineError

Type guard for DocumentEngineError, which carries a stable code.

Example: check an upload on the server

import {
  migrateDocument,
  secureDocument,
  validateDocument,
} from "fabricjs-document-engine";
 
const safe = secureDocument(body, { maxObjects: 20000 });
const { document } = migrateDocument(safe, {
  canvasWidth: 1200,
  canvasHeight: 800,
});
const issues = validateDocument(document);

More on these document engine helpers is in security and migration.

Helpers

Browser helpers

State for any framework

Document helpers

Errors

Example: check an upload on the server