Chord Grid Builder — Reference

as of 3/22/26 9:30am

Toolbar

Dot / Barre	Toggle between placing dots and selecting dots for a barre
⟲ Undo	Undo last action (up to 60 steps). Desktop also: `Ctrl/⌘ Z`
↪ Redo	Redo last undone action. Desktop also: `Ctrl/⌘ Y` or `Ctrl/⌘ Shift Z`
Share	Copies a URL to clipboard encoding the full state. Paste in browser to restore
Page Title	Tap/click the large title area below toolbar to rename the page

Adding & Removing Chords

Add chord	Tap the ＋ Add Chord card at the end of the row
Remove chord	Tap × button top-right of any card
Chord name	Tap name area at top of card. Formatting bar appears: superscript, bold, ♭ ♯ △ ° ø
Change fret count	Tap the small ▸ next to × to set how many frets are shown on that card

Placing Dots

Place dot	Dot mode active → tap any empty grid intersection
Remove dot	Tap an existing dot
Dot color	Long-press a dot → bottom sheet → pick color (Black, Red, Blue, Green, White, Orange). Desktop: right-click
Label inside dot	Long-press dot → bottom sheet → type label (e.g. 1, T, ♭3) → ✓
Open string ○	Tap above the nut on a string. Cycles: empty → ○ → × → empty
Mute string ×	Tap above nut twice (or tap ○ once to convert)
Clear open/mute	Tap a third time to clear

Barre Chords

Enter barre mode	Tap Barre in toolbar. Bar at bottom shows "Tap a dot to start a barre"
Create barre	Tap the start point, then tap the end point — barre draws instantly. No confirm needed
Cancel first point	Tap Cancel in the floating bar, or tap the selected dot again to deselect
Exit barre mode	Tap Dot in toolbar
Barre color	Long-press the barre line → bottom sheet → pick color. Desktop: right-click
Remove barre	Long-press barre line → bottom sheet → Remove barre
Dot on a barre	Dots on a barre show a dotted white inner ring to distinguish them

Shifting & Fret Labels

Shift dots up/down	▲ ▼ buttons on right side of each card. Moves all dots and barres by one fret. Non-destructive — shift back to restore
Fret row label	Tap any slot in the fret number column (left of grid) to set a label for that row (e.g. "5" for 5th position). Leave blank to clear

String Labels

Label a string

Tap the text area below each string at the bottom of a card. Supports 2 lines (e.g. note name + interval). Placeholder: "…"

Share / Persistence

Save state	Tap Share — full layout encoded into the URL hash. Bookmark or copy URL to restore later
Load state	Open URL with a #cgb= hash — state loads automatically on page open
No server	Everything is local. Nothing stored externally. Closing tab without sharing loses changes

Desktop-Only

`Ctrl/⌘ Z`	Undo (when focus is not in a text field)
`Ctrl/⌘ Y` or `Shift Z`	Redo
`Esc`	Cancel first barre point / close menus
Right-click dot	Opens dot color/label/delete menu
Right-click barre	Opens barre color/delete menu

Long-press = hold touch ~0.5s until blue ring completes. On desktop, right-click is equivalent.