The latest articles on DEV Community by Kenedi Adair (@kenedi_adair_57ccece99319). https://dev.to/kenedi_adair_57ccece99319 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4081084%2F11ee6651-3417-4927-8fde-5559072e8512.png https://dev.to/kenedi_adair_57ccece99319 en Kenedi Adair Mon, 17 Aug 2026 07:33:50 +0000 https://dev.to/kenedi_adair_57ccece99319/i-built-bead-grid-studio-an-open-source-image-to-fuse-bead-pattern-generator-3ik3 https://dev.to/kenedi_adair_57ccece99319/i-built-bead-grid-studio-an-open-source-image-to-fuse-bead-pattern-generator-3ik3 <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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgn2os7pr9bwfjfrbu9fi.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgn2os7pr9bwfjfrbu9fi.png" alt=" " width="800" height="600"></a></p> <h2> I built Bead Grid Studio 🫘 </h2> <p>I wanted an easier way to turn images into practical fuse-bead patterns, so I built <strong>Bead Grid Studio</strong>.</p> <p>It is a free and open-source browser tool that turns an image into an editable bead pattern.</p> <h3> What it can do </h3> <ul> <li>🖼️ Convert images into fuse-bead patterns</li> <li>🎨 Automatically match bead colors</li> <li>✏️ Manually edit the generated pattern</li> <li>🔢 Count how many beads of each color you need</li> <li>📐 Generate grids, coordinates, and color codes</li> <li>🖨️ Export printable construction patterns</li> <li>📱 Works on desktop and mobile</li> <li>🔒 Processes images locally in your browser</li> </ul> <p>No account is required, and your original image does not need to be uploaded to a server.</p> <h2> Why local-first? </h2> <p>Privacy was important to me while building this.</p> <p>Image decoding, conversion, editing, and exporting happen directly in the browser.</p> <p>There is also an offline version that can run from a single HTML file.</p> <h2> Try it / Source code </h2> <p>GitHub:</p> <p><a href="https://github.com/zwhy149/bead-grid-studio" rel="noopener noreferrer">https://github.com/zwhy149/bead-grid-studio</a></p> <p>The project is still young, so I would really appreciate feedback from other developers and makers.</p> <p>If you find:</p> <ul> <li>a conversion that looks wrong</li> <li>a color-matching problem</li> <li>a UI issue</li> <li>an accessibility problem</li> <li>an idea for a useful feature</li> </ul> <p>please feel free to open an Issue.</p> <p>Contributions and Pull Requests are also very welcome. 🙌</p> <p>And if you find the project useful, a ⭐ on GitHub would mean a lot and helps me know that this is worth continuing to improve.</p> <p>Thanks for checking it out! 🫘</p> showdev opensource javascript webdev