StyleProp

A StyleProp is a property of a shape that follows some special rules.

1. The same value can be set on lots of shapes at the same time.

2. The last used value is automatically saved and applied to new shapes.

For example, DefaultColorStyle is a style prop used by tldraw's default shapes to set their color. If you try selecting several shapes on tldraw.com and changing their color, you'll see that the color is applied to all of them. Then, if you draw a new shape, it'll have the same color as the one you just set.

You can use styles in your own shapes by either defining your own (see StyleProp.define and StyleProp.defineEnum) or using tldraw's default ones, like DefaultColorStyle. When you define a shape, pass a props object describing all of your shape's properties, using StyleProps for the ones you want to be styles. See the custom styles example for more.

class StyleProp<Type> implements T.Validatable<Type> {}

Properties

defaultValue: Type

readonly id: string

readonly type: T.Validatable<Type>

Methods

Define a new StyleProp.

static define<Type>(
  uniqueId: string,
  options: {
    defaultValue: Type
    type?: T.Validatable<Type>
  }
): StyleProp<Type>

import { StyleProp } from '@tldraw/tlschema'
import { T } from '@tldraw/validate'

const MyLineWidthProp = StyleProp.define('myApp:lineWidth', {
  defaultValue: 1,
  type: T.number,
})

string

{
  defaultValue: Type
  type?: T.Validatable<Type>
}

StyleProp<Type>

Define a new StyleProp as a list of possible values.

static defineEnum<const Values extends readonly unknown[]>(
  uniqueId: string,
  options: {
    defaultValue: Values[number]
    values: Values
  }
): EnumStyleProp<Values[number]>

import { StyleProp } from '@tldraw/tlschema'

const MySizeProp = StyleProp.defineEnum('myApp:size', {
  defaultValue: 'medium',
  values: ['small', 'medium', 'large'],
})

string

{
  defaultValue: Values[number]
  values: Values
}

EnumStyleProp<Values[number]>

setDefaultValue(value: Type): void

Type

void

validate(value: unknown): Type

unknown

Type

validateUsingKnownGoodVersion(prevValue: Type, newValue: unknown): Type

Type

unknown

Type