A song management tool to store, synchronize and present songs and setlists. Built on Vue.js, Firebase and Spectre.css

vuejs2, vuefire, firebase, firestore, music, song-management, vue, songs, setlists, spectre-css, presentation
npm install songdrive@1.1.6



release downloads last commit license contributions welcome

A song management web application to store, synchronize and present songs and setlists, based on Vue.js, Firebase and Spectre.css. Head over to the docs for more information.

SongDrive v1.x is currently in beta, if you are looking for SongDrive v0.x, you can download the final release v0.2.10 here.


This is how the SongDrive Dashboard currently looks like.


A demo page is planned.


  • Create, edit and delete songs
  • Normal and viewport optimized fullscreen view for a single song
  • Switch song languages
  • Filter songs and setlists on typing, by tags and by key
  • Transpose song key
  • Create, edit and delete setlists
  • Rearrange songs in setlists with simple drag and drop
  • Presentation mode for setlists with device synchronization
  • PDF export for songs, setlists and songsheets
  • Plain text, SNG and Slack formatted export for songs and setlists
  • Hotkey support
  • General statistics, setlist and user specific stats
  • UI supports multiple languages (currently: EN, DE)


  1. Get all files

    git clone
  2. Install all dependencies using Yarn

    cd SongDrive
  3. Create an empty file called config.js in SongDrive/src

    touch src/config.js
  4. Log in to your Firebase account, hit the "Add a project" button and set up a project name and a server location

  5. Now you can add an app by clicking the "Web" button, choose a nickname and click "Next"

  6. Copy the firebase configuration object from the code that is shown to your just created config.js in the following format:

    export const config = {
        apiKey: "<your-api-key>",
        authDomain: "<your-auth-domain>",
        databaseURL: "<your-database-url>",
        projectId: "<your-project-id>",
        storageBucket: "<your-storage-bucket>",
        messagingSenderId: "<your-messaging-sender-id>"
  7. Now your app is ready to be launched. Either start the development server with hot reload at localhost:8080 ...

    yarn serve
  8. ... or create an optimized production build with minification. All build files can be found in the dist directory.

    yarn build


The setup process is still in development. An additional step with the possibility to import test data will be added soon.


MIT License

SongDrive is completely free to use. If it's useful for you and you enjoy it, please consider contributing or donating via Paypal for further development. 💚