Plugin icon

ChordPro Renderer

by Joel Ong
integrations
Install Plugin

Description

Renders ChordPro song markup with chord diagrams, transposition, capo support, multi-column layout, and dark theme

Additional Information

Links:
Maintainers: majestic9121
Version:1.0.1
Minimum app version:3.5
Downloads: This version:8
Last updated:2026-04-26T09:39:43Z

ChordPro Renderer for Joplin

A Joplin plugin that renders ChordPro song markup directly in your notes with chord diagrams, lyrics formatting, and automatic transposition capabilities.

Features

  • ChordPro Rendering: Automatically renders ChordPro markup in code blocks tagged with chordpro
  • Chord Diagrams: Displays chord names above lyrics with proper formatting
  • Transposition Support: Detects and applies transpose directives ({transpose: +2}) and capo settings, including negative transpose values
  • Multi-Column Layout: Supports {columns: 2} / {col: 2} directives for multi-column song layout
  • Dark Theme Support: Automatically adapts to Joplin's dark/light themes
  • Mobile Support: Works on the mobile version of Joplin
  • Song Metadata: Extracts and displays title, artist, capo information, and credits

Usage

Basic Syntax

Create a code block in your Joplin note with the language set to chordpro:

```chordpro
{title: Song Title}
{artist: Artist Name}

[Verse 1]
C             G
These are the chords above lyrics
F              C
With proper alignment and spacing
```

Transposition

The plugin automatically detects and applies transposition directives:

{transpose: +2}
{title: My Song}

[C]Original chord will be rendered as [D]

Negative transposition and capo inversion are also supported:

{transpose: -3}
{capo: 2}
{title: Another Song}

[C]Chord will be transposed by -5 semitones (capo inverted)

Multi-Column Layout

Render a song in multiple columns using the {columns} or {col} directive:

{columns: 2}
{title: My Song}

[Verse 1]
Am   C         G
Line one of the song
F              C
Line two of the song

Title, credits, and metadata span all columns automatically.

Full Example

```chordpro
{title: House of the Rising Sun}
{artist: The Animals}
{capo: 1}

[Intro]
Am   C         D      F
There is a house in New Orleans
Am   C         E      E7
They call the Rising Sun
Am   C         D      F  
And it's been the ruin of many a poor boy
Am         E7        Am
And God, I know I'm one
```

Development

Prerequisites

  • Node.js and npm
  • Joplin desktop app (for testing)

Building the Plugin

# Install dependencies
npm install

# Build the plugin
npm run dist

The built plugin will be available in the publish/ directory.

Project Structure

src/
├── index.ts                    # Plugin entry point
├── chordproRenderer.ts         # Markdown-it plugin for ChordPro
├── chordproRenderer.css        # CSS styles (injected as content script)
└── chordpro/
    ├── songProcessor.ts        # ChordPro parsing and processing
    ├── styles.ts              # CSS styles for rendering
    ├── htmlInjector.ts        # HTML metadata injection
    ├── metadataBuilder.ts     # Extracts song metadata
    └── utils.ts               # Utility functions

Updating the Version

npm run updateVersion

License

MIT License - see LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support