An intuitive, browser-based companion web application designed to visually document, map, and save patterns and chord sets from the Teenage Engineering Pocket Operator PO-20 Arcade.
Since the PO-20 hardware lacks a native project-saving or export feature, this companion app acts as your external, paperless notebook. It allows you to back up your hardware creations, map out complex chord progressions, and keep your arcade tracks safe for future live performances or recording sessions.
Interactive 16-step sequencer matrix showing Bass Drum program with retro pixel LCD display.
- 🎛️ Morphing 4x4 Grid Matrix: Visually log step-sequencer data and melody patterns exactly as they look on your pocket operator hardware.
- 📟 Simulated Pixel LCD Screen: Implements a retro, digital-style screen that mimics the PO-20 layout, showing the active steps, sound types, and automation states.
- 🎚️ Step Parameter Automation: Program parameter values (Value-A for Pitch/Notes and Value-B for Filter/Values) on a step-by-step basis to document knob tweaks.
- 🎹 Chord Progression Builder & Synthesizer: Arrange custom chord chains using the PO-20's 16 signature chord variants. Features a built-in Web Audio synth for live previewing.
- 🌓 Dual Retro Themes: Switch between a glowing, cyber-dark Arcade theme and a cozy, paper-like Light theme.
- 💾 Local Persistence: Automatically saves your patterns and progressions in the browser session, so your work is always there when you reload.
- Node.js (v18+ recommended)
- A modern web browser
-
Clone the repository:
git clone https://github.com/warmsynths/po20.git
-
Navigate into the project directory:
cd po20 -
Install dependencies:
npm install
-
Start the local development server:
npm run dev
-
Open the application: Navigate to the local URL shown in your terminal (usually
http://localhost:3005).
To compile the static production bundle into the docs directory:
npm run build- Lit: Simple, fast, and web-standard native web components.
- Vite: Ultra-fast next-generation frontend tooling.
- Web Audio API: Built-in synth for chord playback preview.
- TypeScript & CSS Custom Properties: Clean code and responsive variables.
Contributions, bug reports, and feature requests are welcome! Feel free to open a pull request or an issue if you want to add new layout styles, backup options, or workflow optimizations.
This project is open-source and available under the GNU GPLv3 License.
Disclaimer: This project is an independent utility and is not affiliated with, authorized, or endorsed by Teenage Engineering.