Easter egg styles

tldraw includes several "easter egg" styles that aren't visible in the default UI but can be accessed through keyboard shortcuts or set programmatically. These styles include:

  • White (Option+T): A white color option for shapes
  • Fill (Option+F) - An alternative solid fill variant
  • Lined fill (Option+Shift+F) - A lined fill pattern variant
  • Label color - A separate color property for text labels on shapes, independent from the shape's main color
  • Scale - A scale property for shapes, independent from the shape's size, available via the Dynamic size preference

This example programmatically creates shapes demonstrating each of these easter egg styles. While these styles aren't publicly exposed in the default UI, they can be useful for specific use cases or when you need more control over styling.

import { Editor, TLGeoShape, Tldraw, toRichText } from 'tldraw'
import 'tldraw/tldraw.css'

export default function EasterEggStylesExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw
				onMount={(editor: Editor) => {
					editor.createShapes<TLGeoShape>([
						{
							type: 'geo',
							x: 0,
							y: 0,
							props: {
								geo: 'rectangle',
								w: 250,
								h: 250,
								color: 'blue',
								fill: 'fill', // Easter egg: Fill style (keyboard shortcut: Option+F)
								richText: toRichText('Fill\n(Option+F)'),
							},
						},
						{
							type: 'geo',
							x: 300,
							y: 0,
							props: {
								geo: 'rectangle',
								w: 250,
								h: 250,
								color: 'blue',
								fill: 'lined-fill', // Easter egg: Lined fill style (keyboard shortcut: Option+Shift+F)
								richText: toRichText('Lined fill\n(Option+Shift+F)'),
							},
						},
						{
							type: 'geo',
							x: 600,
							y: 0,
							props: {
								geo: 'rectangle',
								w: 250,
								h: 250,
								color: 'white', // Easter egg: White color (keyboard shortcut: Option+T)
								fill: 'fill',
								richText: toRichText('White \n(Option+T)'),
							},
						},
						{
							type: 'geo',
							x: 900,
							y: 0,
							props: {
								geo: 'rectangle',
								w: 250,
								h: 250,
								color: 'blue',
								richText: toRichText('Label color'),
								labelColor: 'red', // Separate label color
							},
						},
						{
							type: 'geo',
							x: 1200,
							y: 0,
							props: {
								geo: 'rectangle',
								w: 250,
								h: 250,
								color: 'blue',
								scale: 2.5,
								richText: toRichText('Scale'), // Scale (available via the Dynamic size preference)
							},
						},
					])

					editor.zoomToFit()
				}}
			/>
		</div>
	)
}
Is this page helpful?
Prev
Interaction end callback
Next
Inspector panel