The JavaScript code below implements a simple visual layout designer. To see the source code, visit http://thiscouldbebetter.wordpress.com/2013/09/04/a-visual-layout-designer-in-javascript/.

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.