Last week, I released https://fretboard.buzz, a free online tool that helps luthiers design fretboards for guitar, bass, mandolin, ukulele, and more.
I’ve been playing guitar since I was a teenager in the late 80s, and got the bug for building guitars circa 2018. A chance encounter with a YouTube video gave me the crazy idea that instead of buying guitars, I should build them! My priorities immediately shifted: outside of my job and my time with my family, I used to mostly divide my time between playing guitar, working on code, or watching San Francisco Giants games (sometimes all three at once). Once I got into guitar building, I spent most of my free time watching videos and reading articles about building guitars. I would still write code and play with the latest tech, but at a much slower clip, hence the lack of posts on pipwerks.com.
(Shameless plug: Here’s a video documenting one of my guitar builds… I made a guitar out of an IKEA butcher block countertop!)
In December 2023, another YouTube video sent me down another rabbit hole: Chris Monck from Highline Guitars described his process for designing a guitar fretboard, which began in FretFind2D, and then moved to Adobe Illustrator, where he painstakingly re-drew the fretboard produced by FretFind2D. Being a developer, I knew it was possible to make a better SVG than what was being produced by FretFind2D, so I rolled up my sleeves and got to work.
Being an open-source project, my initial thought was to fork FretFind2D and improve the SVG and PDF handling. However, as I dug into the code, which was written back in 2010, there were simply too many things to fix, from outdated jQuery to inaccessible form fields and the odd bug. I found myself rewriting entire sections of JavaScript, wanting to modernize the code style, wanting to completely redesign the UI, and getting ideas for new features that would be difficult to implement in the FretFind2D environment. It became too much. I decided it would be a better use of my time to write a new system from scratch using a modern reactive framework.
(Note: This is not a knock on FretFind2D, which is still an amazing piece of work!)
I prefer Vue over React and Angular, so I started working in Vue 3. This would enable me to create a much better user experience, and would also give me hands-on time with the latest web technologies, including Pinia for state management and Tailwind CSS for styling. I also befriended Chat GPT and Claude.ai, who helped me with my questionable geometry and trigonometry skills.
This project took me much longer than anticipated; I easily spent over 150 hours over the course of a few months working on it. I was learning as I went — and I learned a LOT — but I was also constantly coming up with new ideas and features, many of which required additional research or rewriting swaths of code. In total, the project is about 14,000 lines of code spread over 91 files.
I’m very pleased with the result. The SVG is rendered by Vue, and is updated in real-time whenever the user tweaks parameters. The SVG can be downloaded as an SVG or PDF, and settings can be downloaded as JSON for future use. Some of my favorite features are outlined on the About page.
I usually release my projects as open-source, but I’ve decided not to open-source this one. It’s free to use at https://fretboard.buzz, but I’m retaining the copyright and deciding next steps. As always, I have a few ideas!
If you try the site and have any feedback, please hit me up on my Weekend Luthier Instagram profile.