createTLSchema • tldraw Docs

Creates a complete TLSchema for use with tldraw stores. This schema defines the structure, validation, and migration sequences for all record types in a tldraw application.

The schema includes all core record types (pages, cameras, instances, etc.) plus the shape, binding, and custom record types you specify. Style properties are automatically collected from all shapes to ensure consistency across the application.

function createTLSchema({
  shapes,
  bindings,
  user,
  records,
  migrations,
}?: {
  bindings?: Record<string, SchemaPropsInfo>;
  migrations?: readonly MigrationSequence[];
  records?: Record<string, CustomRecordInfo>;
  shapes?: Record<string, SchemaPropsInfo>;
  user?: UserSchemaInfo;
}): TLSchema;

Example

import {
  createTLSchema,
  defaultShapeSchemas,
  defaultBindingSchemas,
} from "@tldraw/tlschema";
import { Store } from "@tldraw/store";

// Create schema with all default shapes and bindings
const schema = createTLSchema();

// Create schema with custom shapes added
const customSchema = createTLSchema({
  shapes: {
    ...defaultShapeSchemas,
    myCustomShape: {
      props: myCustomShapeProps,
      migrations: myCustomShapeMigrations,
    },
  },
});

// Create schema with custom user metadata
const schemaWithCustomUser = createTLSchema({
  user: {
    meta: {
      isAdmin: T.boolean,
      department: T.string,
    },
  },
});

// Create schema with custom record types
const schemaWithCustomRecords = createTLSchema({
  records: {
    comment: {
      scope: "document",
      validator: T.object({
        id: T.string,
        typeName: T.literal("comment"),
        text: T.string,
        shapeId: T.string,
      }),
    },
  },
});

// Use the schema with a store
const store = new Store({
  schema: customSchema,
  props: {
    defaultName: "My Drawing",
  },
});

Parameters

Name Description

Name	Description
`{ shapes, bindings, user, records, migrations }`	`{ bindings?: Record<string, SchemaPropsInfo>; migrations?: readonly MigrationSequence[]; records?: Record<string, CustomRecordInfo>; shapes?: Record<string, SchemaPropsInfo>; user?: UserSchemaInfo; };`

{ shapes, bindings, user, records, migrations }

{
  bindings?: Record<string, SchemaPropsInfo>;
  migrations?: readonly MigrationSequence[];
  records?: Record<string, CustomRecordInfo>;
  shapes?: Record<string, SchemaPropsInfo>;
  user?: UserSchemaInfo;
};

Returns

TLSchema;

A complete TLSchema ready for use with Store creation