diff --git a/localtypings/pxtmusic.d.ts b/localtypings/pxtmusic.d.ts
index 7961550e4f26..6cf3ea0bd36b 100644
--- a/localtypings/pxtmusic.d.ts
+++ b/localtypings/pxtmusic.d.ts
@@ -60,6 +60,7 @@ declare namespace pxt.assets.music {
     }
 
     export interface DrumInstrument {
+        name?: string;
         startFrequency: number;
         startVolume: number;
         steps: DrumSoundStep[];
diff --git a/pxtblocks/fields/fieldEditorRegistry.ts b/pxtblocks/fields/fieldEditorRegistry.ts
index ce463a52bfe2..5a2b76fbf4cd 100644
--- a/pxtblocks/fields/fieldEditorRegistry.ts
+++ b/pxtblocks/fields/fieldEditorRegistry.ts
@@ -31,6 +31,7 @@ import { FieldSoundEffect } from "./field_sound_effect";
 import { FieldAutoComplete } from "./field_autocomplete";
 import { FieldColorWheel } from "./field_colorwheel";
 import { FieldScopedValueSelector } from "./field_scopedvalueselector";
+import { FieldPianoRoll } from "./field_piano_roll";
 
 interface FieldEditorOptions {
     field: FieldCustomConstructor;
@@ -70,6 +71,7 @@ export function initFieldEditors() {
     registerFieldEditor('scopedvalueselector', FieldScopedValueSelector);
     if (pxt.appTarget.appTheme?.songEditor) {
         registerFieldEditor('musiceditor', FieldMusicEditor);
+        registerFieldEditor('pianoroll', FieldPianoRoll);
     }
 }
 
diff --git a/pxtblocks/fields/field_asset.ts b/pxtblocks/fields/field_asset.ts
index e4f07e51b85e..38ece713c996 100644
--- a/pxtblocks/fields/field_asset.ts
+++ b/pxtblocks/fields/field_asset.ts
@@ -96,21 +96,18 @@ export abstract class FieldAssetEditor<U extends FieldAssetEditorOptions, V exte
 
         params.blocksInfo = this.blocksInfo;
 
-        let editorKind: string;
+        let editorKind = this.getEditorKind();
 
         switch (this.asset.type) {
             case pxt.AssetType.Tile:
             case pxt.AssetType.Image:
-                editorKind = "image-editor";
                 params.temporaryAssets = getTemporaryAssets(this.sourceBlock_.workspace, pxt.AssetType.Image);
                 break;
             case pxt.AssetType.Animation:
-                editorKind = "animation-editor";
                 params.temporaryAssets = getTemporaryAssets(this.sourceBlock_.workspace, pxt.AssetType.Image)
                     .concat(getTemporaryAssets(this.sourceBlock_.workspace, pxt.AssetType.Animation));
                 break;
             case pxt.AssetType.Tilemap:
-                editorKind = "tilemap-editor";
                 const project = pxt.react.getTilemapProject();
                 pxt.sprite.addMissingTilemapTilesAndReferences(project, this.asset);
 
@@ -121,7 +118,6 @@ export abstract class FieldAssetEditor<U extends FieldAssetEditorOptions, V exte
                 }
                 break;
             case pxt.AssetType.Song:
-                editorKind = "music-editor";
                 params.temporaryAssets = getTemporaryAssets(this.sourceBlock_.workspace, pxt.AssetType.Song);
                 setMelodyEditorOpen(this.sourceBlock_, true);
                 break;
@@ -136,6 +132,21 @@ export abstract class FieldAssetEditor<U extends FieldAssetEditorOptions, V exte
         }
     }
 
+    protected getEditorKind(): string{
+        switch (this.asset.type) {
+            case pxt.AssetType.Tile:
+            case pxt.AssetType.Image:
+                return "image-editor";
+            case pxt.AssetType.Animation:
+                return "animation-editor";
+            case pxt.AssetType.Tilemap:
+                return "tilemap-editor";
+            case pxt.AssetType.Song:
+                return "music-editor";
+        }
+        return undefined;
+    }
+
     getFieldDescription(): string {
         return this.asset?.meta?.displayName || this.getAssetType().toString();
     }
diff --git a/pxtblocks/fields/field_piano_roll.ts b/pxtblocks/fields/field_piano_roll.ts
new file mode 100644
index 000000000000..02579dc1e952
--- /dev/null
+++ b/pxtblocks/fields/field_piano_roll.ts
@@ -0,0 +1,7 @@
+import { FieldMusicEditor } from "./field_musiceditor";
+
+export class FieldPianoRoll extends FieldMusicEditor {
+    protected override getEditorKind() {
+        return "piano-roll-editor";
+    }
+}
\ No newline at end of file
diff --git a/pxtlib/music.ts b/pxtlib/music.ts
index eb2db98cc1a2..06747a84fd3b 100644
--- a/pxtlib/music.ts
+++ b/pxtlib/music.ts
@@ -460,7 +460,12 @@ namespace pxt.assets.music {
 
         song.tracks = base.tracks.map((track, index) => {
             const existing = song.tracks.find(t => t.id === index);
-            if (existing) track.notes = existing.notes;
+            if (existing) {
+                track.notes = existing.notes;
+                if (track.instrument) {
+                    track.instrument.octave = existing.instrument?.octave || track.instrument.octave;
+                }
+            }
             return track;
         })
     }
@@ -709,7 +714,7 @@ namespace pxt.assets.music {
                     },
                     drums: [
                         {
-                            /* neutral kick */
+                            name: lf("neutral kick"),
                             startFrequency: 100,
                             startVolume: 1024,
                             steps: [
@@ -728,7 +733,7 @@ namespace pxt.assets.music {
                             ]
                         },
                         {
-                            /* punchy kick */
+                            name: lf("punchy kick"),
                             startFrequency: 200,
                             startVolume: 1024,
                             steps: [{
@@ -740,7 +745,7 @@ namespace pxt.assets.music {
                         },
 
                         {
-                            /* booming kick */
+                            name: lf("booming kick"),
                             startFrequency: 100,
                             startVolume: 1024,
                             steps: [{
@@ -753,7 +758,7 @@ namespace pxt.assets.music {
 
 
                         {
-                            /* snare 1 */
+                            name: lf("snare 1"),
                             startFrequency: 175,
                             startVolume: 1024,
                             steps: [
@@ -785,7 +790,7 @@ namespace pxt.assets.music {
                         },
 
                         {
-                            /* snare 2 */
+                            name: lf("snare 2"),
                             startFrequency: 220,
                             startVolume: 1024,
                             steps: [
@@ -818,7 +823,7 @@ namespace pxt.assets.music {
 
 
                         {
-                            /* hat 1 */
+                            name: lf("hat 1"),
                             startFrequency: 400,
                             startVolume: 500,
                             steps: [
@@ -838,7 +843,7 @@ namespace pxt.assets.music {
                         },
 
                         {
-                            /* hat 2 */
+                            name: lf("hat 2"),
                             startFrequency: 400,
                             startVolume: 0,
                             steps: [
@@ -865,7 +870,7 @@ namespace pxt.assets.music {
 
 
                         {
-                            /* hat 3 */
+                            name: lf("hat 3"),
                             startFrequency: 400,
                             startVolume: 0,
                             steps: [
@@ -897,7 +902,7 @@ namespace pxt.assets.music {
                         },
 
                         {
-                            /* hat 4 */
+                            name: lf("hat 4"),
                             startFrequency: 400,
                             startVolume: 0,
                             steps: [
@@ -929,7 +934,7 @@ namespace pxt.assets.music {
                         },
 
                         {
-                            /* double hat */
+                            name: lf("double hat"),
                             startFrequency: 3500,
                             startVolume: 1024,
                             steps: [
@@ -967,7 +972,7 @@ namespace pxt.assets.music {
                         },
 
                         {
-                            /* metallic */
+                            name: lf("metallic"),
                             startFrequency: 2000,
                             startVolume: 1024,
                             steps: [
@@ -987,7 +992,7 @@ namespace pxt.assets.music {
                         },
 
                         {
-                            /* low tom */
+                            name: lf("low tom"),
                             startFrequency: 200,
                             startVolume: 200,
                             steps: [
@@ -1013,7 +1018,7 @@ namespace pxt.assets.music {
                         },
 
                         {
-                            /* mid tom */
+                            name: lf("mid tom"),
                             startFrequency: 300,
                             startVolume: 200,
                             steps: [
@@ -1039,7 +1044,7 @@ namespace pxt.assets.music {
                         },
 
                         {
-                            /* hi tom */
+                            name: lf("hi tom"),
                             startFrequency: 500,
                             startVolume: 200,
                             steps: [
@@ -1064,7 +1069,7 @@ namespace pxt.assets.music {
                             ]
                         },
                         {
-                            /* lo tom 2 */
+                            name: lf("lo tom 2"),
                             startFrequency: 200,
                             startVolume: 1024,
                             steps: [
@@ -1077,7 +1082,7 @@ namespace pxt.assets.music {
                             ]
                         },
                         {
-                            /* mid tom 2 */
+                            name: lf("mid tom 2"),
                             startFrequency: 300,
                             startVolume: 1024,
                             steps: [
@@ -1092,7 +1097,7 @@ namespace pxt.assets.music {
 
 
                         {
-                            /* hi tom 2 */
+                            name: lf("hi tom 2"),
                             startFrequency: 400,
                             startVolume: 1024,
                             steps: [
@@ -1107,7 +1112,7 @@ namespace pxt.assets.music {
 
 
                         {
-                            /* thump 1 */
+                            name: lf("thump 1"),
                             startFrequency: 200,
                             startVolume: 1024,
                             steps: [
@@ -1127,7 +1132,7 @@ namespace pxt.assets.music {
                         },
 
                         {
-                            /* thump 2 */
+                            name: lf("thump 2"),
                             startFrequency: 450,
                             startVolume: 1024,
                             steps: [
@@ -1147,7 +1152,7 @@ namespace pxt.assets.music {
                         },
 
                         {
-                            /* cymbal */
+                            name: lf("cymbal"),
                             startFrequency: 2500,
                             startVolume: 1024,
                             steps: [
@@ -1167,7 +1172,7 @@ namespace pxt.assets.music {
                         },
 
                         {
-                            /* crash 1 */
+                            name: lf("crash 1"),
                             startFrequency: 3000,
                             startVolume: 1024,
                             steps: [
@@ -1187,7 +1192,7 @@ namespace pxt.assets.music {
                         },
 
                         {
-                            /* crash 2 */
+                            name: lf("crash 2"),
                             startFrequency: 800,
                             startVolume: 0,
                             steps: [
@@ -1207,7 +1212,7 @@ namespace pxt.assets.music {
                         },
 
                         {
-                            /* crash 3 */
+                            name: lf("crash 3"),
                             startFrequency: 400,
                             startVolume: 0,
                             steps: [
@@ -1227,7 +1232,7 @@ namespace pxt.assets.music {
                         },
 
                         {
-                            /* buzzer */
+                            name: lf("buzzer"),
                             startFrequency: 2000,
                             startVolume: 1024,
                             steps: [
@@ -1244,7 +1249,8 @@ namespace pxt.assets.music {
                                     waveform: 16
                                 }
                             ]
-                        },]
+                        },
+                    ]
                 }
             ]
         }
diff --git a/theme/piano-roll/piano-roll.less b/theme/piano-roll/piano-roll.less
new file mode 100644
index 000000000000..4d89762c45ae
--- /dev/null
+++ b/theme/piano-roll/piano-roll.less
@@ -0,0 +1,187 @@
+.piano-roll {
+    display: flex;
+    flex-direction: column;
+
+    --black-key-height: calc(var(--white-key-height) * 0.625);
+    --sidebar-width: 100px;
+
+    --octave-height: calc(var(--white-key-height) * 7);
+
+    --grid-cell-height: calc(var(--octave-height) / 12);
+    --grid-cell-width: calc(var(--octave-width) / 16);
+
+    --key-border: 1px solid black;
+
+    --note-event-color: #a3f0c5;
+    --note-event-border: 2px solid #21905c;
+    --note-event-text-color: #21905c;
+
+    --white-key-color: white;
+    --black-key-color: black;
+    --key-text-color: black;
+
+    --header-background: #f0f0f0;
+
+    --header-height: 2.5rem;
+
+    max-height: 100%;
+    height: 100%;
+}
+
+.piano-roll-root {
+    height: 100%;
+    overflow-y: hidden;
+    background: var(--pxt-neutral-background1)
+}
+
+.piano-roll .header-container {
+    height: var(--header-height);
+    flex-shrink: 0;
+}
+
+.piano-roll .header, .piano-roll .footer {
+    height: var(--header-height);
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+    background-color: var(--header-background);
+    align-items: center;
+}
+
+.piano-roll .footer {
+    flex-shrink: 0;
+
+    .music-playback-controls {
+        .common-button {
+            height: calc(var(--header-height) - 0.3rem)
+        }
+
+        .music-undo-redo .common-button {
+            color: black;
+            background: none;
+            border: none;
+
+            &.disabled {
+                opacity: 0.5;
+            }
+        }
+    }
+}
+
+.piano-roll .header .octave-controls {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    & > .common-input-wrapper > .common-input-group {
+        max-width: 2rem;
+    }
+}
+
+.piano-roll .sidebar-container {
+    width: var(--sidebar-width);
+    position: relative;
+}
+
+.piano-roll .content-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.octave-sidebar {
+    user-select: none;
+
+    .key.white {
+        height: var(--white-key-height);
+        border-right: var(--key-border);
+        border-bottom: var(--key-border);
+        background-color: var(--white-key-color);
+        color: var(--key-text-color);
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-end;
+
+        &.active, &.playing {
+            background-color: var(--note-event-color);
+        }
+    }
+
+    .key.black {
+        height: var(--black-key-height);
+        width: calc(var(--sidebar-width) * 0.8);
+        border: var(--key-border);
+        border-left: none;
+        background-color: var(--black-key-color);
+        position: absolute;
+        margin-top: calc(var(--black-key-height) * -0.5);
+
+        &.active, &.playing {
+            background-color: var(--note-event-color);
+        }
+    }
+
+    .drum {
+        height: var(--grid-cell-height);
+        border-bottom: var(--key-border);
+        width: var(--sidebar-width);
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding-right: 0.25rem;
+        background-color: var(--white-key-color);
+        color: var(--key-text-color);
+
+        &.active, &.playing {
+            background-color: var(--note-event-color);
+        }
+    }
+}
+
+.piano-roll .workspace-container {
+    flex: 1;
+    overflow-x: hidden;
+}
+
+.piano-roll .workspace {
+    background-size: var(--octave-width) var(--octave-height);
+    background-repeat: repeat;
+    position: relative;
+}
+
+.piano-roll .workspace .note-event {
+    height: calc(var(--grid-cell-height) + 1px);
+    position: absolute;
+    display: flex;
+    align-items: center;
+    user-select: none;
+
+    padding-left: 0.25rem;
+
+    font-size: calc(var(--grid-cell-height) * 0.6);
+    background-color: var(--note-event-color);
+    border: var(--note-event-border);
+    color: var(--note-event-text-color);
+
+    cursor: pointer;
+}
+
+.piano-roll .workspace .note-event:hover {
+    border-color: white;
+    color: white;
+}
+
+.piano-roll .scroll-container {
+    max-height: 100%;
+    width: 100%;
+    overflow-y: auto;
+    flex-grow: 1;
+}
+
+.piano-roll .workspace .playhead {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 2px;
+    height: 100%;
+    background-color: red;
+}
\ No newline at end of file
diff --git a/theme/pxt.less b/theme/pxt.less
index f3a918c0d5d5..93bc940ae5ec 100644
--- a/theme/pxt.less
+++ b/theme/pxt.less
@@ -49,5 +49,7 @@
 
 @import "react-common";
 
+@import "piano-roll/piano-roll";
+
 /* Reference import */
 @import (reference) "semantic.less";
diff --git a/webapp/public/asseteditor.html b/webapp/public/asseteditor.html
index 5a72ce91a219..223e6b50baa3 100644
--- a/webapp/public/asseteditor.html
+++ b/webapp/public/asseteditor.html
@@ -19,7 +19,7 @@
     </style>
 </head>
 
-<body>
+<body class="pxt-theme-root">
     <script>
         // This line gets patched up by the cloud
         var pxtConfig = null;
diff --git a/webapp/src/blocklyFieldView.tsx b/webapp/src/blocklyFieldView.tsx
index 1c23bdb4ca91..910f77b2dc82 100644
--- a/webapp/src/blocklyFieldView.tsx
+++ b/webapp/src/blocklyFieldView.tsx
@@ -4,10 +4,9 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 
 import { ImageFieldEditor } from "./components/ImageFieldEditor";
-import { MusicEditor } from "./components/musicEditor/MusicEditor";
-import { MusicFieldEditor } from "./components/MusicFieldEditor";
 import { SoundEffectEditor } from "./components/soundEffectEditor/SoundEffectEditor";
 import { AssetFilePicker } from "./components/AssetFilePicker";
+import { PianoRollFieldEditor } from "./components/pianoRoll/fieldEditor";
 
 export interface EditorBounds {
     top: number;
@@ -18,7 +17,7 @@ export interface EditorBounds {
     verticalPadding?: number;
 }
 
-export interface FieldEditorComponent<U> extends React.Component {
+export interface FieldEditorComponent<U> {
     init(value: U, close: () => void, options?: any): void;
     getValue(): U;
 
@@ -271,6 +270,9 @@ export function init() {
             case "file-picker":
                 current.injectElement(<AssetFilePicker ref={ refHandler } />);
                 break;
+            case "piano-roll-editor":
+                current.injectElement(<PianoRollFieldEditor handleRef={ refHandler } />);
+                break;
 
         }
 
diff --git a/webapp/src/components/musicEditor/MusicEditor.tsx b/webapp/src/components/musicEditor/MusicEditor.tsx
index 27eb3f54a5e3..f582d50a84c9 100644
--- a/webapp/src/components/musicEditor/MusicEditor.tsx
+++ b/webapp/src/components/musicEditor/MusicEditor.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { EditControls } from "./EditControls";
 import { CursorState, handleKeyboardEvent } from "./keyboardNavigation";
-import { isPlaying, updatePlaybackSongAsync, stopPlayback } from "./playback";
+import { isPlaying, updatePlaybackSongAsync, stopPlayback, startPlaybackAsync } from "./playback";
 import { PlaybackControls } from "./PlaybackControls";
 import { ScrollableWorkspace } from "./ScrollableWorkspace";
 import { GridResolution, TrackSelector } from "./TrackSelector";
@@ -606,6 +606,18 @@ export const MusicEditor = (props: MusicEditorProps) => {
         setCursor(newCursor);
     }
 
+    const onPlaybackControlsClick = (action: "play" | "stop" | "loop") => {
+        if (action === "play") {
+            startPlaybackAsync(currentSong, false, 0);
+        }
+        else if (action === "loop") {
+            startPlaybackAsync(currentSong, true, 0);
+        }
+        else {
+            stopPlayback();
+        }
+    }
+
     return <div className="music-editor">
         <TrackSelector
             song={currentSong}
@@ -632,7 +644,9 @@ export const MusicEditor = (props: MusicEditorProps) => {
             cursor={cursorVisible ? cursor : undefined}
             onKeydown={onWorkspaceKeydown} />
         <PlaybackControls
-            song={currentSong}
+            beatsPerMinute={currentSong.beatsPerMinute}
+            measures={currentSong.measures}
+            onControlsClick={onPlaybackControlsClick}
             onTempoChange={onTempoChange}
             onMeasuresChanged={onMeasuresChanged}
             onUndoClick={undo}
diff --git a/webapp/src/components/musicEditor/PlaybackControls.tsx b/webapp/src/components/musicEditor/PlaybackControls.tsx
index 68f61bd8ab5b..a9191cf5e0b9 100644
--- a/webapp/src/components/musicEditor/PlaybackControls.tsx
+++ b/webapp/src/components/musicEditor/PlaybackControls.tsx
@@ -6,23 +6,30 @@ import { classList } from "../../../../react-common/components/util";
 import { addPlaybackStateListener, isLooping, isPlaying, removePlaybackStateListener, setLooping, startPlaybackAsync, stopPlayback } from "./playback";
 
 export interface PlaybackControlsProps {
-    song: pxt.assets.music.Song;
+    measures: number;
+    beatsPerMinute: number;
+    onControlsClick(action: "play" | "stop" | "loop"): void;
     onTempoChange: (newTempo: number) => void;
     onMeasuresChanged: (newMeasures: number) => void;
-    showBassClef: boolean;
-    onBassClefCheckboxClick: (newValue: boolean) => void;
+    hideBassClefOption?: boolean;
+    showBassClef?: boolean;
+    onBassClefCheckboxClick?: (newValue: boolean) => void;
+
+    singlePlayButton?: boolean;
 
     hasUndo: boolean;
     hasRedo: boolean;
     onUndoClick: () => void;
-    onRedoClick: () => void;
-}
+    onRedoClick: () => void
+};
 
 type PlaybackState = "stop" | "play" | "loop"
 
 export const PlaybackControls = (props: PlaybackControlsProps) => {
     const {
-        song,
+        measures,
+        beatsPerMinute,
+        onControlsClick,
         onTempoChange,
         onMeasuresChanged,
         onUndoClick,
@@ -30,7 +37,9 @@ export const PlaybackControls = (props: PlaybackControlsProps) => {
         hasUndo,
         hasRedo,
         showBassClef,
-        onBassClefCheckboxClick
+        hideBassClefOption,
+        onBassClefCheckboxClick,
+        singlePlayButton
     } = props;
 
     const [state, setState] = React.useState<PlaybackState>("stop");
@@ -47,19 +56,19 @@ export const PlaybackControls = (props: PlaybackControlsProps) => {
     }, [])
 
     const onStopClick = () => {
-        stopPlayback();
+        onControlsClick("stop");
         setState("stop")
     }
 
     const onPlayClick = () => {
-        startPlaybackAsync(song, false, 0);
+        onControlsClick("play");
         setState("play")
     }
 
     const onLoopClick = () => {
         if (isLooping()) return;
         else if (isPlaying()) setLooping(true);
-        else startPlaybackAsync(song, true, 0);
+        else onControlsClick("loop");
         setState("loop")
     }
 
@@ -73,14 +82,14 @@ export const PlaybackControls = (props: PlaybackControlsProps) => {
     }
 
     const handleMeasureMinusClick = () => {
-        if (song.measures > 1) {
-            onMeasuresChanged(song.measures - 1);
+        if (measures > 1) {
+            onMeasuresChanged(measures - 1);
         }
     }
 
     const handleMeasurePlusClick = () => {
-        if (song.measures < 50) {
-            onMeasuresChanged(song.measures + 1);
+        if (measures < 50) {
+            onMeasuresChanged(measures + 1);
         }
     }
 
@@ -94,35 +103,52 @@ export const PlaybackControls = (props: PlaybackControlsProps) => {
 
     return <div className="music-playback-controls">
         <div className="music-playback-buttons">
-            <Button
-                className="square-button"
-                title={lf("Stop")}
-                leftIcon="fas fa-stop"
-                onClick={onStopClick} />
-            <Button
-                className={classList("square-button", state === "play" && "green")}
-                title={lf("Play")}
-                leftIcon="fas fa-play"
-                onClick={onPlayClick} />
-            <Button
-                className={classList("square-button", state === "loop" && "green")}
-                title={lf("Loop")}
-                leftIcon="fas fa-retweet"
-                onClick={onLoopClick} />
+            {!singlePlayButton &&
+                <>
+                    <Button
+                        className="square-button"
+                        title={lf("Stop")}
+                        leftIcon="fas fa-stop"
+                        onClick={onStopClick}
+                    />
+                    <Button
+                        className={classList("square-button", state === "play" && "green")}
+                        title={lf("Play")}
+                        leftIcon="fas fa-play"
+                        onClick={onPlayClick}
+                    />
+                    <Button
+                        className={classList("square-button", state === "loop" && "green")}
+                        title={lf("Loop")}
+                        leftIcon="fas fa-retweet"
+                        onClick={onLoopClick}
+                    />
+                </>
+            }
+            {singlePlayButton &&
+                <Button
+                    className={classList("square-button", state !== "stop" && "green")}
+                    title={lf("Play")}
+                    leftIcon={state === "stop" ? "fas fa-play" : "fas fa-stop"}
+                    onClick={state === "stop" ? onLoopClick : onStopClick}
+                />
+            }
         </div>
         <Input
             id="music-playback-tempo-input music-editor-label"
             label={lf("Tempo:")}
-            initialValue={song.beatsPerMinute.toString()}
+            initialValue={beatsPerMinute.toString()}
             onBlur={handleTempoChange}
             onEnterKey={handleTempoChange} />
-        <div className="spacer"/>
-        <Checkbox
-            className="music-editor-label"
-            id="show-bass-clef"
-            label={lf("Show bass clef")}
-            isChecked={showBassClef}
-            onChange={onBassClefCheckboxClick} />
+        <div className="spacer" />
+        {!hideBassClefOption &&
+            <Checkbox
+                className="music-editor-label"
+                id="show-bass-clef"
+                label={lf("Show bass clef")}
+                isChecked={showBassClef}
+                onChange={onBassClefCheckboxClick} />
+        }
         <div className="music-undo-redo common-button-group">
             <Button
                 className="square-button purple"
@@ -148,7 +174,7 @@ export const PlaybackControls = (props: PlaybackControlsProps) => {
                 onClick={handleMeasureMinusClick} />
             <Input
                 id="music-playback-measures-input"
-                initialValue={song.measures.toString()}
+                initialValue={measures.toString()}
                 onBlur={handleMeasureChange}
                 onEnterKey={handleMeasureChange}
             />
diff --git a/webapp/src/components/musicEditor/playback.ts b/webapp/src/components/musicEditor/playback.ts
index 7fb11a0c2263..14e6f4ce6621 100644
--- a/webapp/src/components/musicEditor/playback.ts
+++ b/webapp/src/components/musicEditor/playback.ts
@@ -1,8 +1,11 @@
 let sequencer: pxsim.music.Sequencer;
 let playbackStateListeners: ((state: "play" | "loop" | "stop") => void)[] = [];
 let onTickListeners: ((tick: number) => void)[] = [];
+let playbackSong: pxt.assets.music.Song;
+let noteTracker: NoteTracker;
 
 export async function startPlaybackAsync(song: pxt.assets.music.Song, loop: boolean, ticks?: number) {
+    playbackSong = song;
     if (!sequencer) {
         sequencer = new pxsim.music.Sequencer();
         await sequencer.initAsync();
@@ -38,6 +41,7 @@ export function setLooping(loop: boolean) {
 
 export async function updatePlaybackSongAsync(song: pxt.assets.music.Song) {
     if (sequencer) sequencer.updateSong(song);
+    playbackSong = song;
 }
 
 export function stopPlayback() {
@@ -59,3 +63,96 @@ export function addPlaybackStateListener(listener: (state: "play" | "stop" | "lo
 export function removePlaybackStateListener(listener: (state: "play" | "stop" | "loop") => void) {
     playbackStateListeners = playbackStateListeners.filter(l => listener !== l);
 }
+
+export function addNoteChangeListener(listener: (track: number, note: number, on: boolean) => void) {
+    if (!noteTracker) noteTracker = new NoteTracker();
+    noteTracker.addNoteChangeListener(listener);
+}
+
+export function removeNoteChangeListener(listener: (track: number, note: number, on: boolean) => void) {
+    if (noteTracker) noteTracker.removeNoteChangeListener(listener);
+}
+
+
+export class NoteTracker {
+    private activeNotes: { [track: number]: number[] } = {};
+    private noteChangeListeners: ((track: number, note: number, on: boolean) => void)[] = [];
+
+    constructor() {
+        addTickListener(this.onTick);
+        addPlaybackStateListener(this.onPlaybackStateChange);
+    }
+
+    protected onTick = (tick: number) => {
+        const newActiveNotes: { [track: number]: number[] } = {};
+        for (let i = 0; i < playbackSong.tracks.length; i++) {
+            newActiveNotes[i] = [];
+
+            const track = playbackSong.tracks[i];
+
+            for (const event of track.notes) {
+                if (event.startTick > tick) break;
+
+                if (event.startTick <= tick && event.endTick > tick) {
+                    for (const note of event.notes) {
+                        newActiveNotes[i].push(note.note);
+                    }
+                }
+            }
+        }
+
+        for (let i = 0; i < playbackSong.tracks.length; i++) {
+            const oldNotes = this.activeNotes[i] || [];
+            const newNotes = newActiveNotes[i] || [];
+
+            for (const note of oldNotes) {
+                if (!newNotes.includes(note)) {
+                    for (const listener of this.noteChangeListeners) {
+                        listener(i, note, false);
+                    }
+                }
+            }
+
+            for (const note of newNotes) {
+                if (!oldNotes.includes(note)) {
+                    for (const listener of this.noteChangeListeners) {
+                        listener(i, note, true);
+                    }
+                }
+            }
+        }
+
+        this.activeNotes = newActiveNotes;
+    }
+
+    protected onPlaybackStateChange = (state: "play" | "stop" | "loop") => {
+        if (state === "stop") {
+            for (const track in this.activeNotes) {
+                for (const note of this.activeNotes[track]) {
+                    for (const listener of this.noteChangeListeners) {
+                        listener(parseInt(track), note, false);
+                    }
+                }
+            }
+
+            this.activeNotes = {};
+        }
+    }
+
+    addNoteChangeListener(listener: (track: number, note: number, on: boolean) => void) {
+        this.noteChangeListeners.push(listener);
+    }
+
+    removeNoteChangeListener(listener: (track: number, note: number, on: boolean) => void) {
+        this.noteChangeListeners = this.noteChangeListeners.filter(l => listener !== l);
+    }
+
+    dispose() {
+        removeTickListener(this.onTick);
+        removePlaybackStateListener(this.onPlaybackStateChange);
+    }
+
+    getActiveNotes(track: number) {
+        return this.activeNotes[track] || [];
+    }
+}
\ No newline at end of file
diff --git a/webapp/src/components/pianoRoll/DeleteErrorModal.tsx b/webapp/src/components/pianoRoll/DeleteErrorModal.tsx
new file mode 100644
index 000000000000..14e1cb4e694b
--- /dev/null
+++ b/webapp/src/components/pianoRoll/DeleteErrorModal.tsx
@@ -0,0 +1,25 @@
+import { Modal } from "../../../../react-common/components/controls/Modal";
+import { lf } from "./types";
+
+interface Props {
+    onClose(): void;
+}
+
+export const DeleteErrorModal = (props: Props) => {
+    const { onClose } = props;
+
+    return (
+        <Modal
+            title={lf("Cannot Delete")}
+            onClose={onClose}
+            actions={[
+                {
+                    label: lf("Okay"),
+                    onClick: onClose
+                }
+            ]}
+        >
+            <p>{lf("Songs must have at least one track.")}</p>
+        </Modal>
+    )
+}
\ No newline at end of file
diff --git a/webapp/src/components/pianoRoll/DeleteTrackModal.tsx b/webapp/src/components/pianoRoll/DeleteTrackModal.tsx
new file mode 100644
index 000000000000..75a47090c289
--- /dev/null
+++ b/webapp/src/components/pianoRoll/DeleteTrackModal.tsx
@@ -0,0 +1,38 @@
+import { Modal } from "../../../../react-common/components/controls/Modal";
+import { lf } from "./types";
+
+interface Props {
+    trackId: number;
+    onClose(): void;
+    onDelete(trackId: number): void;
+}
+
+export const DeleteTrackModal = (props: Props) => {
+    const { trackId, onClose, onDelete } = props;
+
+    const handleDelete = () => {
+        onDelete(trackId);
+        onClose();
+    };
+
+    return (
+        <Modal
+            title={lf("Delete Track")}
+            onClose={onClose}
+            actions={[
+                {
+                    label: lf("Cancel"),
+                    className: "neutral",
+                    onClick: onClose
+                },
+                {
+                    label: lf("Delete"),
+                    className: "red",
+                    onClick: handleDelete
+                }
+            ]}
+        >
+            <p>{lf("Are you sure you want to delete this track?")}</p>
+        </Modal>
+    )
+}
\ No newline at end of file
diff --git a/webapp/src/components/pianoRoll/DrumWarningModal.tsx b/webapp/src/components/pianoRoll/DrumWarningModal.tsx
new file mode 100644
index 000000000000..a2b471fc2041
--- /dev/null
+++ b/webapp/src/components/pianoRoll/DrumWarningModal.tsx
@@ -0,0 +1,39 @@
+import { Modal } from "../../../../react-common/components/controls/Modal";
+import { lf } from "./types";
+
+interface Props {
+    trackId: number;
+    instrumentId: number;
+    onClose(): void;
+    onConfirm(trackId: number, instrumentId: number): void;
+}
+
+export const DrumWarningModal = (props: Props) => {
+    const { trackId, instrumentId, onClose, onConfirm } = props;
+
+    const handleConfirm = () => {
+        onConfirm(trackId, instrumentId);
+        onClose();
+    };
+
+    return (
+        <Modal
+            title={lf("Change Track Instrument")}
+            onClose={onClose}
+            actions={[
+                {
+                    label: lf("Cancel"),
+                    className: "neutral",
+                    onClick: onClose
+                },
+                {
+                    label: lf("Confirm"),
+                    className: "red",
+                    onClick: handleConfirm
+                }
+            ]}
+        >
+            <p>{lf("Switching between instruments and drums will cause all existing notes to be deleted. Are you sure you want to continue?")}</p>
+        </Modal>
+    )
+}
\ No newline at end of file
diff --git a/webapp/src/components/pianoRoll/Header.tsx b/webapp/src/components/pianoRoll/Header.tsx
new file mode 100644
index 000000000000..e0f5b27c5e85
--- /dev/null
+++ b/webapp/src/components/pianoRoll/Header.tsx
@@ -0,0 +1,140 @@
+import { Dropdown, DropdownItem } from "../../../../react-common/components/controls/Dropdown";
+import { Song, lf, isDrumInstrument, NOTE_RANGES } from "./types";
+
+interface Props {
+    song: Song;
+    selectedTrack: number;
+
+    onTrackSelected(trackId: number): void;
+    onTrackCreated(): void;
+    onTrackDeleted(trackId: number): void;
+    onInstrumentSelected(trackId: number, instrumentId: number): void;
+    onOctavesChanged(minOctave: number, maxOctave: number): void;
+}
+
+export const Header = (props: Props) => {
+    const { song, selectedTrack, onTrackSelected, onInstrumentSelected, onTrackCreated, onTrackDeleted, onOctavesChanged } = props;
+
+    const onTrackDropdownChange = (id: string) => {
+        if (id === "new-track") {
+            onTrackCreated();
+        }
+        else if (id === "delete-track") {
+            onTrackDeleted(selectedTrack);
+        }
+        else {
+            const trackId = parseTrackId(id);
+            onTrackSelected(trackId);
+        }
+    };
+
+    const onInstrumentDropdownChange = (id: string) => {
+        const instrumentId = parseInstrumentId(id);
+        onInstrumentSelected(selectedTrack, instrumentId);
+    };
+
+    const track = song.tracks.find(t => t.id === selectedTrack);
+    const instrument = song.instruments.find(i => i.id === track?.instrumentId);
+
+    const isDrum = isDrumInstrument(instrument!);
+
+    const trackDropdownOptions: DropdownItem[] = song.tracks.map(
+        track => {
+            const label = lf("Track {0}", track.id);
+
+            return {
+                label,
+                title: label,
+                id: trackId(track.id)
+            }
+        }
+    );
+
+    trackDropdownOptions.push({
+        label: lf("New Track..."),
+        title: lf("New Track..."),
+        id: "new-track"
+    });
+
+    if (song.tracks.length > 1) {
+        trackDropdownOptions.push({
+            label: lf("Delete Track"),
+            title: lf("Delete Track"),
+            id: "delete-track",
+        });
+    }
+
+    const rangeOptions: DropdownItem[] = NOTE_RANGES.map(range => ({
+        label: range.name,
+        title: range.name,
+        id: range.id
+    }));
+
+    const handleRangeDropdownChange = (id: string) => {
+        const range = NOTE_RANGES.find(r => r.id === id);
+
+        if (!range) return;
+        onOctavesChanged(range.minOctave, range.maxOctave);
+    };
+
+    let selectedRangeId = "full";
+    const range = NOTE_RANGES.find(r => r.minOctave === track?.minOctave && r.maxOctave === track?.maxOctave);
+
+    if (range) {
+        selectedRangeId = range.id;
+    }
+
+
+    return (
+        <div className="header">
+            <Dropdown
+                id="track-select"
+                items={trackDropdownOptions}
+                selectedId={trackId(selectedTrack)}
+                onItemSelected={onTrackDropdownChange}
+            />
+            <Dropdown
+                id="instrument-select"
+                items={song.instruments.map(
+                    instrument => ({
+                        label: instrument.name,
+                        title: instrument.name,
+                        id: instrumentId(instrument.id)
+                    })
+                )}
+                selectedId={instrumentId(track?.instrumentId ?? 0)}
+                onItemSelected={onInstrumentDropdownChange}
+            />
+            {!isDrum &&
+                <div className="octave-controls">
+                    <div className="music-editor-label">
+                        {lf("Range:")}
+                    </div>
+                    <Dropdown
+                        id="range-select"
+                        items={rangeOptions}
+                        selectedId={selectedRangeId}
+                        onItemSelected={handleRangeDropdownChange}
+                    />
+                </div>
+            }
+        </div>
+    );
+}
+
+function trackId(trackId: number) {
+    return `track-${trackId}`;
+}
+
+function parseTrackId(id: string) {
+    return parseInt(id.replace("track-", ""));
+}
+
+function instrumentId(instrumentId: number) {
+    return `instrument-${instrumentId}`;
+}
+
+function parseInstrumentId(id: string) {
+    return parseInt(id.replace("instrument-", ""));
+}
+
diff --git a/webapp/src/components/pianoRoll/NoteEvent.tsx b/webapp/src/components/pianoRoll/NoteEvent.tsx
new file mode 100644
index 000000000000..d08622af5d9a
--- /dev/null
+++ b/webapp/src/components/pianoRoll/NoteEvent.tsx
@@ -0,0 +1,29 @@
+import { usePianoRollTheme } from "./context";
+import { NoteEvent } from "./types";
+import { getNoteName, noteLeft, noteTop, noteWidth } from "./utils";
+
+interface Props {
+    event: NoteEvent;
+    isDrumTrack?: boolean;
+}
+
+export const NoteEventView = (props: Props) => {
+    const { event, isDrumTrack } = props;
+    const { duration, note, start, id } = event;
+
+    const theme = usePianoRollTheme();
+
+    return (
+        <div
+            id={`note-${id}`}
+            className="note-event"
+            style={{
+                width: `${noteWidth(theme, duration)}px`,
+                left: `${noteLeft(theme, start)}px`,
+                top: `${noteTop(theme, note)}px`
+            }}
+        >
+            {isDrumTrack ? undefined : getNoteName(note)}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/webapp/src/components/pianoRoll/PianoOctave.tsx b/webapp/src/components/pianoRoll/PianoOctave.tsx
new file mode 100644
index 000000000000..3036fb0a1928
--- /dev/null
+++ b/webapp/src/components/pianoRoll/PianoOctave.tsx
@@ -0,0 +1,99 @@
+import { useCallback, useEffect, useRef } from "react";
+import { classList } from "../../../../react-common/components/util";
+import { addNoteChangeListener, removeNoteChangeListener } from "../musicEditor/playback";
+import { Instrument, isDrumInstrument } from "./types";
+import { getNoteName, isBlackKey, range} from "./utils";
+
+interface Props {
+    octave: number;
+    selectedTrack: number;
+    instrument: Instrument;
+}
+
+export const PianoOctave = (props: Props) => {
+    const { octave, selectedTrack, instrument } = props;
+
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) return undefined;
+
+        const handleNoteChange = (track: number, note: number, on: boolean) => {
+            if (track !== selectedTrack) return;
+            if (note < octave * 12 || note >= (octave + 1) * 12) return;
+
+            const key = container.querySelector(`#key-${note}`) as HTMLDivElement | null;
+            if (key) {
+                key.classList.toggle("active", on);
+            }
+        }
+
+        for (let i = 0; i < 12; i++) {
+            const note = (11 - i) + octave * 12;
+            const key = container.querySelector(`#key-${note}`) as HTMLDivElement | null;
+            if (key) {
+                key.classList.toggle("active", false);
+            }
+        }
+
+        addNoteChangeListener(handleNoteChange);
+
+        return () => {
+            removeNoteChangeListener(handleNoteChange);
+        };
+    }, [octave, selectedTrack]);
+
+    const playNote = useCallback(async (note: number) => {
+        const ref = containerRef.current?.querySelector(`#key-${note}`) as HTMLDivElement | null;
+        if (ref) {
+            ref.classList.add("playing");
+        }
+
+        if (isDrumInstrument(instrument)) {
+            const drum = instrument.drums[note];
+            if (drum) {
+                await pxsim.music.playDrumAsync(drum);
+            }
+        }
+        else {
+            await pxsim.music.playNoteAsync(note, instrument.instrument, 300)
+        }
+
+        if (ref) {
+            ref.classList.remove("playing");
+        }
+    }, [instrument]);
+
+    const isDrum = isDrumInstrument(instrument);
+
+    return (
+        <div className="octave-sidebar" ref={containerRef}>
+            {
+                range(0, 12).map(index => {
+                    const note = (11 - index) + octave * 12;
+                    const isBlack = isBlackKey(note);
+                    const noteName = isDrum ? instrument.drums[note].name! : getNoteName(note);
+
+                    const classes = classList(
+                        isDrum ? "drum" : "key",
+                        isBlack ? "black" : "white",
+                        getNoteName(note, false).replace("#", "sharp")
+                    );
+
+                    const text = ((note % 12) && !isDrum) ? undefined : noteName; // Only show note name for C notes
+
+                    const onClick = () => {
+                        playNote(note);
+                    }
+
+                    return (
+                        <div key={note} id={`key-${note}`} className={classes} title={noteName} onClick={onClick}>
+                            {text}
+                        </div>
+                    );
+                })
+            }
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/webapp/src/components/pianoRoll/PianoRoll.tsx b/webapp/src/components/pianoRoll/PianoRoll.tsx
new file mode 100644
index 000000000000..24f42b76f9a4
--- /dev/null
+++ b/webapp/src/components/pianoRoll/PianoRoll.tsx
@@ -0,0 +1,325 @@
+import { PianoRollThemeProvider, usePianoRollThemeContext } from "./context"
+import { Workspace } from "./Workspace"
+import { Sidebar } from "./Sidebar"
+import { useEffect, useState } from "react"
+import { changeMeasures, changeOctaves, changeTrackInstrument, fromPXTSong, getEmptySong, isDrumInstrument, newTrack, Song, toPXTSong, Track, updateTrack } from "./types"
+import { Header } from "./Header"
+import { DeleteTrackModal } from "./DeleteTrackModal"
+import { DeleteErrorModal } from "./DeleteErrorModal"
+import { DrumWarningModal } from "./DrumWarningModal"
+import { isPlaying, startPlaybackAsync, stopPlayback, updatePlaybackSongAsync } from "../musicEditor/playback"
+import { PlaybackControls } from "../musicEditor/PlaybackControls"
+
+interface PianoRollProps {
+    onStateChanged?: (state: PianoRollState) => void;
+    asset?: pxt.assets.music.Song;
+    undoStack?: StateSnapshot[];
+    redoStack?: StateSnapshot[];
+}
+
+type modalType = "delete-track" | "delete-error" | "drum-warning";
+
+export const PianoRoll = (props: PianoRollProps) => {
+    return (
+        <PianoRollThemeProvider>
+            <PianoRollInternal {...props} />
+        </PianoRollThemeProvider>
+    )
+}
+
+export interface PianoRollState {
+    undoStack: StateSnapshot[];
+    redoStack: StateSnapshot[];
+    asset: pxt.assets.music.Song;
+}
+
+interface StateSnapshot {
+    song: Song;
+    selectedTrack: number;
+}
+
+
+const PianoRollInternal = (props: PianoRollProps) => {
+    const { onStateChanged, asset, undoStack: initialUndoStack, redoStack: initialRedoStack } = props;
+    const { state: theme, dispatch: updateTheme, } = usePianoRollThemeContext();
+
+    const [song, setSong] = useState<Song>(asset ? fromPXTSong(asset) : getEmptySong());
+    const [selectedTrack, setSelectedTrack] = useState(song.tracks[0].id);
+    const [modal, setModal] = useState<{ type: modalType, trackId?: number, instrumentId?: number } | null>(null);
+
+    const [undoStack, setUndoStack] = useState<StateSnapshot[]>(initialUndoStack || []);
+    const [redoStack, setRedoStack] = useState<StateSnapshot[]>(initialRedoStack || []);
+
+    useEffect(() => {
+        if (asset) {
+            const song = fromPXTSong(asset);
+            setSong(song);
+            setSelectedTrack(song.tracks[0].id);
+            setModal(null);
+            setUndoStack(props.undoStack || []);
+            setRedoStack(props.redoStack || []);
+            stopPlayback();
+        }
+    }, [asset])
+
+    useEffect(() => {
+        if (initialUndoStack) {
+            setUndoStack(initialUndoStack);
+        }
+        if (initialRedoStack) {
+            setRedoStack(initialRedoStack);
+        }
+    }, [initialUndoStack, initialRedoStack]);
+
+    const fireStateChange = (song: Song, undoStack: StateSnapshot[], redoStack: StateSnapshot[]) => {
+        if (onStateChanged) {
+            onStateChanged({
+                asset: toPXTSong(song),
+                undoStack,
+                redoStack
+            })
+        }
+    }
+
+    const updateSong = (newSong: Song) => {
+        setUndoStack([...undoStack, { song, selectedTrack }]);
+        setRedoStack([])
+
+        setSong(newSong);
+        fireStateChange(newSong, [...undoStack, { song, selectedTrack }], [])
+
+        if (isPlaying()) {
+            updatePlaybackSongAsync(toPXTSong(newSong));
+        }
+    }
+
+    const onTrackEdit = (updatedTrack: Track) => {
+        updateSong(updateTrack(updatedTrack, song));
+    }
+
+    const onTrackSelected = (trackId: number) => {
+        setSelectedTrack(trackId);
+    }
+
+    const onTrackCreated = () => {
+        const newSong = newTrack(song.instruments[0].id, song);
+        updateSong(newSong);
+
+        setSelectedTrack(newSong.tracks[newSong.tracks.length - 1].id);
+    }
+
+    const onTrackDeleted = (trackId: number) => {
+        const toDelete = song.tracks.find(t => t.id === trackId);
+
+        if (song.tracks.length === 1) {
+            setModal({ type: "delete-error" });
+        }
+        else if (!toDelete?.events.length) {
+            setSelectedTrack(song.tracks[0].id);
+            updateSong({
+                ...song,
+                tracks: song.tracks.filter(t => t.id !== trackId)
+            });
+        }
+        else {
+            setModal({ type: "delete-track", trackId });
+        }
+    }
+
+    const onInstrumentSelected = (trackId: number, instrumentId: number) => {
+        const track = song.tracks.find(t => t.id === trackId)!;
+        const oldInstrument = song.instruments.find(i => i.id === track.instrumentId)!;
+        const newInstrument = song.instruments.find(i => i.id === instrumentId)!;
+
+        if (isDrumInstrument(oldInstrument) !== isDrumInstrument(newInstrument) && track.events.length) {
+            setModal({ type: "drum-warning", trackId, instrumentId });
+            return;
+        }
+
+        setTrackInstrument(trackId, instrumentId);
+    }
+
+    const deleteTrack = (trackId: number) => {
+        setSelectedTrack(song.tracks[0].id);
+        updateSong({
+            ...song,
+            tracks: song.tracks.filter(t => t.id !== trackId)
+        });
+    }
+
+    const setTrackInstrument = (trackId: number, instrumentId: number) => {
+        updateSong(changeTrackInstrument(trackId, instrumentId, song));
+    }
+
+    const playNote = (note: number) => {
+        const track = song.tracks.find(t => t.id === selectedTrack)!;
+        const instrument = song.instruments.find(i => i.id === track.instrumentId)!;
+
+        if (isDrumInstrument(instrument)) {
+            const drum = instrument.drums[note];
+            pxsim.music.playDrumAsync(drum)
+        }
+        else {
+            pxsim.music.playNoteAsync(note, instrument.instrument, 300)
+        }
+    }
+
+    const onPlaybackControlsClick = (action: "play" | "stop" | "loop") => {
+        if (action === "play") {
+            startPlaybackAsync(toPXTSong(song), false);
+        }
+        else if (action === "loop") {
+            startPlaybackAsync(toPXTSong(song), true);
+        }
+        else {
+            stopPlayback();
+        }
+    }
+
+    const onMeasuresChanged = (newMeasures: number) => {
+        updateSong(changeMeasures(newMeasures, song));
+
+        updateTheme({ measures: newMeasures });
+    }
+
+    const onTempoChange = (newTempo: number) => {
+        updateSong({
+            ...song,
+            tempo: newTempo
+        });
+    }
+
+    const onOctavesChanged = (minOctave: number, maxOctave: number) => {
+        const track = song.tracks.find(t => t.id === selectedTrack)!;
+
+        if (track.minOctave === minOctave && track.maxOctave === maxOctave) return;
+
+        if (isDrumInstrument(song.instruments.find(i => i.id === track.instrumentId)!)) {
+            return;
+        }
+
+        updateTheme({ minOctave, maxOctave });
+        updateSong(changeOctaves(selectedTrack, minOctave, maxOctave, song));
+    }
+
+    const undo = () => {
+        if (!undoStack.length) return;
+
+        const lastState = undoStack.pop()!;
+        redoStack.push({ song, selectedTrack });
+
+        setUndoStack([...undoStack]);
+        setRedoStack([...redoStack]);
+
+        setSong(lastState.song);
+        setSelectedTrack(lastState.selectedTrack);
+
+        fireStateChange(lastState.song, [...undoStack], [...redoStack])
+
+        if (lastState.song.measures !== song.measures) {
+            updateTheme({ measures: lastState.song.measures });
+        }
+
+        if (isPlaying()) {
+            updatePlaybackSongAsync(toPXTSong(lastState.song));
+        }
+    }
+
+    const redo = () => {
+        if (!redoStack.length) return;
+
+        const nextState = redoStack.pop()!;
+        undoStack.push({ song, selectedTrack });
+
+        setUndoStack([...undoStack]);
+        setRedoStack([...redoStack]);
+
+        setSong(nextState.song);
+        setSelectedTrack(nextState.selectedTrack);
+
+        fireStateChange(nextState.song, [...undoStack], [...redoStack])
+
+        if (nextState.song.measures !== song.measures) {
+            updateTheme({ measures: nextState.song.measures });
+        }
+
+        if (isPlaying()) {
+            updatePlaybackSongAsync(toPXTSong(nextState.song));
+        }
+    }
+
+    const closeModal = () => setModal(null);
+
+    const track = song.tracks.find(t => t.id === selectedTrack)!;
+    const instrument = song.instruments.find(i => i.id === track.instrumentId)!;
+
+    const minOctave = isDrumInstrument(instrument) ? 0 : track.minOctave;
+    const maxOctave = isDrumInstrument(instrument) ? 1 : track.maxOctave;
+
+    useEffect(() => {
+        if (theme.minOctave !== minOctave || theme.maxOctave !== maxOctave || theme.measures !== song.measures) {
+            updateTheme({ minOctave, maxOctave, measures: song.measures });
+        }
+    }, [minOctave, maxOctave, theme.minOctave, theme.maxOctave, updateTheme, song.measures])
+
+    return (
+        <div className="piano-roll">
+            {modal?.type === "delete-track" &&
+                <DeleteTrackModal trackId={modal.trackId!} onClose={closeModal} onDelete={deleteTrack} />
+            }
+            {modal?.type === "delete-error" &&
+                <DeleteErrorModal onClose={closeModal} />
+            }
+            {modal?.type === "drum-warning" &&
+                <DrumWarningModal trackId={modal.trackId!} instrumentId={modal.instrumentId!} onClose={closeModal} onConfirm={setTrackInstrument} />
+            }
+            <div className="header-container">
+                <Header
+                    song={song}
+                    selectedTrack={selectedTrack}
+                    onTrackSelected={onTrackSelected}
+                    onInstrumentSelected={onInstrumentSelected}
+                    onTrackCreated={onTrackCreated}
+                    onTrackDeleted={onTrackDeleted}
+                    onOctavesChanged={onOctavesChanged}
+                />
+            </div>
+            <div className="scroll-container">
+                <div className="content-container">
+                    <div className="sidebar-container">
+                        <Sidebar
+                            instrument={instrument}
+                            selectedTrack={selectedTrack}
+                            minOctave={minOctave}
+                            maxOctave={maxOctave}
+                        />
+                    </div>
+                    <div className="workspace-container">
+                        <Workspace
+                            track={track}
+                            onEdit={onTrackEdit}
+                            isDrumTrack={isDrumInstrument(instrument)}
+                            playNote={playNote}
+                            measures={song.measures}
+                        />
+                    </div>
+                </div>
+            </div>
+            <div className="footer">
+                <PlaybackControls
+                    beatsPerMinute={song.tempo}
+                    measures={song.measures}
+                    onControlsClick={onPlaybackControlsClick}
+                    onTempoChange={onTempoChange}
+                    onMeasuresChanged={onMeasuresChanged}
+                    hasUndo={undoStack.length > 0}
+                    hasRedo={redoStack.length > 0}
+                    onUndoClick={undo}
+                    onRedoClick={redo}
+                    hideBassClefOption={true}
+                    singlePlayButton={true}
+                />
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/webapp/src/components/pianoRoll/Sidebar.tsx b/webapp/src/components/pianoRoll/Sidebar.tsx
new file mode 100644
index 000000000000..9d1bbd0d6144
--- /dev/null
+++ b/webapp/src/components/pianoRoll/Sidebar.tsx
@@ -0,0 +1,24 @@
+import { usePianoRollTheme } from "./context";
+import { PianoOctave } from "./PianoOctave";
+import { Instrument } from "./types";
+import { range } from "./utils";
+
+interface Props {
+    selectedTrack: number;
+    instrument: Instrument;
+    minOctave: number;
+    maxOctave: number;
+}
+
+export const Sidebar = (props: Props) => {
+    const { selectedTrack, instrument, minOctave, maxOctave } = props;
+
+    const octaves = range(minOctave, maxOctave + 1);
+    octaves.reverse();
+
+    return (
+        <div className="sidebar">
+            {octaves.map(octave => <PianoOctave key={octave} octave={octave} selectedTrack={selectedTrack} instrument={instrument} />)}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/webapp/src/components/pianoRoll/Workspace.tsx b/webapp/src/components/pianoRoll/Workspace.tsx
new file mode 100644
index 000000000000..227bece27cb6
--- /dev/null
+++ b/webapp/src/components/pianoRoll/Workspace.tsx
@@ -0,0 +1,215 @@
+import { useEffect, useRef } from "react";
+import { addPlaybackStateListener, addTickListener, removePlaybackStateListener, removeTickListener } from "../musicEditor/playback";
+import { usePianoRollTheme } from "./context";
+import { NoteEventView } from "./NoteEvent"
+import { changeNoteEventDuration, getMaxDuration, newNoteEvent, NoteEvent, Track } from "./types";
+import { noteWidth, workspaceHeight, workspaceWidth, xToTick, yToNote } from "./utils";
+import { useWorkspaceBackground } from "./workspaceBackground";
+
+interface Props {
+    track: Track;
+    isDrumTrack: boolean;
+    playNote: (note: number) => void;
+    onEdit: (track: Track) => void;
+    measures: number;
+}
+
+interface GestureState {
+    startX: number;
+    startY: number;
+    startScrollX: number;
+    startScrollY: number;
+    noteEvent?: NoteEvent;
+    isScrolling?: boolean
+    noteElement?: HTMLDivElement;
+}
+
+export const Workspace = (props: Props) => {
+    const { track, onEdit, isDrumTrack, playNote, measures } = props;
+
+    const bg = useWorkspaceBackground();
+    const theme = usePianoRollTheme();
+
+    const workspaceRef = useRef<HTMLDivElement>(null);
+    const playheadRef = useRef<HTMLDivElement>(null);
+    const gestureState = useRef<GestureState | null>(null);
+
+    useEffect(() => {
+        const horizontalScroller = workspaceRef.current?.parentElement;
+        const verticalScroller = horizontalScroller?.parentElement?.parentElement;
+
+        const clientToNoteCoordinates = (clientX: number, clientY: number) => {
+            const bounds = workspaceRef.current?.getBoundingClientRect();
+            if (!bounds) return null;
+
+            const x = clientX - bounds.left;
+            const y = clientY - bounds.top;
+
+            const note = yToNote(theme, y);
+            const time = xToTick(theme, x);
+
+            return { note, time };
+        }
+
+        const getNewNoteDuration = (clientX: number, clientY: number) => {
+            const editing = gestureState.current!.noteEvent!;
+            const coords = clientToNoteCoordinates(clientX, clientY);
+            if (!coords) return 1;
+
+            const max = getMaxDuration(editing.note, editing.start + 1, track, measures);
+
+            return Math.max(1, Math.min(max, coords.time - editing.start + 1));
+        }
+
+        const getNoteEventAtPosition = (x: number, y: number): NoteEvent | undefined => {
+            const { note, time } = clientToNoteCoordinates(x, y) || {};
+            if (note === undefined || time === undefined) return undefined;
+
+            return track.events.find(e => e.note === note && e.start <= time && time < e.start + e.duration);
+        }
+
+        const updateGesture = (e: PointerEvent) => {
+            if (!gestureState.current) return;
+
+            const deltaX = e.clientX - gestureState.current.startX;
+            const deltaY = e.clientY - gestureState.current.startY;
+            if (!gestureState.current.isScrolling) {
+                if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {
+                    gestureState.current.isScrolling = true;
+                }
+            }
+
+            if (gestureState.current.isScrolling) {
+                if (!gestureState.current.noteEvent || isDrumTrack) {
+                    if (horizontalScroller) {
+                        horizontalScroller.scrollLeft = gestureState.current.startScrollX - deltaX;
+                    }
+                    if (verticalScroller) {
+                        verticalScroller.scrollTop = gestureState.current.startScrollY - deltaY;
+                    }
+                }
+                else {
+                    const editing = gestureState.current.noteEvent;
+
+                    if (!gestureState.current.noteElement) {
+                        gestureState.current.noteElement = document.getElementById(`note-${editing.id}`) as HTMLDivElement;
+                    }
+
+                    if (gestureState.current.noteElement) {
+                        gestureState.current.noteElement.style.width = `${noteWidth(theme, getNewNoteDuration(e.clientX, e.clientY))}px`;
+                    }
+                }
+            }
+        }
+
+        const onPointerDown = (e: PointerEvent) => {
+            gestureState.current = {
+                startX: e.clientX,
+                startY: e.clientY,
+                startScrollX: horizontalScroller?.scrollLeft || 0,
+                startScrollY: verticalScroller?.scrollTop || 0,
+                noteEvent: getNoteEventAtPosition(e.clientX, e.clientY)
+            };
+
+            updateGesture(e);
+        }
+
+        const onPointerMove = (e: PointerEvent) => {
+            updateGesture(e);
+        }
+
+        const onPointerUp = (e: PointerEvent) => {
+            if (!gestureState.current) return;
+            updateGesture(e);
+
+            if (!gestureState.current.isScrolling) {
+                if (gestureState.current.noteEvent) {
+                    onEdit({
+                        ...track,
+                        events: track.events.filter(e => e !== gestureState.current?.noteEvent)
+                    });
+                }
+                else {
+                    const coords = clientToNoteCoordinates(gestureState.current.startX, gestureState.current.startY);
+
+                    if (coords) {
+                        onEdit(newNoteEvent(coords.note, coords.time, track, isDrumTrack, measures));
+                        playNote(coords.note);
+                    }
+                }
+            }
+            else if (gestureState.current.noteEvent && !isDrumTrack) {
+                onEdit(changeNoteEventDuration(gestureState.current.noteEvent.id, getNewNoteDuration(e.clientX, e.clientY), track, measures));
+            }
+
+            gestureState.current = null;
+        }
+
+        workspaceRef.current?.addEventListener("pointerdown", onPointerDown);
+        workspaceRef.current?.addEventListener("pointermove", onPointerMove);
+        workspaceRef.current?.addEventListener("pointerup", onPointerUp);
+        workspaceRef.current?.addEventListener("pointercancel", onPointerUp);
+        workspaceRef.current?.addEventListener("pointerleave", onPointerUp);
+
+        return () => {
+            workspaceRef.current?.removeEventListener("pointerdown", onPointerDown);
+            workspaceRef.current?.removeEventListener("pointermove", onPointerMove);
+            workspaceRef.current?.removeEventListener("pointerup", onPointerUp);
+            workspaceRef.current?.removeEventListener("pointercancel", onPointerUp);
+            workspaceRef.current?.removeEventListener("pointerleave", onPointerUp);
+        }
+    }, [track, onEdit, theme.minOctave, theme.maxOctave, isDrumTrack])
+
+
+    useEffect(() => {
+        const tickTime = pxsim.music.tickToMs(120, 4, 1);
+        const tickDistance = noteWidth(theme, 1);
+        let playbackHeadPosition = 0;
+        let isPlaying = false;
+        let animationFrameRef: number;
+        let lastTime: number;
+
+        const onTick = (tick: number) => {
+            playbackHeadPosition = noteWidth(theme, tick);
+            lastTime = Date.now();
+            if (!isPlaying) {
+                isPlaying = true;
+                playheadRef.current.style.left = `${playbackHeadPosition}px`;
+                playheadRef.current.style.display = "unset";
+                animationFrameRef = requestAnimationFrame(onAnimationFrame);
+            }
+        }
+
+        const onStop = () => {
+            isPlaying = false;
+            playheadRef.current.style.display = "none";
+            if (animationFrameRef) cancelAnimationFrame(animationFrameRef);
+        }
+
+        const onAnimationFrame = () => {
+            const position = playbackHeadPosition + tickDistance * (Date.now() - lastTime) / tickTime;
+            playheadRef.current.style.left = `${position}px`;
+            if (isPlaying) animationFrameRef = requestAnimationFrame(onAnimationFrame);
+        }
+
+        addTickListener(onTick);
+        addPlaybackStateListener(onStop);
+
+        return () => {
+            removeTickListener(onTick);
+            removePlaybackStateListener(onStop);
+            if (animationFrameRef) cancelAnimationFrame(animationFrameRef);
+        }
+    }, [theme])
+
+    return (
+        <div className="workspace" style={{
+            backgroundImage: bg,
+            width: workspaceWidth(theme),
+            height: workspaceHeight(theme)
+        }} ref={workspaceRef}>
+            <div className="playhead" ref={playheadRef}></div>
+            {track.events.map((e, i) => <NoteEventView key={i} event={e} isDrumTrack={isDrumTrack} />)}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/webapp/src/components/pianoRoll/context.tsx b/webapp/src/components/pianoRoll/context.tsx
new file mode 100644
index 000000000000..359c0e01e9f6
--- /dev/null
+++ b/webapp/src/components/pianoRoll/context.tsx
@@ -0,0 +1,63 @@
+import { createContext, useContext, useReducer } from "react";
+
+export interface PianoRollTheme {
+    octaveWidth: number;
+    whiteKeyHeight: number;
+    measures: number;
+    minOctave: number;
+    maxOctave: number;
+}
+
+const defaultTheme: PianoRollTheme = {
+    octaveWidth: 500,
+    whiteKeyHeight: 40,
+    measures: 4,
+    minOctave: 3,
+    maxOctave: 5
+};
+
+interface ThemeAndUpdate {
+    state: PianoRollTheme;
+    dispatch: (newTheme: Partial<PianoRollTheme>) => void;
+}
+
+export const PianoRollContext = createContext<ThemeAndUpdate>({
+    state: undefined!,
+    dispatch: undefined!
+});
+
+function reducer(state: PianoRollTheme, newTheme: Partial<PianoRollTheme>): PianoRollTheme {
+    return { ...state, ...newTheme };
+}
+
+export function PianoRollThemeProvider(
+    props: React.PropsWithChildren<{}>
+): React.ReactElement {
+    const [state, dispatch] = useReducer(reducer, defaultTheme);
+
+    const value = { state, dispatch };
+
+    const handleRootRef = (el: HTMLDivElement | null) => {
+        if (el) {
+            el.setAttribute("style", `--octave-width: ${value.state.octaveWidth}px; --white-key-height: ${value.state.whiteKeyHeight}px;`);
+        }
+    }
+
+    return (
+        <PianoRollContext.Provider
+            value={value}
+        >
+            <div className="piano-roll-root" ref={handleRootRef}>
+                {props.children}
+            </div>
+        </PianoRollContext.Provider>
+    );
+}
+
+export function usePianoRollTheme() {
+    return useContext(PianoRollContext).state;
+}
+
+export function usePianoRollThemeContext() {
+    return useContext(PianoRollContext);
+}
\ No newline at end of file
diff --git a/webapp/src/components/pianoRoll/fieldEditor.tsx b/webapp/src/components/pianoRoll/fieldEditor.tsx
new file mode 100644
index 000000000000..0c5970aa0db4
--- /dev/null
+++ b/webapp/src/components/pianoRoll/fieldEditor.tsx
@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { FieldEditorComponent } from "../../blocklyFieldView"
+import { PianoRoll, PianoRollState } from "./PianoRoll"
+
+interface Props {
+    handleRef: (e: FieldEditorComponent<any>) => void;
+}
+
+export const PianoRollFieldEditor = (props: Props) => {
+    const { handleRef } = props;
+
+    const [asset, setAsset] = useState<pxt.Song>();
+    const [undoStack, setUndoStack] = useState<PianoRollState["undoStack"]>([]);
+    const [redoStack, setRedoStack] = useState<PianoRollState["redoStack"]>([]);
+
+    const resultRef = useRef<PianoRollState>();
+
+    useEffect(() => {
+        if (handleRef) {
+            let asset: pxt.Song | undefined;
+            handleRef({
+                init: (value: pxt.Song, close: () => void) => {
+                    asset = value;
+                    setAsset(value);
+                },
+                getValue: () => ({
+                    ...asset,
+                    song: resultRef.current.asset
+                }),
+                getPersistentData: () => {
+                    return {
+                        undoStack: resultRef.current?.undoStack,
+                        redoStack: resultRef.current?.redoStack
+                    }
+                },
+                restorePersistentData: (value: any) => {
+                    if (value) {
+                        setUndoStack(value.undoStack || []);
+                        setRedoStack(value.redoStack || []);
+                    }
+                }
+            })
+        }
+    }, [handleRef])
+
+    const onStateChange = useCallback((state: PianoRollState) => {
+        resultRef.current = state;
+    }, [])
+
+    return (
+        <PianoRoll
+            asset={asset?.song}
+            undoStack={undoStack}
+            redoStack={redoStack}
+            onStateChanged={onStateChange}
+        />
+    )
+}
\ No newline at end of file
diff --git a/webapp/src/components/pianoRoll/types.ts b/webapp/src/components/pianoRoll/types.ts
new file mode 100644
index 000000000000..c8a20fa2310b
--- /dev/null
+++ b/webapp/src/components/pianoRoll/types.ts
@@ -0,0 +1,391 @@
+export interface NoteEvent {
+    id: number;
+    start: number;
+    duration: number;
+    note: number;
+}
+
+export interface Track {
+    instrumentId: number;
+    events: NoteEvent[];
+    id: number;
+    nextId: number;
+    minOctave: number;
+    maxOctave: number;
+}
+
+export interface Song {
+    instruments: Instrument[];
+
+    tracks: Track[];
+    measures: number;
+    tempo: number;
+    nextId: number;
+}
+
+interface BaseInstrument {
+    name: string;
+    id: number;
+}
+
+export interface MelodicInstrument extends BaseInstrument {
+    instrument: pxt.assets.music.Instrument;
+}
+
+export interface DrumInstrument extends BaseInstrument {
+    drums: pxt.assets.music.DrumInstrument[];
+}
+
+export type Instrument = MelodicInstrument | DrumInstrument;
+
+export const lf = pxt.U.lf;
+
+export const NOTE_RANGES = [
+    {
+        name: lf("Treble"),
+        id: "treble",
+        minOctave: 3,
+        maxOctave: 5
+    },
+    {
+        name: lf("Bass"),
+        id: "bass",
+        minOctave: 0,
+        maxOctave: 3
+    },
+    {
+        name: lf("Full"),
+        id: "full",
+        minOctave: 0,
+        maxOctave: 7
+    }
+]
+
+export function getEmptySong(): Song {
+    const makecodeSong = pxt.assets.music.getEmptySong(4);
+
+    const instruments: Instrument[] = makecodeSong.tracks.map(t => {
+        if (t.drums) {
+            return {
+                id: t.id,
+                name: t.name,
+                minOctave: 0,
+                maxOctave: 1,
+                drums: t.drums
+            } as DrumInstrument;
+        }
+        else {
+            return {
+                id: t.id,
+                name: t.name,
+                instrument: t.instrument,
+                minOctave: 3,
+                maxOctave: 5
+            } as MelodicInstrument;
+        }
+    });
+
+    const song: Song = {
+        nextId: 1,
+        instruments,
+        tracks: [{
+            instrumentId: 0,
+            events: [],
+            nextId: 0,
+            id: 0,
+            minOctave: 3,
+            maxOctave: 5
+        }],
+        measures: 2,
+        tempo: 120
+    };
+
+    return song;
+}
+
+export function getNextNoteEvent(note: number, start: number, track: Track): NoteEvent | undefined {
+    return track.events.find(e => e.note === note && e.start > start);
+}
+
+export function getMaxDuration(note: number, start: number, track: Track, measures: number): number {
+    const nextEvent = getNextNoteEvent(note, start, track);
+    if (!nextEvent) return measures * 4 * 4 - start;
+
+    return nextEvent.start - start;
+}
+
+export function newNoteEvent(note: number, start: number, track: Track, isDrumTrack: boolean, measures: number): Track {
+    const newEvent: NoteEvent = {
+        id: track.nextId++,
+        note,
+        start,
+        duration: isDrumTrack ? 1 : Math.min(4, getMaxDuration(note, start, track, measures))
+    };
+
+    return insertNoteEvent(newEvent, track);
+}
+
+export function changeNoteEventDuration(id: number, duration: number, track: Track, measures: number): Track {
+    const eventIndex = track.events.findIndex(e => e.id === id);
+    if (eventIndex === -1) return track;
+
+    const event = track.events[eventIndex];
+    const maxDuration = getMaxDuration(event.note, event.start, track, measures);
+
+    const updatedEvent = {
+        ...event,
+        duration: Math.max(1, Math.min(duration, maxDuration))
+    };
+
+    return {
+        ...track,
+        events: [
+            ...track.events.slice(0, eventIndex),
+            updatedEvent,
+            ...track.events.slice(eventIndex + 1)
+        ]
+    };
+}
+
+function insertNoteEvent(newEvent: NoteEvent, track: Track): Track {
+    for (let i = 0; i < track.events.length; i++) {
+        if (track.events[i].start > newEvent.start) {
+            return {
+                ...track,
+                events: [
+                    ...track.events.slice(0, i),
+                    newEvent,
+                    ...track.events.slice(i)
+                ]
+            };
+        }
+    }
+
+    return {
+        ...track,
+        events: [...track.events, newEvent]
+    }
+}
+
+export function newTrack(instrumentId: number, song: Song): Song {
+    const newTrack: Track = {
+        instrumentId,
+        events: [],
+        id: song.nextId++,
+        nextId: 0,
+        minOctave: 3,
+        maxOctave: 5
+    };
+
+    return {
+        ...song,
+        tracks: [...song.tracks, newTrack]
+    };
+}
+
+export function updateTrack(updatedTrack: Track, song: Song): Song {
+    const trackIndex = song.tracks.findIndex(t => t.id === updatedTrack.id);
+    if (trackIndex === -1) return song;
+
+    return {
+        ...song,
+        tracks: [
+            ...song.tracks.slice(0, trackIndex),
+            updatedTrack,
+            ...song.tracks.slice(trackIndex + 1)
+        ]
+    };
+}
+
+export function changeTrackInstrument(trackId: number, instrumentId: number, song: Song): Song {
+    const trackIndex = song.tracks.findIndex(t => t.id === trackId);
+    const track = { ...song.tracks[trackIndex] };
+
+    const oldInstrument = song.instruments.find(i => i.id === track.instrumentId)!;
+    const newInstrument = song.instruments.find(i => i.id === instrumentId)!;
+
+    if (isDrumInstrument(oldInstrument) !== isDrumInstrument(newInstrument)) {
+        track.events = [];
+    }
+
+    track.instrumentId = instrumentId;
+
+    return updateTrack(track, song);
+}
+
+export function changeMeasures(measures: number, song: Song): Song {
+    return {
+        ...song,
+        measures,
+        tracks: song.tracks.map(track => ({
+            ...track,
+            events: track.events.filter(e => e.start < measures * 4 * 4).map(e => ({
+                ...e,
+                duration: Math.min(e.duration, measures * 4 * 4 - e.start)
+            }))
+        }))
+    }
+}
+
+export function changeOctaves(trackId: number, minOctave: number, maxOctave: number, song: Song): Song {
+    const trackIndex = song.tracks.findIndex(t => t.id === trackId);
+    const track = song.tracks[trackIndex];
+
+    return {
+        ...song,
+        tracks: [
+            ...song.tracks.slice(0, trackIndex),
+            {
+                ...track,
+                minOctave,
+                maxOctave,
+                events: track.events.filter(e => e.note >= minOctave * 12 && e.note < maxOctave * 12)
+            },
+            ...song.tracks.slice(trackIndex + 1)
+        ]
+    }
+}
+
+export function isDrumInstrument(instrument: Instrument): instrument is DrumInstrument {
+    return (instrument as DrumInstrument).drums !== undefined;
+}
+
+export function isMelodicInstrument(instrument: Instrument): instrument is MelodicInstrument {
+    return (instrument as MelodicInstrument).instrument !== undefined;
+}
+
+export function toPXTSong(song: Song): pxt.assets.music.Song {
+    return {
+        ticksPerBeat: 4,
+        beatsPerMeasure: 4,
+        beatsPerMinute: song.tempo,
+        measures: song.measures,
+        tracks: song.tracks.map(track => {
+            const instrument = song.instruments.find(i => i.id === track.instrumentId)!;
+
+            const pxtTrack: pxt.assets.music.Track = {
+                id: track.instrumentId,
+                name: instrument.name,
+                notes: track.events.map(e => ({
+                    startTick: e.start,
+                    endTick: (e.start + e.duration),
+                    notes: [{
+                        note: e.note,
+                        enharmonicSpelling: "normal"
+                    }]
+                })),
+                instrument: isDrumInstrument(instrument) ? undefined : (instrument as MelodicInstrument).instrument,
+                drums: isDrumInstrument(instrument) ? (instrument as DrumInstrument).drums : undefined
+            }
+
+            return pxtTrack;
+        })
+    }
+}
+
+export function fromPXTSong(pxtSong: pxt.assets.music.Song): Song {
+    const result = getEmptySong();
+
+    result.tracks = [];
+    result.nextId += 100;
+
+    const ticksPerSixteenth = pxtSong.ticksPerBeat / 4;
+
+    let instrumentIdCounter = 0;
+    for (const track of pxtSong.tracks) {
+        const newTrack: Track = {
+            id: track.id,
+            instrumentId: 0,
+            events: [],
+            nextId: 0,
+            minOctave: 3,
+            maxOctave: 5
+        }
+
+        const newNoteEvent = (note: number, startTick: number, endTick: number): void => {
+            const newEvent: NoteEvent = {
+                id: newTrack.nextId++,
+                note,
+                start: Math.round(startTick / ticksPerSixteenth),
+                duration: Math.round((endTick - startTick) / ticksPerSixteenth)
+            };
+
+            newTrack.events.push(newEvent);
+
+            const octave = Math.floor(note / 12);
+            newTrack.minOctave = Math.min(newTrack.minOctave, octave);
+            newTrack.maxOctave = Math.max(newTrack.maxOctave, octave);
+        };
+
+        if (track.drums?.length) {
+            newTrack.instrumentId = result.instruments.find(i => isDrumInstrument(i))!.id;
+        }
+        else {
+            const instrument = result.instruments.find(i => !isDrumInstrument(i) && instrumentsEqual(i.instrument, track.instrument));
+
+            if (instrument) newTrack.instrumentId = instrument.id;
+            else {
+                const newInstrument: MelodicInstrument = {
+                    id: result.nextId++,
+                    name: lf("Instrument {0}", instrumentIdCounter++),
+                    instrument: track.instrument,
+                };
+                result.instruments.push(newInstrument);
+                newTrack.instrumentId = newInstrument.id;
+            }
+        }
+
+        for (const event of track.notes) {
+            for (const note of event.notes) {
+                newNoteEvent(note.note, event.startTick, event.endTick);
+            }
+        }
+
+        const range = NOTE_RANGES.find(r => r.minOctave <= newTrack.minOctave && r.maxOctave >= newTrack.maxOctave);
+        if (range) {
+            newTrack.minOctave = range.minOctave;
+            newTrack.maxOctave = range.maxOctave;
+        }
+
+        if (newTrack.events.length > 0) {
+            result.tracks.push(newTrack);
+        }
+    }
+
+    return result;
+}
+
+function instrumentsEqual(a: pxt.assets.music.Instrument, b: pxt.assets.music.Instrument) {
+    if (a.waveform !== b.waveform) return false;
+    if (a.octave !== b.octave) return false;
+
+    if (!envelopesEqual(a.ampEnvelope, b.ampEnvelope)) return false;
+    if (!envelopesEqual(a.pitchEnvelope, b.pitchEnvelope)) return false;
+    if (!lfosEqual(a.ampLFO, b.ampLFO)) return false;
+    if (!lfosEqual(a.pitchLFO, b.pitchLFO)) return false;
+
+    return true;
+}
+
+function envelopesEqual(a: pxt.assets.music.Envelope | undefined, b: pxt.assets.music.Envelope | undefined) {
+    if (a === b) return true;
+    if (!a || !b) return false;
+
+    if (a.attack !== b.attack) return false;
+    if (a.decay !== b.decay) return false;
+    if (a.sustain !== b.sustain) return false;
+    if (a.release !== b.release) return false;
+    if (a.amplitude !== b.amplitude) return false;
+
+    return true;
+}
+
+function lfosEqual(a: pxt.assets.music.LFO | undefined, b: pxt.assets.music.LFO | undefined) {
+    if (a === b) return true;
+    if (!a || !b) return false;
+
+    if (a.frequency !== b.frequency) return false;
+    if (a.amplitude !== b.amplitude) return false;
+
+    return true;
+}
\ No newline at end of file
diff --git a/webapp/src/components/pianoRoll/utils.ts b/webapp/src/components/pianoRoll/utils.ts
new file mode 100644
index 000000000000..cde6bc8e7773
--- /dev/null
+++ b/webapp/src/components/pianoRoll/utils.ts
@@ -0,0 +1,62 @@
+import { PianoRollTheme } from "./context";
+
+export function isBlackKey(note: number) {
+    const noteInOctave = note % 12;
+    return [1, 3, 6, 8, 10].includes(noteInOctave);
+}
+
+export function getNoteName(note: number, includeOctave: boolean = true) {
+    const noteInOctave = note % 12;
+    const octave = Math.floor(note / 12);
+    const noteNames = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+    return includeOctave ? `${noteNames[noteInOctave]}${octave}` : noteNames[noteInOctave];
+}
+
+export function range(start: number, end: number) {
+    return Array.from({ length: end - start }, (_, i) => start + i);
+}
+
+export function noteWidth(theme: PianoRollTheme, duration: number) {
+    return (theme.octaveWidth / 16) * duration + 1;
+}
+
+export function noteLeft(theme: PianoRollTheme, start: number) {
+    return (theme.octaveWidth / 16) * start;
+}
+
+export function noteTop(theme: PianoRollTheme, note: number) {
+    return (maxNote(theme) - note) * noteHeight(theme);
+}
+
+export function noteHeight(theme: PianoRollTheme) {
+    return octaveHeight(theme) / 12;
+}
+
+export function octaveHeight(theme: PianoRollTheme) {
+    return theme.whiteKeyHeight * 7;
+}
+
+export function workspaceHeight(theme: PianoRollTheme) {
+    return (theme.maxOctave - theme.minOctave + 1) * octaveHeight(theme);
+}
+
+export function workspaceWidth(theme: PianoRollTheme) {
+    return theme.measures * theme.octaveWidth;
+}
+
+export function xToTick(theme: PianoRollTheme, x: number) {
+    return Math.floor(x / (theme.octaveWidth / 16));
+}
+
+export function yToNote(theme: PianoRollTheme, y: number) {
+    const note = maxNote(theme) - Math.floor(y / noteHeight(theme));
+    return note;
+}
+
+export function maxNote(theme: PianoRollTheme) {
+    return (theme.maxOctave + 1) * 12 - 1;
+}
+
+export function minNote(theme: PianoRollTheme) {
+    return theme.minOctave * 12;
+}
diff --git a/webapp/src/components/pianoRoll/workspaceBackground.tsx b/webapp/src/components/pianoRoll/workspaceBackground.tsx
new file mode 100644
index 000000000000..68d3b27c7921
--- /dev/null
+++ b/webapp/src/components/pianoRoll/workspaceBackground.tsx
@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import { usePianoRollTheme } from "./context"
+
+function createWorkspaceBackground(
+    octaveWidth: number,
+    octaveHeight: number,
+    borderColor: string = "#1e343d",
+    blackKeyColor: string = "#2e4c58",
+    backgroundColor: string = "#36535f"
+) {
+    return `
+<svg xmlns="http://www.w3.org/2000/svg" width="${octaveWidth}" height="${octaveHeight}">
+    <defs>
+        <pattern id="grid" width="${octaveWidth / 16}" height="${octaveHeight / 12}" patternUnits="userSpaceOnUse">
+            <rect width="1" height="${octaveHeight / 12}" fill="${borderColor}" />
+            <rect width="${octaveWidth / 16}" height="1" fill="${borderColor}" />
+        </pattern>
+        <pattern id="grid2" width="${octaveWidth / 4}" height="${octaveHeight / 12}" patternUnits="userSpaceOnUse">
+            <rect width="2" height="${octaveHeight / 12}" fill="${borderColor}" />
+        </pattern>
+    </defs>
+    <rect width="100%" height="100%" fill="${backgroundColor}" />
+    ${[1, 3, 5, 8, 10].map(i => `<rect x="0" y="${(octaveHeight / 12) * i}" width="100%" height="${octaveHeight / 12}" fill="${blackKeyColor}" />`).join("")}
+    <rect width="100%" height="100%" fill="url(#grid)" />
+    <rect width="100%" height="100%" fill="url(#grid2)" />
+    <rect x="0" y="0" width="4" height="100%" fill="${borderColor}" />
+</svg>
+`.trim().replace(/\s+/g, " ")
+}
+
+function getBackgroundCss(octaveWidth: number, whiteKeyHeight: number) {
+    return `url("data:image/svg+xml,${encodeURIComponent(createWorkspaceBackground(octaveWidth, 7 * whiteKeyHeight))}")`;
+}
+
+export function useWorkspaceBackground() {
+    const theme = usePianoRollTheme();
+    const [bg, setBg] = useState(getBackgroundCss(theme.octaveWidth, theme.whiteKeyHeight));
+
+    useEffect(() => {
+        setBg(getBackgroundCss(theme.octaveWidth, theme.whiteKeyHeight));
+    }, [theme.octaveWidth, theme.whiteKeyHeight])
+
+    return bg;
+}
\ No newline at end of file