Loading

What makes a good ChordPro editor (and how Fretlist's works)

A ChordPro editor should color your chords, write the braces, show a live preview and keep your file intact. Here is how Fretlist's does it.

Dear John

· 5 min read

ChordPro is plain text, so in theory any text editor is a ChordPro editor. In practice, writing a song in Notepad means remembering how every directive is spelled, counting brackets, and saving the file to some app just to see whether the grid came out right. A good ChordPro editor takes that work off your hands and leaves you with the song.

This post is about what that takes, and how the editor in Fretlist handles each part. If you are new to the format itself, start with ChordPro explained.

What a ChordPro editor should do

Four things, in my experience:

  1. Show you the structure while you type. Chords, directives and lyrics should look different, so a missing bracket stands out.
  2. Write the syntax for you. You should not have to remember whether it is {start_of_grid} or {sog}.
  3. Show a preview. Not after saving: next to the text, as you type.
  4. Keep your file intact. What you import, and what you export, should be the text you wrote.

When I started building Fretlist, I had never heard of ChordPro. Now I can't imagine writing a song without it. I'm a bit of a nerd, and a format that reads like code is a joy to me.

The first users told me Fretlist handled ChordPro badly, so I dove in, deeply. In a plain text box, ChordPro was hard to read. So I set out to build the best ChordPro editor I could: shortcuts for every directive, ready-made grids, tabs and section labels, all following the official ChordPro spec. Dave, a Fretlist user, put it like this: "Your ChordPro support is the real differentiator for me, creating from scratch is much much easier."

That's what I was going for.

Below is the editor from Fretlist, the real one, with its preview beside it. Change a chord, or type / on an empty line. Nothing you type here is saved.

encore.cho
In Fretlist
Chords
C
Am7
F
G
Am
Dm
C7
G7
Verse 1
CLights go Am7down on the Flast song Gplayed
CNobody Am7moves and Fnobody Gstays
Chorus
CSing it Gout and the Amnight feels Fyoung
CHold the Gline till the Fmorning Ccomes
Slower, last time round
Outro
A
C
F
G
Am7
F
Dm
1.
Volta 1
C7
C
2.
Volta 2
G7
C

Colors as you type

In the Fretlist editor, everything is colored as you go. Chords take your chord color, directives and section headings are teal, and lyrics stay in the normal text color. Bracketed text that is not a chord, like [x4] or [*Break], shows in italic as a note.

The brackets don't decide the color. Whether the text names a chord does. So [N.C.] reads as a note and [C#m] as a chord.

The editor uses the same rules as the finished chord sheet, so a song looks the same while you write it as it does when you play it. You can see both side by side in the editor above.

Inserting directives without remembering them

Type / at the start of a line and a menu opens with every section and directive. Keep typing to narrow it down: /def finds Chord definition. Each row shows the text it will write before you pick it. The slash only counts at the start of a line, so a chord like G/B never opens the menu.

On a wide screen there is also a row of buttons above the text, with the sections your song already uses first. The full list covers a chord, a chord definition, a comment, a note, a chord grid, repeat bars, a tab block and a repeat of the chorus.

A few inserts do more than paste text:

  • Chord definition arrives filled in. Fretlist picks a chord your song plays that has no shape yet and fills in the usual fingering. Tab then walks the fields: the name, the base fret, then each fret.
  • Chord grid arrives as four empty bars with the label selected. Tab moves through every cell in reading order, so filling a grid is Tab, type, Tab, type.
  • Tab block arrives as six empty strings. On a tab line the arrow keys move one cell at a time and typing replaces the dash, so the strings stay lined up.
  • Repeat chorus writes {chorus}, and the sheet prints the last chorus again in full.

There is more on all of this in the song editor docs.

Have a song you keep meaning to write down? Open a new song in Fretlist, choose the ChordPro tab and type / on an empty line. Try it on your own songs.

A live preview, next to the text

On a computer, the preview sits next to the editor. It draws the sheet as you type, including grids as real bar-and-chord charts with repeats and first and second endings. You can drag it wider or hide it. On a phone or tablet the preview opens from the bottom of the screen instead.

Metadata works both ways. Type {key: G} or {capo: 2} into the text and the song's details fill in. Change the key in the details later, and the {key} directive in the text changes with it.

Two formats, one song

Not everyone thinks in brackets. The editor has two tabs, ChordPro and Chords over Lyrics, and switching converts the song. The lines you did not touch come back exactly as you wrote them, so you can switch, fix one line in the other view, and switch back without your file being rewritten. The Chords over Lyrics docs cover that format.

Your file stays your file

This is the part you only notice when it goes wrong. A ChordPro file you import is stored exactly as it was written, directives and comments included. Export it as a ChordPro file (.cho) and you get your text back, with the directives Fretlist doesn't draw still in place.

Fretlist imports .cho, .chopro, .chordpro, .crd and .pro files.

What it doesn't do yet

Some of ChordPro, Fretlist reads but does not draw:

  • Embedded ABC and LilyPond notation is kept in the file, but not drawn as a staff.
  • {image} is kept but not shown.
  • Fonts, sizes and colors set with directives like {textfont} are ignored. Fretlist uses its own typography.
  • {columns} collapses to one column that fits your screen.

None of these are lost on export. I went through every tier of the format, and where Fretlist stands on each, in What "ChordPro support" really means.

Write your next song in ChordPro, with a live preview as you type. Start with Fretlist.

Share

Dear John

Written by

Dear John

Singer-songwriter and frontend developer from the Netherlands. Builds Fretlist alone.

Read the full story