Top Toolbar
The toolbar across the top of the editor holds the actions you'll use most — generating a pattern, undoing mistakes, and saving your work in three different formats.
⚡ Generate Pattern
Runs the pattern generator using your uploaded photo and current settings (canvas size, bead type, color count). Stays disabled until a photo is loaded.
🎲 Show Variations
Generates up to 9 candidate patterns with slightly different settings so you can compare them side by side and pick the one you like best.
↩ Undo / ↪ Redo
Steps backward or forward through your manual edits. Keyboard shortcuts: Ctrl+Z to undo, Ctrl+Y (or Ctrl+Shift+Z) to redo.
🔄 Replace Color
Swaps every cell using one palette color for a different color across the whole canvas in a single action — useful for merging two similar shades.
🗑 Clear Edits
Erases all of your manual painting and reverts the canvas back to the state it was in right after generation.
📂 Load
Reopens a project file (.json) you saved earlier, restoring the pattern and all of your edits exactly as you left them.
💾 Save Project (.json)
Saves the current pattern and edit history to a file on your device, so you can pick the project back up later.
📄 Save PDF
Exports a print-ready PDF containing the pattern grid, the color legend, and bead-count statistics.
📤 Save Image (PNG)
Exports the pattern as a high-resolution PNG image, including symbols and grid lines exactly as shown on screen.
Left Settings Panel
Before you generate a pattern, the left panel is where you set up the canvas — bead type, physical size, and how many colors to use.
Bead type (Round / Square)
Choose round (2.8mm) or square (2.5mm) drills. Because they're different sizes, each type produces a slightly different grid density on the same canvas.
Canvas size
Enter a width and height in centimeters to set the physical size of the finished piece — the grid dimensions update automatically to match.
DMC color count
A slider from 5 to 100 that sets how many distinct DMC colors the pattern uses. Fewer colors keep things simple; more colors capture finer detail.
Use owned colors only
After you've marked colors with ★ as ones you already own, enable this to limit new patterns to only those colors.
Show symbols
Toggles whether each cell displays its color-coded symbol in addition to its fill color — helpful when printing in black and white.
Editing Tools
Once a pattern is generated, these six tools let you touch up individual cells or whole regions by hand.
🖊 Paint
Places beads of the currently selected color. Click or drag across cells to paint; Shift+click erases a cell instead.
🗑 Erase
Clears whatever cell you click, leaving it empty.
🪣 Fill
Click one cell to flood-fill every connected cell of the same color with your selected color in one action — great for backgrounds.
💉 Pick
Click any cell on the canvas to instantly set its color as your active paint color, without hunting for it in the palette list.
⬚ Marquee select
Drag a rectangle across the canvas to select an area, then fill or edit every cell inside it at once.
➰ Lasso select
Draw a freeform outline to select an irregularly shaped area for batch editing.
Canvas Controls (Mouse & Keyboard)
These are the ways to move around and zoom the canvas itself, separate from the editing tools above. Keyboard shortcuts only work while the canvas has focus — click it first.
Space + drag
Hold Space and drag with the mouse to pan the view around the canvas.
Mouse wheel
Scroll to zoom in or out, centered on your cursor position.
W A S D
With the canvas focused, pans the viewport up / left / down / right — handy for keeping one hand on the keyboard while the other stays on the mouse.
Shift + W / Shift + S
Steps to the previous (Shift+W) or next (Shift+S) color in the palette list without leaving the canvas, updating the canvas highlight to match.
Right Panel
The right panel tracks your progress and holds the DMC palette you're working from.
Pattern info
Live counts for total cells, DMC colors used, cells you've manually modified, and cells still unedited.
Display options
Toggle symbol display, a stronger grid line, and highlighting for whichever color is currently selected.
DMC palette
Add extra colors, search by DMC code or name, mark colors you own with ★, and see each color's cell count and percentage of the pattern.