• JavaScript 73.5%
  • HTML 12.9%
  • CSS 7.5%
  • TypeScript 5.4%
  • Python 0.2%
  • Other 0.5%
Find a file
2026-03-23 16:30:51 +02:00
.devcontainer Merge https://github.com/monochrome-music/monochrome into taglib-wasm 2026-03-10 18:48:18 +00:00
.github fix: bun format 2026-03-21 16:56:05 -05:00
android capacitor app 2026-03-22 20:59:00 +02:00
assets app icons 2026-03-22 21:37:54 +02:00
extensions/js.neutralino.discordrpc fix codeql suggestions 2026-02-18 03:30:20 +00:00
functions fix: bun format 2026-03-21 16:56:05 -05:00
images feat: add Atmos support, use new API endpoint, streamline API caching 2026-03-22 20:08:30 +00:00
ios style: auto-fix linting issues 2026-03-22 19:13:04 +00:00
js d-d-d-d-drop that bitch 2026-03-23 16:30:51 +02:00
public style: auto-fix linting issues 2026-03-22 19:13:04 +00:00
scripts fix all linting (js/html/css) 2026-02-13 18:01:46 +01:00
.dockerignore first modular docker files system 2026-02-06 21:35:59 +01:00
.gitignore no need for .vscode 2026-03-12 09:40:21 +03:00
.gitmodules feat(metadata): replace taglib-wasm with @dantheman827/taglib-ts 2026-03-19 15:14:52 -05:00
.htmlhintrc Add linting infrastructure (ESLint, Stylelint, HTMLHint, Prettier) and GitHub Action with auto-fix 2026-01-11 00:25:05 +01:00
.prettierrc Add linting infrastructure (ESLint, Stylelint, HTMLHint, Prettier) and GitHub Action with auto-fix 2026-01-11 00:25:05 +01:00
.stylelintrc.json build: fix CI linting errors and update lockfile 2026-02-10 11:19:20 +01:00
bun.lock Fix lockfile 2026-03-22 20:11:48 +00:00
capacitor.config.ts app icons 2026-03-22 21:37:54 +02:00
CONTRIBUTING.md this section doesnt exist anymore 2026-03-12 09:44:46 +03:00
docker-compose.yml Enhance Docker and environment variable handling for authentication features 2026-03-15 22:32:02 +00:00
DOCKER.md style: auto-fix linting issues 2026-03-11 23:04:04 +00:00
Dockerfile Enhance Docker and environment variable handling for authentication features 2026-03-15 22:32:02 +00:00
Dockerfile.dev let's try with npm instead of bun... 2026-02-06 21:35:59 +01:00
eslint.config.js style: auto-fix linting issues 2026-02-13 19:50:40 +00:00
index.html feat: implement side panel resizer and responsive styles 2026-03-22 20:38:08 +00:00
INSTANCES.md fix: bun format 2026-03-21 16:56:05 -05:00
legacy.html i got bored idk 2026-03-10 08:53:09 +03:00
license why did we have a dash here idk why i added that 2026-03-12 08:04:16 +03:00
neutralino.config.dev.json style: auto-fix linting issues 2026-02-20 14:01:48 +00:00
neutralino.config.json style: auto-fix linting issues 2026-02-20 14:01:48 +00:00
nginx.conf nginx: add more extensions to the static asset pattern 2026-03-14 15:17:25 -03:00
package-lock.json app icons 2026-03-22 21:37:54 +02:00
package.json Merge branch 'main' of https://github.com/monochrome-music/monochrome 2026-03-22 20:11:37 +00:00
README.md fix: bun format 2026-03-21 16:56:05 -05:00
stream-stub.js refactor(hls/dash): externalize hls.js and dashjs to reduce initial bundle size 2026-03-19 15:34:51 -05:00
styles.css style: auto-fix linting issues 2026-03-22 20:38:39 +00:00
test-search.js feat: add Atmos support, use new API endpoint, streamline API caching 2026-03-22 20:08:30 +00:00
THEME_GUIDE.md style: auto-fix linting issues 2026-02-23 22:58:08 +00:00
tsconfig.json Merge remote-tracking branch 'upstream' into taglib-wasm 2026-03-09 02:43:12 +00:00
vite-plugin-auth-gate.js Enhance Docker and environment variable handling for authentication features 2026-03-15 22:32:02 +00:00
vite-plugin-blob.ts fix: bun format 2026-03-21 16:56:05 -05:00
vite-plugin-svg-use.ts refactor: externalize svg images and add new vite plugin 2026-03-19 15:28:33 -05:00
vite-plugin-upload.js style: auto-fix linting issues 2026-03-08 19:04:57 +00:00
vite.config.ts refactor(hls/dash): externalize hls.js and dashjs to reduce initial bundle size 2026-03-19 15:34:51 -05:00

Monochrome Logo

Monochrome

An open-source, privacy-respecting, ad-free music app.

Website - Donate - Features - Usage - Self-Hosting - Contributing

GitHub stars GitHub forks GitHub issues


What is Monochrome?

Monochrome is an open-source, privacy-respecting, ad-free TIDAL web UI, built on top of Hi-Fi. It provides a beautiful, minimalist interface for streaming high-quality music without the clutter of traditional streaming platforms.

Image of 'NASIR' By Nas On Monochrome

Image of 'Jump Out' By Osamason On Monochrome


Features

Audio Quality

  • High-quality High-Res/lossless audio streaming
  • Support for local music files
  • API caching for improved performance

Interface

  • Dark, minimalist interface optimized for focus
  • Animated Album Covers For Supported Albums
  • High-quality Music Videos
  • Customizable themes & Community Theme Store
  • Accurate and unique audio visualizer
  • Offline-capable Progressive Web App (PWA)
  • Media Session API integration for system controls

Library & Organization

  • Recently Played tracking for easy history access
  • Comprehensive Personal Library for favorites
  • Queue management with shuffle and repeat modes
  • Playlist import from other platforms
  • Public playlists for social sharing
  • Smart recommendations for new songs, albums & artists
  • Infinite Recommendation Radio
  • Explore Page (Hot & New) for discovering newly added music and whats trending overall or within each genre

Lyrics & Metadata

  • Lyrics support with karaoke mode
  • Genius integration for lyrics
  • Track downloads with automatic metadata embedding

Integrations

  • Account system for cross-device syncing
  • Customizable & Public Profiles
  • Last.fm and ListenBrainz integration for scrobbling
  • Unreleased music from ArtistGrid
  • Dynamic Discord Embeds
  • Artist Biography + Social Links for learning more about your favorite artists
  • Multiple API instance support with failover

Power User Features

  • Keyboard shortcuts & Command Palette (CTRL+K) for power users

Quick Start

Live Instance

Our Recommended way to use monochrome is through our official instance:

monochrome.tf / monochrome.samidy.com

For alternative instances, check INSTANCES.md.


Self-Hosting

NOTE: Accounts will not work on self-hosted instances. Our Appwrite authentication system only allows authorized domains.

We had to heavily customize the authentication system and write several custom scripts to support features like SMTP and Google OAuth (which are currently bugged in Appwrite). Because of this, we can no longer provide a self-hostable accounts system.

git clone https://github.com/monochrome-music/monochrome.git
cd monochrome
docker compose up -d

Visit http://localhost:3000

Tailscale Access

Visit http://<tailscale_server_hostname_or_ip>:3000

By default, the app uses Vite preview, which restricts access to localhost.
To allow access over Tailscale:

  1. Open vite.config.js

  2. Uncomment and configure the preview section:

preview: {
    host: true,
    allowedHosts: ['<your_tailscale_hostname>'], // e.g. pi5.tailf5f622.ts.net
},
  1. Restart with a fresh container (if already running):
docker compose down
docker compose up -d

For development mode and advanced setups, see DOCKER.md.

Option 2: Manual Installation

Prerequisites

  • Bun (Preferred) or Node.js (Version 20+ or 22+ recommended)

Local Development

  1. Clone the repository:

    git clone https://github.com/monochrome-music/monochrome.git
    cd monochrome
    
  2. Install dependencies:

    bun install
    # or
    npm install # NPM is included with Node.js
    
  3. Start the development server:

    bun run dev
    # or
    npm run dev
    
  4. Open your browser: Navigate to http://localhost:5173/

Building for Production

bun run build
# or
npm run build

Usage

Basic Usage

  1. Visit the Website or your local development server
  2. Search for your favorite artists, albums, or tracks
  3. Click play to start streaming
  4. Use the media controls to manage playback, queue, and volume

Keyboard Shortcuts

Shortcut Action
Space Play / Pause
Seek forward 10s
Seek backward 10s
Shift + Next track
Shift + Previous track
Volume up
Volume down
M Mute / Unmute
S Toggle shuffle
R Toggle repeat
Q Open queue
L Toggle lyrics
/ Focus search
Esc Close modals
[ Previous visualizer preset
] Next visualizer preset
\ Toggle visualizer auto-cycle
Ctrl + K Command Palette

Account Features

To sync your library, history, and playlists across devices:

  1. Click the "Accounts" Section
  2. Sign in with Google or Email
  3. Your data will automatically sync across all devices

Contributing

We welcome contributions from the community! Please see our Contributing Guide for:

  • Setting up your development environment
  • Code style and linting
  • Project structure
  • Before You Contribute
  • Commit message conventions
  • Deployment information

As seen on FMHY

Developed by Humans

Made with ❤️ by the Monochrome team

Star History

Star History Chart