a774ac673a
Some checks failed
Deploy analytics worker / Deploy analytics worker to ${{ (github.ref == 'refs/heads/production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Failing after 1s
i18n upload strings / Upload latest strings (push) Failing after 1s
Deploy bemo / Deploy bemo to ${{ (github.ref == 'refs/heads/bemo-production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Failing after 1s
Deploy grafana resources / ${{ github.event_name == 'push' && 'Deploy grafana resources' || 'Validate grafana resources (dry run)' }} (push) Failing after 0s
End to end tests (dotcom) / Check for relevant changes (push) Failing after 0s
End to end tests (examples) / Check for relevant changes (push) Failing after 0s
End to end tests (mermaid readability) / Check for relevant changes (push) Failing after 1s
End to end tests (perf) / Check for relevant changes (push) Failing after 0s
Publish editor extensions / Publish editor extensions (push) Failing after 1s
Publish SDK packages / Remove the publish-packages label (push) Has been skipped
Checks / Tests & checks (push) Has been cancelled
Checks / Build all projects (push) Has been cancelled
Deploy templates / Deploy templates (push) Has been cancelled
End to end tests (dotcom) / End to end tests (dotcom) (push) Has been cancelled
End to end tests (mermaid readability) / End to end tests (mermaid readability) (push) Has been cancelled
End to end tests (perf) / End to end tests (perf) (push) Has been cancelled
Deploy .com / Deploy dotcom to ${{ (github.ref == 'refs/heads/production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Has been cancelled
End to end tests (examples) / End to end tests (examples) (push) Has been cancelled
Publish SDK packages / Publish SDK packages (push) Has been cancelled
Publish SDK packages / Tell user released version (push) Has been cancelled
Publish SDK packages / Publishes code templates to separate repositories (push) Has been cancelled
Publish SDK packages / Deploys the template demos with the new SDK version (push) Has been cancelled
82 lines
4.0 KiB
Plaintext
82 lines
4.0 KiB
Plaintext
---
|
|
title: Eraser
|
|
created_at: 1/31/2026
|
|
updated_at: 1/31/2026
|
|
keywords:
|
|
- eraser
|
|
- eraser tool
|
|
- delete
|
|
- remove shapes
|
|
- scribble
|
|
status: draft
|
|
date: 1/31/2026
|
|
---
|
|
|
|
The eraser tool deletes shapes from the canvas. Click a shape to erase it, or drag to erase every shape along the pointer's path. Users can select the eraser from the toolbar or press `E`; you can also activate it programmatically:
|
|
|
|
```tsx
|
|
import { Tldraw } from 'tldraw'
|
|
import 'tldraw/tldraw.css'
|
|
|
|
export default function App() {
|
|
return (
|
|
<div style={{ position: 'fixed', inset: 0 }}>
|
|
<Tldraw onMount={(editor) => editor.setCurrentTool('eraser')} />
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Click vs. drag
|
|
|
|
A click erases the shapes under the pointer. Hold Cmd/Ctrl while clicking to erase only the topmost shape. A click that hits a shape inside a frame doesn't also erase the frame.
|
|
|
|
Dragging (or long-pressing) starts scribble erasing. A scribble trail follows the pointer, and every shape the path crosses is marked for deletion. Shapes aren't deleted until you release: marked shapes render at reduced opacity (32% of normal) so the user can see what's about to go.
|
|
|
|
Releasing the pointer deletes the marked shapes. Pressing Escape cancels the gesture and unmarks them.
|
|
|
|
The draw and highlight tools use the eraser too: hold Cmd/Ctrl and press down to erase without leaving the tool. They switch to `eraser.pointing` with `onInteractionEnd` set to their own id, and the eraser returns to that tool when the gesture ends.
|
|
|
|
Each erase gesture is a single history stopping point, so one undo brings back everything it deleted.
|
|
|
|
## What can be erased
|
|
|
|
Locked shapes can't be erased. The eraser also skips shapes with a locked ancestor. See [Locked shapes](/sdk-features/locked-shapes).
|
|
|
|
Groups are erased as a unit: hitting any shape inside a group marks the whole group. The exception is when the drag starts inside the group's bounds—then the eraser works on the shapes inside it and leaves the group alone.
|
|
|
|
Frames behave the same way. Start dragging inside a frame and the eraser deletes the frame's children without deleting the frame itself.
|
|
|
|
## Erasing state
|
|
|
|
While a gesture is in progress, the editor tracks marked shapes in the current page state:
|
|
|
|
```ts
|
|
// Mark shapes as being erased (they render faded)
|
|
editor.setErasingShapes([shapeId1, shapeId2])
|
|
|
|
// Read the marked shapes
|
|
editor.getErasingShapeIds()
|
|
editor.getErasingShapes()
|
|
```
|
|
|
|
The eraser uses [Editor#setErasingShapes](?), [Editor#getErasingShapeIds](?), and [Editor#getErasingShapes](?) internally. You can use them from your own tools to get the same faded preview before deleting shapes with [Editor#deleteShapes](?).
|
|
|
|
## Tool states
|
|
|
|
The eraser is an [EraserTool](?) with the id `eraser` and three child states. Tool lock doesn't apply to it. Pressing Escape in `idle` returns to the select tool.
|
|
|
|
| State | Description |
|
|
| ---------- | ------------------------------------------------------------------------------------------------------------------ |
|
|
| `idle` | Waiting for input. Pointer down transitions to `pointing`. |
|
|
| `pointing` | The pointer is down. Shapes under the point are marked; releasing deletes them. Dragging transitions to `erasing`. |
|
|
| `erasing` | Scribble erasing. Marks every shape the pointer path crosses; releasing deletes them. |
|
|
|
|
Hit testing during scribble erasing uses the segment between the previous and current pointer positions, with a margin of [Editor#getHitTestMargin](?) (`hitTestMargin`, or `coarseHitTestMargin` for touch, divided by the zoom level). This catches shapes even when the pointer moves quickly. Shapes clipped by a frame are skipped unless the pointer is inside the clip.
|
|
|
|
## Related
|
|
|
|
- [Tools](/sdk-features/tools) — How tools and their child states work
|
|
- [Scribble](/sdk-features/scribble) — The scribble system that draws the eraser trail
|
|
- [Locked shapes](/sdk-features/locked-shapes) — Locking shapes to protect them from edits
|