The JavaScript code below implements a simple visual layout designer. To see the source code, visit

The program is simplistic, ugly, and buggy at the moment, but it does allow you to save, load, and create layouts containing a mix of red, green, and blue elements of pre-set sizes, and cyan elements of variable size. The interface also contains checkboxes to allow the user to snap elements to a grid and prevent or allow overlapping elements.

To add an element to the layout, select the desired item in the Add Element select box to create a new instance of that element type, then move the mouse to the desired location and click again to drop the element. If the element has a variable size, it will also be necessary to set the position of the opposite corner and click again.