vscode-midi-viewer

VS Code custom editor extension that opens .mid / .midi files as a piano-roll viewer with WebGL rendering and built-in piano playback.

Features

Custom readonly editor for MIDI files (*.mid, *.midi)
Piano roll rendered with pixi.js in WebGL canvas
DOM-based control strip with VS Code-like compact styling
Theme token integration from VS Code (--vscode-*) for both DOM and canvas colors
Track visibility toggles
Playback controls: play / pause / stop / seek
Follow-playhead toggle command

MIDI Viewer: Open Piano Roll (vscode-midi-viewer.openPianoRoll)
MIDI Viewer: Toggle Follow Playhead (vscode-midi-viewer.toggleFollowPlayhead)

vscodeMidiViewer.audio.volume (0.0 ~ 1.0, default: 0.8)
vscodeMidiViewer.audio.latencyHint (interactive | playback | balanced, default: interactive)
vscodeMidiViewer.view.pixelsPerSecond (default: 120)
vscodeMidiViewer.view.noteColorMode (track | velocity, default: track)
vscodeMidiViewer.view.useVscodeTheme (default: true)
vscodeMidiViewer.view.uiDensity (compact | comfortable, default: compact)
vscodeMidiViewer.view.noteContrastBoost (0.0 ~ 0.5, default: 0.15)

MIDI parsing: @tonejs/midi (Format 0/1 files are supported)
Playback clock source: AudioContext.currentTime
Playback uses a bundled synthesized piano sample bank generated in WebAudio at runtime (offline-safe)
Theme changes are reflected by recalculating CSS-token-based palette and rerendering

yarn install
yarn run compile

Watch mode:

yarn run watch