4 min read

Building the ChordPro Editor

The ChordPro Editor is a custom page on this site that lets you paste in whatever messy chord sheet you've found
Building the ChordPro Editor
Photo by Vitaly Gariev / Unsplash

One of the things that always slowed me down when making a song-sheet is getting the song into a rough ChordPro format. The process was tedious — find some chords on a tab site buried under ads, try to copy the text, paste it into a file, and then spend way too long manually moving chord symbols around with cut and paste. I often found myself just finding the lyrics alone. I would drop them into NotePad or Word, sit with my uke and place the chords myself– lowercase, uppercase, lowercase and on and on– until I was happy.

There are sites out there that have excellent song-sheet tools. Logue Music Services is by far the most useful set of tools out there but I don't see an easy way to move chords around. So I built one and integrated Claude the AI. The ChordPro Editor is a page on this site that lets you paste in whatever messy chord sheet you've found — chords above lyrics, inline ChordPro, a mix of both, ads and all — and have Claude clean it up into a proper ChordPro file automatically. From there you get a visual editor where the chords sit above the lyrics just like a real chart, and you can drag them left and right until they land on the right syllable. Chords snap to word boundaries, you can add new ones by clicking anywhere on the chord line, and delete them with a tap. When it feels right — and by "feels right" I mean you've sat there with a guitar and played through it — you hit Copy and the finished ChordPro is in your clipboard ready to paste into a post.

The thing I'm most pleased about is how honest it is about what AI can and can't do. Claude is great at stripping the garbage, recognizing song structure, and getting chords into roughly the right place. But chord placement is a feel thing. No AI hears the music, and no algorithm knows that the G belongs after the last word of the line rather than crammed up against it. That's where the drag and drop editor earns its place — you do the musical work, the tool handles the tedious formatting. There is nothing stopping you from just putting in lyrics and loading them into the editor. Get your cords in place, copy and paste right back in for a final sweep.

Under the hood it's a Ghost custom page template with vanilla JavaScript, a small Node.js proxy on the server to keep the API key safe, and a clean CSS layer that hooks into the existing dark mode and music theme variables. No frameworks, no dependencies in the browser, nothing that will break in six months. The ChordPro view mode lets you see the raw inline format before you copy it, so what you see is exactly what you get.

There's more to come — saving directly to a Ghost draft from the editor is the obvious next step, and there's an argument for a smarter paste panel that can fetch a URL directly rather than making you copy and paste from a tab site. But as a first version, it already does the thing it was built to do. I sat down with a guitar, fixed up A Rainy Night in Soho line by line, hit copy, and pasted it straight into a post. Painless and kind of fun.

I left A Rainy Night in Soho song-sheet loaded by default into the ChordPro editor. It is one of those songs that struck me as something I should be singing after Shane McGowan passed away. I was working with an AI– I think it was Gemini– it was fixing up all my ChordPro files. I would paste in what I had, it would return valid ChoPro. So I asked the AI... Can you just go out in the WWW, find A Rainy Night in Soho and spit out the ChoPro? A few seconds later, out comes some perfectly formatted ChoPro text. I am thrilled, I copy and paste it into Music Edition and now I have another song to sing. A few days go by, I pick up my guitar, pull up the song and start to play. The only thing that was right was the technical structure of the file, the chords were not even close. So, I kept all those mistakes in place so that you can test the editor.

I was so pleased with the AI getting me Soho that I asked it to fetch a couple of other songs I'd been playing over the winter. Due to the passing of Todd Snider, I asked for "Play a Train Song." A few seconds went by and there it was — perfectly formatted ChordPro. I was thrilled. I made another post in Music Edition, copied, pasted, and went to bed.

Curious to see how things looked on mobile, I pulled up the Todd song and started reading. The first line or two seemed correct and the chords looked close, but the lyrics started to get strange — small variations from what I knew. I figured maybe Todd had recorded a few live versions where he just made things up as he went, which he was known to do. I kept reading and it just got worse. The storyline was roughly there, but the words were completely fabricated. I confronted the AI the following day and got a typical "You're right, I did just make all that up and here's why".

Anyhow, if you've made it this far into my story you can see what an adventure this has been. I have now used this editor– guitar in hand– and tidied up a few songs now. It is very useful and by far the easiest song-sheet editor I have ever used. Claude tells me there is nothing else like it online, but as we have already established, you can't trust everything an AI says.