StyleProp • tldraw Docs

Table of contents

defaultValue
id
type
Properties
Methods

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

The same value can be set on lots of shapes at the same time.
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

defaultValue: Type;

id

readonly

readonly id: string;

type

readonly

readonly type: T.Validatable<Type>;

Methods

define( )

static

Define a new StyleProp.

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

Example

import { T } from "@tldraw/validate";
import { StyleProp } from "@tldraw/tlschema";

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

Parameters

Name	Description
`uniqueId`	`string;` Each StyleProp must have a unique ID. We recommend you prefix this with your app/library name.
`options`	`{ defaultValue: Type; type?: T.Validatable<Type>; };` `defaultValue`: The default value for this style prop. `type`: Optionally, describe what type of data you expect for this style prop.

Returns

StyleProp<Type>;

defineEnum( )

static

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]>;

Example

import { StyleProp } from "@tldraw/tlschema";

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

Parameters

Name	Description
`uniqueId`	`string;` Each StyleProp must have a unique ID. We recommend you prefix this with your app/library name.
`options`	`{ defaultValue: Values[number]; values: Values; };` `defaultValue`: The default value for this style prop. `values`: An array of possible values of this style prop.

Returns

EnumStyleProp<Values[number]>;

setDefaultValue( )

setDefaultValue(value: Type): void;

Parameters

Name	Description
`value`	`Type;`

Returns

void;

validate( )

validate(value: unknown): Type;

Parameters

Name	Description
`value`	`unknown;`

Returns

Type;

validateUsingKnownGoodVersion( )

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

Parameters

Name	Description
`prevValue`	`Type;`
`newValue`	`unknown;`

Returns

Type;