🎵 GridBeat

The Ultimate Interactive Chord & Scale Visualizer for Modern Musicians, Producers, and Songwriters

🚀 Try GridBeat Live at gridbeat.wiki →

Visualize chords and scales across Piano, Guitar, Ukulele, and Grid Controllers simultaneously in real time.

---

✨ Why GridBeat?

Learning music theory shouldn't feel like decoding hieroglyphics. Whether you're producing beats on a Novation Launchpad, laying down chords on a piano, or translating shapes to a guitar or ukulele fretboard, GridBeat bridges the gap.

GridBeat makes music theory intuitive, visual, and immediately playable. It turns abstract chord formulas and scale modes into clear, interactive finger patterns across all your favorite instruments at once.

---

🌟 Key Features

🎹 Multi-Instrument Real-Time Synchronization

See your chord voicings and scale patterns simultaneously mapped across:

• Isomorphic Grid Controllers (Launchpad, LinnStrument, Ableton Push layouts with customizable finger overlaps)
• Piano Keyboard (1 to 4 configurable octaves)
• Guitar Fretboard (3, 5, 7, 9, or 12 fret views)
• Ukulele Fretboard (Soprano/Concert/Tenor standard tuning)

🔍 Interactive Chord & Scale Explorer

• Chord Bank: Explore triads, 7ths, extensions, and voicings with instant root note switching.
• Scale Explorer: Dive into Major, Minor, Dorian, Phrygian, Lydian, Mixolydian, Locrian, Pentatonic, Blues, and more.
• Scale Degree Harmonic Qualities: Automatically discover which diatonic chords naturally fit inside any scale.

🔊 Integrated Real-Time Audio Synthesis

• Hear every chord and scale with low-latency Web Audio powered by Tone.js.
• Toggle between Synth and Piano sound engines to audition progressions instantly.

⭐ Favorites & Voicing Library

• Bookmark and save your go-to chord progressions and voicings.
• Quick-access personal library for songwriting, practice sessions, and live performance reference.

⚙️ Customizable Layouts & Instrument Visibility

• Toggle individual instruments on or off to focus on your specific setup.
• Customize grid width and fret depth to match your hardware controller or acoustic instrument.

---

🎯 Who is GridBeat For?

• Electronic Music Producers & Beatmakers: Demystify isomorphic grid layouts and produce better harmonies on your pad controllers.
• Multi-Instrumentalists: Effortlessly translate chord shapes and fingerings between piano, guitar, and ukulele.
• Songwriters & Composers: Find fresh chord progressions and harmonic ideas with instant audio feedback.
• Music Students & Teachers: Visual, hands-on tool for explaining scales, degrees, intervals, and chord construction.

---

🌐 Hosted Version

Experience GridBeat in your browser—no installation required:

👉 https://www.gridbeat.wiki

(Optimized for desktop and tablet displays)

---

🛠️ Developer Quickstart

Want to run GridBeat locally or contribute to development?

Prerequisites

• Node.js (v18.18+ or v20+)
• npm, yarn, pnpm, or bun

1. Clone the repository

git clone https://github.com/leouofa/gridbeat.git
cd gridbeat

2. Install dependencies

npm install
# or
yarn install
# or
pnpm install
# or
bun install

3. Run the development server

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 in your browser to view the app.

---

🧰 Tech Stack

• Framework: Next.js 15 (App Router)
• UI Library: React 19
• Styling: Tailwind CSS
• Audio Engine: Tone.js
• Icons: Heroicons
• Language: TypeScript
• Deployment: Vercel

---

🤝 Contributing

Contributions are warmly welcomed!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

Distributed under the MIT License. See LICENSE.txt for more information.

---

Created with ❤️ by Leonid Medovyy

Start Visualizing at gridbeat.wiki →