Skip to main content

Undo and Redo

The Editor Starter implements a basic Undo and Redo feature.
It works by keeping an array of snapshots of the undoable state of the editor in memory.

Undo stack​

An undo stack is an array of previous states that is being kept in memory.
By default, the undo stack holds 50 states.

Whenever updating a state, you should set the commitToUndoStack property appropriately to indicate whether the state update should be committed to the undo stack.

Actions that you may not want to add to the undo stack are high-frequency state update like:

  • Dragging an item in the canvas
  • Dragging an item in the timeline
  • Trimming an item in the timeline
  • Changing a value in the inspector with the slider

In these cases, it is appropriate to only commit to the undo stack once the mouse cursor is released.

Preventing unnecessary additions to the undo stack​

An addition to the undo stack is only made when the object reference of the state has changed.
If after a state update, JavaScript evaluates oldState === newState to true, the state update is not added to the undo stack.

See Preventing state updates when nothing has changed for more information.

Undo and Redo interactions​

You can undo and redo actions:

  • by using the buttons
  • the built-in keyboard shortcuts: Ctrl + Z for undo and Ctrl + Y for redo.

This behavior is controlled by the following flags:

See also​