# Drawing editor
Source: https://signy.dev/examples/undo-redo/
Every change is a snapshot, so undo is a step back in a list.
The drawing is an immutable list of shapes. Each change pushes a new snapshot to the history, and undo and redo move a pointer through it. Ctrl+Z and Ctrl+Shift+Z work too, through a key listener the component removes when it unmounts.
## Preview
[Open the page on its own](https://signy.dev/examples/undo-redo/demo/index.html.md)
## Code
Save it as an `.html` file and open it in a browser. It loads Signy and Iris CSS from the CDN, so there is nothing to install or build.
**Show the full page**
```html
Drawing editor - Signy example
```
## What it uses
- [Signals](https://signy.dev/documentation/1/reactivity/signals/index.html.md) holding immutable snapshots
- [batch()](https://signy.dev/documentation/1/reactivity/batching/index.html.md) to move the pointer and the history together
- [DOM.onKeydown](https://signy.dev/documentation/1/components/dom-helpers/index.html.md) with cleanup
- [For](https://signy.dev/documentation/1/templates/for-and-index/index.html.md) for the shapes
- [SVG](https://signy.dev/documentation/1/templates/html-templates/index.html.md) circles and squares with bound positions