The latest articles on DEV Community by Lurline (@lurline_244691a114512c06e). https://dev.to/lurline_244691a114512c06e https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3745249%2Fd45170fe-73dd-47ee-9000-797f3f6a20e9.png https://dev.to/lurline_244691a114512c06e en Lurline Tue, 02 Jun 2026 14:13:18 +0000 https://dev.to/lurline_244691a114512c06e/building-pixelbead-a-free-browser-based-photo-to-bead-pattern-maker-51jo https://dev.to/lurline_244691a114512c06e/building-pixelbead-a-free-browser-based-photo-to-bead-pattern-maker-51jo <h2> Building Pixelbead: turning photos into printable bead patterns </h2> <p>I built <a href="https://www.pixelbead.art/?utm_source=devto&amp;utm_medium=organic_article&amp;utm_campaign=launch_jun_2026" rel="noopener noreferrer">Pixelbead</a> because I wanted a simple way to turn photos and illustrations into fuse bead patterns without creating an account or uploading private images to a server.</p> <p>The tool is aimed at hobbyists who work with Perler beads, Hama beads, Artkal beads, MARD beads, and similar fuse beads.</p> <h2> What it does </h2> <p>Pixelbead converts an image into a printable bead grid directly in the browser.</p> <p>Current features:</p> <ul> <li>Local image processing in the browser</li> <li>Brand palettes for Perler, Hama, Artkal, and MARD</li> <li>Grid size and color count controls</li> <li>CIEDE2000-based perceptual color matching</li> <li>Manual color editing with undo and redo</li> <li>PNG and PDF pattern export</li> <li>Materials list CSV export</li> <li>Share card export</li> <li>Mobile-friendly editor layout</li> </ul> <p>The important privacy choice is that uploaded images are processed locally. The image itself is not sent to my server for conversion.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyytiqwvzncdzzcar1ack.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyytiqwvzncdzzcar1ack.png" alt=" " width="800" height="582"></a></p> <h2> Why client-side processing </h2> <p>For this kind of tool, the original image is often personal: pets, family photos, gifts, portraits, fan art drafts, or craft references. I wanted the default flow to avoid server-side image upload entirely.</p> <p>The conversion pipeline runs in the browser:</p> <ol> <li>Load the image into Canvas.</li> <li>Resize it into the selected bead grid.</li> <li>Compare sampled colors against selected bead palettes.</li> <li>Generate a grid, color counts, and export files.</li> </ol> <p>Heavy conversion work runs in a Web Worker so changing grid width, color count, or palette settings does not freeze the interface.</p> <h2> Color matching tradeoffs </h2> <p>The current implementation uses CIEDE2000-style perceptual color comparison rather than a simple RGB distance. It helps produce more practical results for craft planning, but it is still a planning tool rather than a guarantee.</p> <p>Real bead output can differ because of:</p> <ul> <li>monitor color differences</li> <li>bead batch differences</li> <li>lighting conditions</li> <li>ironing results</li> <li>limited availability of exact colors</li> </ul> <p>That is why the export includes color codes and bead counts, but the user still needs to check real bead availability before making a large project.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqktqqbbvnpbm6w0zjec4.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqktqqbbvnpbm6w0zjec4.png" alt=" " width="799" height="359"></a></p> <h2> Export workflow </h2> <p>The most useful workflow so far is:</p> <ol> <li>Upload a photo.</li> <li>Pick a bead brand palette.</li> <li>Adjust grid size and color count.</li> <li>Manually fix important areas.</li> <li>Export a printable PDF.</li> <li>Export a materials CSV before buying beads.</li> </ol> <p>I recently added a share card export as well, because people often want to show the generated pattern before starting the craft.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flyz0q0z46j9y8w9iic5p.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flyz0q0z46j9y8w9iic5p.png" alt=" " width="800" height="367"></a></p> <h2> What I am looking for </h2> <p>I would like feedback from developers and craft users on:</p> <ul> <li>whether the editor feels clear on mobile</li> <li>whether the PDF export is practical enough for printing</li> <li>which bead brands or color sets should be improved next</li> <li>whether the manual painting workflow is easy to understand</li> </ul> <p>Live tool:</p> <p><a href="https://www.pixelbead.art/?utm_source=devto&amp;utm_medium=organic_article&amp;utm_campaign=launch_jun_2026" rel="noopener noreferrer">https://www.pixelbead.art/</a></p> <p>If you try it with a real craft image, I would appreciate feedback on where the output feels confusing or hard to use.</p> showdev webdev react javascript