Songshed is a grid-based guitar tab editor written in Vue. Unlike other tab editors, it allows you to specify exactly where a note is positioned in time without having to use traditional staff notation. The app is still a work in progress, but it stands as a proof-of-concept for a new user interface for music composition.
The UI is completely responsive—as you change the screen size, the tab horizontally fills the screen. If the screen gets too small, it automatically breaks off bars into new lines.
Bends, ties, and slides are SVGs that connect one note or column to another, and I wrote a manual rendering system with Vue directives that allow the SVGs to coordinate with the responsive CSS of the tab. And if an SVG connects two notes that are then broken into two lines, it will split, showing part of it on the first line and part on the other.
The editor also has a selection system, allowing you to copy, paste, and delete groups of notes and to move them by dragging. It has an annotation system that lets you drag to create a text annotation that spans between positions. It lets you move bars, change time signatures, and it has a chord diagram system and chord picker.