shadcn.io is not affiliated with official shadcn/ui
Songwriting Pad Music Block for Radix UI
A songwriting notebook with a verse, a chorus and a bridge of up to six lines each, a rhyme letter and syllable estimate beside every line, a rhyme helper and chord ideas whose chips insert at the cursor, a notes box, Copy lyrics and a real .txt download.
Installation
Overview
Give songwriters a notebook that counts for them, with this songwriting pad for React with Radix UI. It holds one song of Bridgebook, a songwriting notebook, in a hairline frame with a plus mark on each corner: three sections, each a text box of up to six lines with a gutter that gives every line its rhyme letter (ABAB) and an "about" syllable count, and a side cell with a rhyme helper (type an end word and its rhymes appear as chips), chord ideas (pick a key and press one of its seven diatonic chords) and a notes box. Every chip inserts at the cursor of the box you used last. The foot holds Copy lyrics and Download .txt. The counts come from a small heuristic and the rhymes from a small typed list, and the page says so. It's built from Textarea, Input, Select, Button, Copy Button and Guides, with a CSS entrance only. For songwriting, lyric and poetry tools.
FAQ
How accurate are the syllable counts?
They are estimates, which is why each says "about": the helper counts runs of vowels and takes off a silent ending, which is right for most English words and wrong for some (quiet, poem). Swap syllablesOf for a pronunciation dictionary if you need exact counts.
How are the rhyme letters worked out?
Each line's last word is looked up in RHYME_LINES, a short typed list where every line is one family of words that rhyme. Lines whose last words are in the same family share a letter, letters are given in order of first use, and a word that is not in the list gets a letter of its own. The same lists feed the rhyme helper's chips, so add families there to teach it more.
Where does a chip put its word?
At the cursor of the text box you used last, replacing any selected text, and the box takes focus with the cursor behind the new words. The helper says which box it will insert into. Chord chips insert the chord in square brackets, such as [Em].
Why six lines at most?
So the gutter stays level with the lines and the panel never changes height while you type: a section holds six lines, and the status line tells you when a seventh is dropped. Change MOST_LINES and the height of the box together to allow more.
What stays local, and how do I save the words for real?
Everything: the words, the notes and the chips live in the page, nothing is sent and nothing is stored when you leave. Copy lyrics copies the three sections to the clipboard and Download .txt saves a file made in the browser, with the notes added. To keep the song, send the three texts to your own server from a save handler.