Undo and Redo using browsers history

Lucamug
1 min readFeb 2, 2018

--

DemoCode

If we have a simple enough application where the state of the application (model) can be converted to a string, we can leverage the browser built-in history functionality to implement a Undo-Redo feature.

To build this in Elm we need

* A function that convert the model to string and vice-versa
* A SPA implemented with pushstate
* A function that detect the press of ⌘Z (Undo) and ⇧⌘Z (Redo)

This is a demo of this methodology. After opening the app, try moving the tangram pieces or selecting other configuration from the buttons at the top.

We can see the url in the address bar changing accordingly.

Now pressing ⌘Z or ⇧⌘Z we will be able to move back and forward in the state history.

Have a look at the code for details of the implementation.

--

--

No responses yet