Mondrian is a test bed/example for branching undo/redo (or zero effort version control). It is about the simplest possible application that could demonstrate the utility of better undo/redo.

Trial Instructions

To try it out, first use the add button to create some rectangles, then drag the right quadrants to move (upper left) and resize (lower right) them and click on the upper right quadrant to change their colout. If you create too many you can click on a lower left quadrant to delete them.

Start by creating a few coloured blocks. Then use the undo button to return to earlier states. Do that a few times, and then use the undo and redo buttons to navigate from one state to another.

If you click on the history window button you can see the complete history of all the commands you have executed. In the default state if you hover over a command square (either directly or in the magnify window) you will see the corresponding state in the context window. If you click on a command window you will be sent back to the application in the state at that point.

Device Tailoring

If you are on a tablet device without the ability to hover, click the "No hover" checkbox. With that set you must click on a command box in the history window to see the state and use the "Revert" button on the context window to return to that state.

Storage Information

This application uses local storage. I did this to avoid having to implement user authentication on the server. This does mean if you move the code to another location the data will not move with it. I include a simple local storage manager so the data can be deleted if desired. I am saving a png for every action, so storage is consumed at a higher rate than might be expected.


The point of this application is to experiment with different UI features for navigating in an undo/redo tree. Please feel free to comment at

Mondrian is available on github at jrootham/mondrian.

Application links