Songdown Compiler

0.7.0 verified Fri May 01 auth: no javascript abandoned

A React component that compiles Songdown syntax (a markup language for chord sheets) into HTML for rendering. Version 0.7.0 is the latest stable release, with no further updates since 2015. It is part of the Songdown project, designed for musicians to write songs with chords, lyrics, guitar tabs, and comments. Key differentiators include transposing, font size control, and options to hide chords/comments/GOTOs. Requires React 0.13.x and lodash 3.x.x as peer dependencies. The project is unmaintained and uses outdated libraries, including React 0.13 (pre-hooks), lodash 3, and CoffeeScript heritage.

Common errors

error TypeError: React.createClass is not a function ↓

cause This package uses React 0.13's createClass, which was removed in React 16.

fix

Install React 0.13.x: npm install react@0.13 --save

error Cannot find module 'lodash' ↓

cause lodash 3.x is a peer dependency and not installed automatically.

fix

Install lodash 3.x: npm install lodash@3 --save

error Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. ↓

cause Using this package with React >0.13 may cause incompatibility errors.

fix

Downgrade to React 0.13 or use an alternative library.

error Warning: React.render is deprecated and will be removed in React 17 ↓

cause This package calls React.render, which was deprecated in React 0.14.

fix

Do not use this package with React 0.14+; if needed, use ReactDOM.render but may still break.

Warnings

deprecated The package requires React 0.13.x, which is heavily outdated and incompatible with modern React versions (16+). ↓

fix Migrate to a modern chord sheet rendering library like chord-sheet-renderer or react-chord-sheet.

gotcha The default export is a function that must be called with React as an argument; direct import does not work. ↓

fix Use var Song = require('songdown-compiler')(React);

gotcha The package uses lodash 3.x.x as a peer dependency, which is incompatible with lodash 4.x.x. ↓

fix Ensure lodash version 3.x is installed in your project.

breaking Verse ending token changed in version 0.7.0, which may break existing Songdown documents. ↓

fix Update your Songdown files to use the new verse ending syntax as specified in the changelog.

deprecated React.render() is used in the package, which was removed in React 0.14+. The package is incompatible with React 0.14+. ↓

fix Stick to React 0.13 or migrate to a different library.

gotcha The package relies on CoffeeScript compiled to JavaScript, making debugging harder. ↓

fix Use source maps or avoid this package for new projects.

Install

npm install songdown-compiler

yarn add songdown-compiler

pnpm add songdown-compiler

Imports

Song
```
var Song = require('songdown-compiler')(React);
```
Package is a function that takes React as an argument and returns a Song component. This pattern is required due to React 0.13 peer dependency.

Song

wrong

import Song from 'songdown-compiler';

correct

import React from 'react';
import createSong from 'songdown-compiler';
const Song = createSong(React);

ESM import does not export the component directly; you must call the default export with React as an argument.

Song

wrong

var Song = require('songdown-compiler');

correct

var React = require('react');
var Song = require('songdown-compiler')(React);

CommonJS require without calling the function will not return the component.

Quickstart

Shows how to require the library, create a Song component with props, and render it using React 0.13-style API.

var React = require('react');
var Song = require('songdown-compiler')(React);
var song = React.createElement(Song, {
  chords: 'Am C G',
  lyrics: 'Verse 1\nAmazing grace how sweet the sound',
  transposition: 0,
  fontSize: 14,
  hideChords: false,
  hideComments: false,
  hideGotos: false
});
React.render(song, document.getElementById('root'));