chordbook / editor

The ChordPro editor used by ChordBook.app

ChordBook Editor

A web-based editor for editing chord sheets in the ChordPro format, built on CodeMirror.

🎸 View Demo 🪕

Features

• ✅ ChordPro Syntax Highlighting
• ✅ Chord autocomplete - type "[" and you will see autocomplete of previously used chords
• ✅ Snippets - type "title", "start_of…", "tab" or any other ChordPro directive
• ✅ Error checking - Shows syntax errors in the editor

Installation

npm install @chordbook/editor

Usage

Put an element on the page that will be the container for the editor.

<div id="editor"></div>

Then, import the editor and create an instance of it.

import { createEditor } from '@chordbook/editor'

createEditor({
  parent: document.querySelector('#editor'),
  doc: "Initial content"
})

Contributing

Contributions are welcome!

1. Clone this repository: git clone https://github.com/chordbook/editor.git
2. Install dependencies: npm install
3. Start the development server: npm run dev
4. Open http://localhost:5173/ in your browser

Acknowledgements

This editor is built on some previous work by @isaiahdahl and @marijnh.

License

This project is licensed under the GPLv3.0 license.