Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/tldraw/tldraw/llms.txt

Use this file to discover all available pages before exploring further.

​
HighlightShapeUtil

HighlightShapeUtil provides functionality for highlighter-style drawing with semi-transparent strokes. It’s similar to the draw tool but uses a different rendering style optimized for highlighting text or content.

​
Overview

The highlight shape creates freehand paths with a semi-transparent, marker-like appearance. It’s designed for emphasizing content without obscuring it.

​
Static properties

​
type
string
default:"\"highlight\""
Shape type identifier
​
props
TLHighlightShapeProps
Highlight shape property definitions
​
migrations
Migrations
Shape migration definitions

​
Shape properties

​
segments
TLDrawShapeSegment[]
Array of drawing segments, each containing points with pressure data
​
color
TLColorType
default:"'yellow'"
Highlight color
​
size
's' | 'm' | 'l' | 'xl'
default:"'m'"
Highlight thickness
​
isComplete
boolean
default:"false"
Whether the drawing is complete
​
isPen
boolean
default:"false"
Whether drawn with a pen/stylus (affects rendering)
​
scale
number
default:"1"
Shape scale factor

​
Methods

​
getDefaultProps()

Returns default properties for new highlight shapes. 
getDefaultProps(): TLHighlightShape['props']

​
getGeometry(shape)

Computes geometry from the highlight segments. 
getGeometry(shape: TLHighlightShape): Group2d
Returns a Group2d containing the path geometry for all segments.

​
component(shape)

Renders the highlight using SVG paths with semi-transparent stroke. 
component(shape: TLHighlightShape): JSX.Element
Rendering characteristics:
  • Semi-transparent stroke for marker effect
  • Optimized path simplification
  • Smooth curves between points
  • Pressure-sensitive width (when using pen)

​
indicator(shape)

Renders a simplified indicator for selection. 
indicator(shape: TLHighlightShape): JSX.Element

​
Usage

​
Creating highlights programmatically

import { TLDrawShapeSegment } from 'tldraw'

// Create a highlight
const highlightId = createShapeId()

editor.createShape({
  id: highlightId,
  type: 'highlight',
  x: 100,
  y: 100,
  props: {
    color: 'yellow',
    size: 'l',
    segments: [
      {
        type: 'free',
        points: [
          { x: 0, y: 0, z: 0.5 },
          { x: 10, y: 5, z: 0.5 },
          { x: 20, y: 3, z: 0.5 },
          // ... more points
        ]
      }
    ],
    isComplete: true
  }
})

​
Highlighting with different colors

// Yellow highlighter (default)
editor.setStyleForNextShapes({ color: 'yellow' })
editor.setCurrentTool('highlight')

// Orange highlighter
editor.setStyleForNextShapes({ color: 'orange' })

// Green highlighter
editor.setStyleForNextShapes({ color: 'light-green' })

​
Adjusting highlight thickness

// Thin highlight
editor.setStyleForNextShapes({ size: 's' })

// Medium highlight (default)
editor.setStyleForNextShapes({ size: 'm' })

// Thick highlight
editor.setStyleForNextShapes({ size: 'xl' })

​
Differences from DrawShapeUtil

While similar to DrawShapeUtil, highlights have key differences:
FeatureHighlightShapeUtilDrawShapeUtil
OpacitySemi-transparentOpaque
PurposeEmphasizing contentGeneral drawing
StyleMarker-likePen-like
FillNever filledCan be filled

​
Common patterns

​
Temporary highlight overlay

function TemporaryHighlight({ content }: { content: string }) {
  const editor = useEditor()
  
  const highlightText = () => {
    // Switch to highlight tool
    editor.setCurrentTool('highlight')
    editor.setStyleForNextShapes({ color: 'yellow', size: 'l' })
    
    // User draws highlight
    // When complete, return to select tool
    editor.once('shape-create', () => {
      editor.setCurrentTool('select')
    })
  }
  
  return <button onClick={highlightText}>Highlight</button>
}

​
Multiple highlight colors

const HIGHLIGHT_COLORS = ['yellow', 'orange', 'light-green', 'light-blue'] as const

function HighlighterPalette() {
  const editor = useEditor()
  
  const selectHighlighter = (color: typeof HIGHLIGHT_COLORS[number]) => {
    editor.setCurrentTool('highlight')
    editor.setStyleForNextShapes({ color })
  }
  
  return (
    <div>
      {HIGHLIGHT_COLORS.map(color => (
        <button 
          key={color}
          onClick={() => selectHighlighter(color)}
          style={{ backgroundColor: color }}
        >
          {color}
        </button>
      ))}
    </div>
  )
}