Javascript Seed Bead Designer

Make a GRID with ROWS and COLUMNS and WIDE.     
Select the color.                     HELP!

Press the Make GRID button. Click squares below to paint beads. Choose a color from pallette above.

press the "Make GRID" button

Help Information

You MUST have JavaScript enabled in your browser for this page to work properly.

Works with MS Internet Explorer 5 or better (sorry, no Netscape).

It's simple! Just fill in the choices in the following sentence:

Make a GRID with ?? ROWS and ?? COLUMNS and ?? WIDE.

Enter the number of rows and the number of columns you want on your grid. Enter the width. This refers to the overall width of the grid on the web page. It can be entered as a percentage (100% = full page width) or in pixels (such as 444px). If you enter a number without "%" or "px", it will default to pixels (so entering "444" is the same as "444px"). These choices give you a lot of control over the size of your "virtual beads".

Then press the "Make GRID" button and the grid will be created. Wherever you click in the grid, the color for that square will be changed to the currently selected color. Change colors as often as you wish. As you are using the script, you have the options to change the current paint color, the color of the grid's background, or the color of the grid lines. Change modes by choosing from the pull down menu. The currently selected color is always displayed next to the pull down menu. When you re-make the GRID, you will lose your work, but the script retains the color information, so the grid and background colors will remain as you chose them for the new grid.

If you make a mistake, just go over it with the background color, or change it to the desired color. You can also start over by clicking the "Make GRID" button again (or by hitting "Refresh" on your browser toolbar).

Note: if you are using a large grid, some operations may take time, such as changing the grid line color. It might appear, as though nothing is happening for a while, please be patient.

Saving your work

You can use a screen capture utility to get a snapshot of your finished work. Clicking 'File - Save' won't save your finished creation, however (if you are viewing this online), it will get you a copy of the JavaScript Bead Designer for your hard drive. Feel free to copy this script; I have placed it in the public domain.


If you have any questions, comments, suggestions, ideas, or you just want to show off your work, please email me at:

Have Fun,