18:I[7134,["906","static/chunks/baeaa4ff-5b75c5d5973d8e84.js","241","static/chunks/246f48ee-235c2737357a977e.js","949","static/chunks/949-b388bf3817f6aeea.js","546","static/chunks/546-b65273d85027f1c9.js","266","static/chunks/266-4c85e220e10ffd0e.js","275","static/chunks/275-0db600d636765b75.js","139","static/chunks/app/(content)/%5B...id%5D/page-0bd4f6e0198e8d9e.js"],"default"] 19:T5dc,import { MouseEvent } from 'react' import { BaseBoxShapeTool, BaseBoxShapeUtil, HTMLContainer, T, TLBaseShape, stopEventPropagation, } from 'tldraw' type CounterShape = TLBaseShape<'counter', { w: number; h: number; count: number }> export class CounterShapeUtil extends BaseBoxShapeUtil { static override type = 'counter' as const static override props = { w: T.positiveNumber, h: T.positiveNumber, count: T.number, } override getDefaultProps() { return { w: 200, h: 200, count: 0, } } override component(shape: CounterShape) { const onClick = (event: MouseEvent, change: number) => { event.stopPropagation() this.editor.updateShape({ id: shape.id, type: 'counter', props: { count: shape.props.count + change }, }) } return ( {shape.props.count} ) } override indicator(shape: CounterShape) { return } } export class CounterShapeTool extends BaseBoxShapeTool { static override id = 'counter' override shapeType = 'counter' }

Multiplayer demo with custom shape