Back to Tldraw

Z-order

apps/examples/src/examples/editor-api/z-order/README.md

5.3.1747 B
Original Source

Reorder shapes programmatically using the editor's z-order methods.


This example shows how to use the four z-order methods to control shape stacking:

  • editor.sendToBack(ids) — move shapes to the very bottom
  • editor.bringToFront(ids) — move shapes to the very top
  • editor.sendBackward(ids) — move shapes one step down (by default, only past overlapping shapes)
  • editor.bringForward(ids) — move shapes one step up (by default, only past overlapping shapes)

Select one or more shapes and use the buttons to see the stacking order change. When multiple shapes are selected, their relative order is preserved. For sendBackward and bringForward, pass { considerAllShapes: true } to move past non-overlapping shapes too.