Fabric.js JSON format

A saved document wraps the Fabric.js JSON format you already know with the details an editor needs. It is plain JSON, so you can store it in any database, send it over any API and read it in any language.

The shape

interface FabricDocument {
  schemaVersion: number;
  id: string;
  createdAt: string;
  updatedAt: string;
  revision?: number;
  fabricVersion?: string;
  canvas: { width: number; height: number; background?: unknown };
  objects: SerializedFabricObject[];
  assets?: {
    images: Array<{ url: string; objectIds: string[] }>;
    fonts: Array<{
      family: string;
      weight: string;
      style: string;
      objectIds: string[];
    }>;
  };
  metadata: Record<string, unknown>;
}

The fields

Name	Type	Default	Description
schemaVersion*	number	—	The format version. `1` for every 1.x release.
id*	string	—	The document id.
createdAt*	string	—	When the document was created, as an ISO date.
updatedAt*	string	—	When it last changed, as an ISO date.
revision	number	—	The saved revision, used to detect conflicts.
fabricVersion	string	—	The Fabric.js version that wrote it.
canvas*	DocumentCanvas	—	`{ width, height, background? }`.
objects*	SerializedFabricObject[]	—	The serialized objects, in stacking order, each with an id.
assets	AssetManifest	—	The images and fonts the document needs, with the ids of the objects that use them.
metadata*	Record<string, unknown>	—	Your own project data, such as title, owner and tags.

Objects and ids

objects holds the objects in stacking order, in the same Fabric.js JSON format that toObject() produces, plus an id on every object. Children of groups have object ids too. Ids are generated when an object first appears, and never change after that.

Metadata

Keep data about the whole document in metadata, such as a title, an owner or tags:

engine.updateMetadata({ title: "Ground floor", tags: ["draft"] });
engine.getDocumentInfo().metadata;

updateMetadata merges the changes and marks the document as unsaved.

The JSON Schema

The format is described by a JSON Schema that ships with the package. Use it to validate documents in other services, or to generate types in another language:

import schema from "fabricjs-document-engine/schema/document-v1.json";

In TypeScript or JavaScript, validateDocument(value) returns the list of problems with the path of each one.

Stability

Schema version 1 is frozen for every 1.x release. Readers must ignore fields they do not know, because minor releases may add optional ones. The Fabric.js JSON format inside objects follows your Fabric.js version, and the migration step handles differences between Fabric.js 5, 6 and 7.

Document format