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 and binding types you specify. Style properties are automatically collected from all shapes to ensure consistency across the application.

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

Example

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

// 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 only specific shapes
const minimalSchema = createTLSchema({
  shapes: {
    geo: defaultShapeSchemas.geo,
    text: defaultShapeSchemas.text,
  },
  bindings: defaultBindingSchemas,
})

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

Parameters

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

Returns

TLSchema

A complete TLSchema ready for use with Store creation