diff --git a/docs/Editor.md b/docs/Editor.md
index f5ac74e..5eeddf8 100644
--- a/docs/Editor.md
+++ b/docs/Editor.md
@@ -1,30 +1,68 @@
 # Beatmap Editor
 
-Creating new songs is the heart of the Hues experience. The inbuilt editor makes it a breeze! To get to it, either hit your `e` key or click the settings cog, then hit `EDITOR`.
+Creating new songs is the heart of the Hues experience. The inbuilt editor makes
+it a breeze! To get to it, either hit your `e` key or click the settings cog,
+then hit `EDITOR`.
 
-Before you begin, you'll actually need a song to edit! You might be able to find good loops online, or you can make your own from a song you enjoy. The best way to make your own is using Audacity, detailed in the [MP3 guide](MP3%20Export.md).
+Before you begin, you'll actually need a song to edit! You might be able to find
+good loops online, or you can make your own from a song you enjoy. The best way
+to make your own is using Audacity, detailed in the [MP3
+guide](MP3%20Export.md).
 
-1. Load your loop using the `LOAD LOOP` button. If everything went well, it should start playing.
-2. In the `Title` box, enter the Artist - Song Name combination, e.g. "Madeon - Finale" (without quotes)
-3. Enter a source into the `Source` box if you have it - if you share your loop, it's nice to give other people a link to a high quality original.
+1. Load your loop using the `LOAD LOOP` button. If everything went well, it
+   should start playing.
+2. In the `Title` box, enter the Artist - Song Name combination, e.g. "Madeon -
+   Finale" (without quotes)
+3. Enter a source into the `Source` box if you have it - if you share your loop,
+   it's nice to give other people a link to a high quality original.
 
-Now your loop is playing! Adjust time with the `HALVE` and `DOUBLE` buttons until the loop's beats match up with your beatmap. If you're happy with it, you can click the lock icon next to the beat count, and entered beats will override previous beats instead of adding to the total.
+Now your loop is playing! Adjust time with the `HALVE` and `DOUBLE` buttons
+until the loop's beats match up with your beatmap. If you're happy with it, you
+can click the lock icon next to the beat count, and entered beats will override
+previous beats instead of adding to the total.
 
-From here, you can edit the rhythm. Check the Beat Glossary on the `INFO` tab to see what characters you can use.
+From here, you can edit the rhythm. Check the Beat Glossary on the `INFO` tab to
+see what characters you can use.
 
-A good way to start is lining up the bass or snare hits before moving on to another instrument, rather than trying to do everything at once. If you find yourself needing more space for notes, you can always use `DOUBLE`.
+A good way to start is lining up the bass or snare hits before moving on to
+another instrument, rather than trying to do everything at once. If you find
+yourself needing more space for notes, you can always use `DOUBLE`.
 
-Once you've made your loop, you can optionally add a Buildup and repeat the process to edit its map.
+Once you've made your loop, you can optionally add a Buildup and repeat the
+process to edit its map.
 
-When you're finished, **don't forget** to copy or save the XML to save your work! You can then put your song into a [respack](Respacks.md) and share it!
+When you're finished, **don't forget** to copy or save the XML to save your
+work! You can then put your song into a [respack](Respacks.md) and share it!
+
+### Banks
+For more complicated mapping, you may want to start combining effects in new and
+exciting ways! For that, use Banks. Every map has at least one bank, and you can
+add as many as you want. The beatmap visualiser will look at each bank in
+sequence and apply all the effects it sees.
+
+The most useful way to use banks is to change the way time based effects work.
+For example, a colour fade will fade until the next beat character. If you want
+to have a fade running at the same time as blurs, you can use Bank 1 to perform
+the fade, and Bank 2 to perform the blurs - the time calculations only take into
+account characters in the bank they start in.
 
 ### Editing tips  
-- **Right click on the beatmap to seek** to that position. Don't wait until the song repeats!
-- Use the buttons at the bottom left to slow the song down and make tricky sections easier to map.
-- Rewind to the start of the song or the start of the buildup with the arrows next to the `Buildup` and `Rhythm` labels.
-- If you need more room to edit a part, resize it with the handle in between the sections.
-- If your song isn't in 4/4 time, try changing the `New line at beat` setting so your bars line up.
+- **Right click on the beatmap to seek** to that position. Don't wait until the
+  song repeats!
+- Use the buttons at the bottom left to slow the song down and make tricky
+  sections easier to map.
+- Rewind to the start of the song or the start of the buildup with the arrows
+  next to the `Buildup` and `Rhythm` labels.
+- If you need more room to edit a part, resize it with the handle in between the
+  sections.
+- If your song isn't in 4/4 time, try changing the `New line at beat` setting so
+  your bars line up.
+- Use the beat buttons at the bottom of the editor to input non-typeable
+  characters like `→` or `¤`.
 
-One last advanced tip - if your buildup is crazy different from your rhythm and is proving hard to map, click the chain icon on the left to unlink the 2 sections. **Your song will no longer be compatible with the flash** but the buildup and rhythm can have separate map lengths. Let your creativity go nuts!
+One last advanced tip - if your buildup is crazy different from your rhythm and
+is proving hard to map, click the chain icon on the left to unlink the 2
+sections. **Your song will no longer be compatible with the flash** but the
+buildup and rhythm can have separate map lengths. Let your creativity go nuts!
 
-*This tutorial heavily based on [the original](http://0x40hues.blogspot.com/p/0x40-hues-creation-tutorial.html).*
\ No newline at end of file
+*This tutorial heavily based on [the original](http://0x40hues.blogspot.com/p/0x40-hues-creation-tutorial.html).*
diff --git a/docs/Respacks.md b/docs/Respacks.md
index 4f69cbd..5c6cf19 100644
--- a/docs/Respacks.md
+++ b/docs/Respacks.md
@@ -94,7 +94,9 @@ Name | Options | Default | Description
 title | Any text | `<no name>` | The full name of the song
 source | Any text | None | The source URL of the song, clickable in the UI
 rhythm (**required**) | Any text | None | The beatmap of the song. Create one in the [editor](Editor.md).
+rhythm2, rhythm3... (**web Hues only**) | Any text | None | Additional banks of beats to run in parallel.
 buildup | Filename minus extension | None | The filename of the buildup - the lead-in to the main loop.
 buildupRhythm | Any text | `.` for the entire build | A rhythm for the buildup, if any.
+buildupRhythm2, buildupRhythm3... (**web Hues only**) | Any text | None | Additional banks of buildup beats to run in parallel.
 independentBuild (**web Hues only**) | Anything | None | By default, the length of a buildup is set so the buildup beatmap runs at the same speed as the main loop. If this is set, the buildup's beatmap can be any length, and will run faster or slower than the main loop. Best set using the [editor](Editor.md).
 charsPerBeat (**web Hues only**) | Any number | None | For synchronising animations. Specifies how many characters of the beatmap make up a beat in the song. If an animation is playing and has a matching `beatsPerAnim` setting, the animation will be synchronised.
diff --git a/fonts/HuesExtra.eot b/fonts/HuesExtra.eot
index dcd70eb..543435c 100644
Binary files a/fonts/HuesExtra.eot and b/fonts/HuesExtra.eot differ
diff --git a/fonts/HuesExtra.svg b/fonts/HuesExtra.svg
index 7c0a429..80b3700 100644
--- a/fonts/HuesExtra.svg
+++ b/fonts/HuesExtra.svg
@@ -20,4 +20,6 @@
 <glyph unicode="&#xe90a;" glyph-name="forward3" d="M512 96v320l-320-320v704l320-320v320l352-352z" />
 <glyph unicode="&#xe90b;" glyph-name="first" d="M128 64v768h128v-352l320 320v-320l320 320v-704l-320 320v-320l-320 320v-352z" />
 <glyph unicode="&#xe90c;" glyph-name="copy" d="M128 576h512v-512h-512v512zM384 832v-128h384v-384h128v512h-512z" />
+<glyph unicode="&#xe90d;" glyph-name="eye" d="M512 768c-223.318 0-416.882-130.042-512-320 95.118-189.958 288.682-320 512-320 223.312 0 416.876 130.042 512 320-95.116 189.958-288.688 320-512 320zM764.45 598.296c60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-89.56 0-176.858 25.486-252.452 73.704-60.158 38.372-111.138 89.772-149.432 150.296 38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.86 7.3-9.96-27.328-15.41-56.822-15.41-87.596 0-141.382 114.616-256 256-256 141.382 0 256 114.618 256 256 0 30.774-5.452 60.268-15.408 87.598 3.978-2.378 7.938-4.802 11.858-7.302v0zM512 544c0-53.020-42.98-96-96-96s-96 42.98-96 96 42.98 96 96 96 96-42.982 96-96z" />
+<glyph unicode="&#xe90e;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
 </font></defs></svg>
\ No newline at end of file
diff --git a/fonts/HuesExtra.ttf b/fonts/HuesExtra.ttf
index 991c151..5192359 100644
Binary files a/fonts/HuesExtra.ttf and b/fonts/HuesExtra.ttf differ
diff --git a/fonts/HuesExtra.woff b/fonts/HuesExtra.woff
index e36c2b4..05a7219 100644
Binary files a/fonts/HuesExtra.woff and b/fonts/HuesExtra.woff differ
diff --git a/src/js/Components/HuesButton.svelte b/src/js/Components/HuesButton.svelte
index 8c6fb58..7584716 100644
--- a/src/js/Components/HuesButton.svelte
+++ b/src/js/Components/HuesButton.svelte
@@ -6,7 +6,10 @@
     // some situations require an opaque button
     export let opaque = false;
     export let title = "";
+    // maybe in the future I'll work out some way to style components properly
     export let nouppercase = false;
+    export let nopad = false;
+    export let noborder = false;
 </script>
 
 <button
@@ -16,7 +19,9 @@
     class:glow
     class:opaque
     class:nouppercase
-    class="{icon ? 'hues-icon' : ''}"
+    class:nopad
+    class:noborder
+    class:hues-icon={icon}
     {title}
 >
     <slot></slot>
@@ -42,6 +47,14 @@ button.nouppercase {
     text-transform: none;
 }
 
+button.nopad {
+    margin: 0;
+}
+
+button.noborder {
+    border: none;
+}
+
 button:hover {
     background: rgba(255,255,255, 0.5);
 }
diff --git a/src/js/HuesCore.ts b/src/js/HuesCore.ts
index 33bb7aa..bde16f4 100644
--- a/src/js/HuesCore.ts
+++ b/src/js/HuesCore.ts
@@ -8,7 +8,7 @@ import HuesWindow from './HuesWindow';
 import {HuesUI, RetroUI, WeedUI, ModernUI, XmasUI, HalloweenUI, MinimalUI} from './HuesUI';
 import Resources from './ResourceManager';
 import SoundManager from './SoundManager';
-import type { HuesImage, HuesSong } from './ResourcePack';
+import { HuesSong, type HuesImage } from './ResourcePack';
 import EventListener from './EventListener';
 import HuesInfo from './HuesInfo.svelte';
 
@@ -66,7 +66,7 @@ type CoreEvents = {
     settingsupdated : (() => void)[],
 }
 
-enum Effect {
+export enum Effect {
     BlurX,
     BlurY,
     TrippyIn,
@@ -88,10 +88,10 @@ enum Effect {
 }
 
 // since it's used in so many effects
-const ImageColour = [Effect.RandomColour, Effect.RandomImage];
+export const ImageColour = [Effect.RandomColour, Effect.RandomImage];
 
-const BeatTypes = {
-    ".": [],
+export const BeatTypes = {
+    ".": [] as Effect[],
     "X": [Effect.BlurY],
     "x": [Effect.BlurY, ...ImageColour],
     "O": [Effect.BlurX],
@@ -460,8 +460,9 @@ export class HuesCore extends EventListener<CoreEvents> {
         }
         for(let beatTime = this.beatIndex * this.getBeatLength(); beatTime < now;
                 beatTime = ++this.beatIndex * this.getBeatLength()) {
-            let beat = this.getBeat(this.beatIndex);
-            this.beater(beat);
+            for(const [bank, beat] of this.getBeats(this.beatIndex).entries()) {
+                this.beater(beat, bank);
+            }
         }
         this.callEventListeners("frame");
     }
@@ -477,22 +478,30 @@ export class HuesCore extends EventListener<CoreEvents> {
         }
 
         // We should sync up to how many inverts there are
-        let build = this.currentSong.build.chart;
-        let rhythm = this.currentSong.loop.chart || '';
-        let mapSoFar;
-        if(this.beatIndex < 0) {
-            // Clamp to 0 in case we've juuust started
-            mapSoFar = build!.slice(0, Math.max(this.beatIndex + build!.length, 0));
-        } else {
-            // If the rhythm has an odd number of inverts, don't reset because it
-            // alternates on each loop anyway
-            if((rhythm.match(/i|I/g)||[]).length % 2) {
-                return;
+        let invertCount = 0;
+        let rhythmInverts = 0;
+        for(let bank = 0; bank < this.currentSong.bankCount; bank++) {
+            const rhythm = this.currentSong.loop.banks[bank];
+            const build = this.currentSong.build?.banks[bank];
+            let mapSoFar;
+
+            if(this.beatIndex < 0) {
+                // Clamp to 0 in case we've juuust started
+                mapSoFar = build!.slice(0, Math.max(this.beatIndex + build!.length, 0));
+            } else {
+                rhythmInverts += (rhythm.match(/i|I/g)||[]).length % 2;
+
+                mapSoFar = (build ? build : "") + rhythm.slice(0, this.beatIndex);
             }
-            mapSoFar = (build ? build : "") + rhythm.slice(0, this.beatIndex);
+
+            invertCount += (mapSoFar.match(/i|I/g)||[]).length;
+        }
+        // If the rhythm has an odd number of inverts, don't reset because it
+        // alternates on each loop anyway
+        if(rhythmInverts % 2) {
+            return;
         }
         // If there's an odd amount of inverts thus far, invert our display
-        let invertCount = (mapSoFar.match(/i|I/g)||[]).length;
         this.setInvert(invertCount % 2);
     }
 
@@ -502,7 +511,7 @@ export class HuesCore extends EventListener<CoreEvents> {
         } else if(this.beatIndex < 0) {
             return this.beatIndex;
         } else {
-            return this.beatIndex % this.currentSong.loop.chart!.length;
+            return this.beatIndex % this.currentSong.loop.mapLen;
         }
     }
 
@@ -563,21 +572,12 @@ export class HuesCore extends EventListener<CoreEvents> {
         this.songIndex = index;
         this.currentSong = this.resourceManager.enabledSongs[this.songIndex];
         if (this.currentSong === undefined) {
-            this.currentSong = {
-                title:"None",
-                loop: {},
-                build: {},
-                source:"",
-                enabled:true,
-                charsPerBeat: null,
-                buildupPlayed: false,
-                independentBuild: false,
-            };
+            this.currentSong = new HuesSong("None");
         }
         console.log("Next song:", this.songIndex, this.currentSong);
         this.callEventListeners("newsong", this.currentSong);
         this.loopCount = 0;
-        if (this.currentSong.build.sound) {
+        if (this.currentSong.build?.sound) {
             switch (this.settings.playBuildups) {
             case "off":
                 this.currentSong.buildupPlayed = true;
@@ -604,16 +604,13 @@ export class HuesCore extends EventListener<CoreEvents> {
 
     updateBeatLength() {
         if(this.currentSong?.loop.sound) {
-            this.loopLength = this.soundManager.loop.length / this.currentSong.loop.chart!.length;
+            this.loopLength = this.soundManager.loop.length / this.currentSong.loop.mapLen;
         } else {
             this.loopLength = -1;
         }
 
-        if(this.currentSong?.build.sound) {
-            if (!this.currentSong.build.chart) {
-                this.currentSong.build.chart = ".";
-            }
-            this.buildLength = this.soundManager.build.length / this.currentSong.build.chart.length;
+        if(this.currentSong?.build?.sound) {
+            this.buildLength = this.soundManager.build.length / this.currentSong.build.mapLen;
         } else {
             this.buildLength = -1;
         }
@@ -630,7 +627,7 @@ export class HuesCore extends EventListener<CoreEvents> {
     fillBuildup() {
         // update loop length for flash style filling
         this.updateBeatLength();
-        if(this.currentSong?.build.sound) {
+        if(this.currentSong?.build?.sound) {
             if(this.currentSong.independentBuild) {
                 console.log("New behaviour - separate build/loop lengths");
                 // Do nothing
@@ -640,10 +637,15 @@ export class HuesCore extends EventListener<CoreEvents> {
                 if(buildBeats < 1) {
                     buildBeats = 1;
                 }
-                while (this.currentSong.build.chart!.length < buildBeats) {
-                    this.currentSong.build.chart += ".";
-                }
                 console.log("Buildup length:", buildBeats);
+
+                let builds = this.currentSong.build.banks;
+                for(let bank = 0; bank < builds.length; bank++) {
+                    while (builds[bank].length < buildBeats) {
+                        builds[bank] += ".";
+                    }
+                }
+                this.currentSong.build.checkConsistency();
             }
         }
         // update with a buildup of possibly different length
@@ -813,16 +815,26 @@ export class HuesCore extends EventListener<CoreEvents> {
         this.callEventListeners("newcolour", colour, isFade);
     }
 
-    getBeat(index: number) {
+    getBeat(index: number, bank: number) {
+        let song = this.currentSong!;
+        if(index < 0) {
+            return song.build!.banks[bank][song.build!.mapLen + index];
+        } else {
+            return song.loop.banks[bank][index % song.loop.mapLen];
+        }
+    }
+
+    // getBeat for all banks at once
+    getBeats(index: number): string[] {
         let song = this.currentSong!;
         if(index < 0) {
-            return song.build.chart![song.build.chart!.length+index];
+            return song.build!.beatsAt(song.build!.mapLen + index);
         } else {
-            return song.loop.chart![index % song.loop.chart!.length];
+            return song.loop.beatsAt(index % song.loop.mapLen);
         }
     }
 
-    beater(beat: string) {
+    beater(beat: string, bank: number) {
         this.callEventListeners("beat", this.getBeatString(), this.getBeatIndex());
 
         // any unknown beats always change image + colour
@@ -863,7 +875,7 @@ export class HuesCore extends EventListener<CoreEvents> {
                     this.randomColour();
                     break;
                 case Effect.ColourFade:
-                    this.renderer.doColourFade(this.timeToNextBeat());
+                    this.renderer.doColourFade(this.timeToNextBeat(bank));
                     this.randomColour(true);
                     break;
                 case Effect.RandomImage:
@@ -873,22 +885,22 @@ export class HuesCore extends EventListener<CoreEvents> {
                     break;
                 case Effect.SliceX:
                     // yes, SliceX is "y". I think I messed up. It renders right, don't worry
-                    this.renderer.doSlice(this.getBeatLength(), this.charsToNextBeat(), 'y');
+                    this.renderer.doSlice(this.getBeatLength(), this.charsToNextBeat(bank), 'y');
                     break;
                 case Effect.SliceY:
-                    this.renderer.doSlice(this.getBeatLength(), this.charsToNextBeat(), 'x');
+                    this.renderer.doSlice(this.getBeatLength(), this.charsToNextBeat(bank), 'x');
                     break;
                 case Effect.ShutterUp:
-                    this.renderer.doShutter('↑', this.getBeatLength(), this.charsToNextBeat());
+                    this.renderer.doShutter('↑', this.getBeatLength(), this.charsToNextBeat(bank));
                     break;
                 case Effect.ShutterDown:
-                    this.renderer.doShutter('↓', this.getBeatLength(), this.charsToNextBeat());
+                    this.renderer.doShutter('↓', this.getBeatLength(), this.charsToNextBeat(bank));
                     break;
                 case Effect.ShutterLeft:
-                    this.renderer.doShutter('←', this.getBeatLength(), this.charsToNextBeat());
+                    this.renderer.doShutter('←', this.getBeatLength(), this.charsToNextBeat(bank));
                     break;
                 case Effect.ShutterRight:
-                    this.renderer.doShutter('→', this.getBeatLength(), this.charsToNextBeat());
+                    this.renderer.doShutter('→', this.getBeatLength(), this.charsToNextBeat(bank));
                     break;
                 case Effect.InvertToggle:
                     this.toggleInvert();
@@ -902,37 +914,39 @@ export class HuesCore extends EventListener<CoreEvents> {
     }
 
 
-    charsToNextBeat() {
+    charsToNextBeat(bank: number) {
         // case: fade in build, not in rhythm. Must max out fade timer.
-        let maxSearch = this.currentSong!.loop.chart!.length;
+        let maxSearch = this.currentSong!.loop.mapLen;
         if(this.beatIndex < 0) {
             maxSearch -= this.beatIndex;
         }
         let nextBeat;
         for (nextBeat = 1; nextBeat <= maxSearch; nextBeat++) {
-            if (this.getBeat(nextBeat + this.beatIndex) != ".") {
+            if (this.getBeat(nextBeat + this.beatIndex, bank) != ".") {
                 break;
             }
         }
         return nextBeat;
     }
 
-    timeToNextBeat() {
-        return (this.charsToNextBeat() * this.getBeatLength()) / this.soundManager.playbackRate;
+    timeToNextBeat(bank: number) {
+        return (this.charsToNextBeat(bank) * this.getBeatLength()) / this.soundManager.playbackRate;
     }
 
+    // gets the best effort banks flattened down to a single string for display
     getBeatString(length = 256) {
         let beatString = "";
-        let song = this.currentSong;
-        if (song) {
+        if (this.currentSong) {
+            const build = this.currentSong.build?.beatString;
+            const loop = this.currentSong.loop.beatString;
+
             if(this.beatIndex < 0) {
-                beatString = song.build.chart!.slice(
-                        song.build.chart!.length + this.beatIndex);
+                beatString = build!.slice(build!.length + this.beatIndex);
             } else {
-                beatString = song.loop.chart!.slice(this.beatIndex % song.loop.chart!.length);
+                beatString = loop.slice(this.beatIndex % loop.length);
             }
             while (beatString.length < length) {
-                beatString += song.loop.chart;
+                beatString += loop;
             }
         }
 
diff --git a/src/js/HuesEditor.ts b/src/js/HuesEditor.ts
index 2e65ccd..6ffedfd 100644
--- a/src/js/HuesEditor.ts
+++ b/src/js/HuesEditor.ts
@@ -1,15 +1,15 @@
 import xmlbuilder from 'xmlbuilder';
 import * as zip from "@zip.js/zip.js";
 
-import { Respack, type HuesSong, type HuesSongSection } from './ResourcePack';
+import { HuesSong, Respack, type HuesSongSection } from './ResourcePack';
 import EditorMain from './HuesEditor/Main.svelte';
 import type { HuesCore } from './HuesCore';
 import type HuesWindow from './HuesWindow';
 import type EditorBoxSvelte from './HuesEditor/EditorBox.svelte';
 
 export interface EditorUndoRedo {
-    build?: string;
-    loop?: string;
+    builds?: string[];
+    loops?: string[];
     independentBuild: boolean;
     caret?: number;
     editor?: EditorBoxSvelte;
@@ -25,12 +25,17 @@ export class HuesEditor {
     // for storing respacks created with "new"
     respack?: Respack;
 
+    // to avoid recursion
+    midUpdate!: boolean;
+
     constructor(core: HuesCore, huesWin: HuesWindow) {
         this.core = core;
         if(!core.settings.enableWindow) {
             return;
         }
 
+        this.midUpdate = false;
+
         let container = huesWin.addTab("EDITOR");
         this.editor = new EditorMain({
             target: container,
@@ -45,6 +50,10 @@ export class HuesEditor {
         });
 
         core.addEventListener("newsong", (song) => {
+            if(this.midUpdate) {
+                return;
+            }
+
             this.song = song;
             this.editor.$set({
                 independentBuild: song?.independentBuild,
@@ -54,6 +63,7 @@ export class HuesEditor {
                 build: song?.build,
                 undoQueue: song?.undoQueue,
                 redoQueue: song?.redoQueue,
+                hiddenBanks: song?.hiddenBanks,
                 disabled: !song,
             });
         });
@@ -73,13 +83,19 @@ export class HuesEditor {
                 this.core.updateBeatLength();
                 // We may have to go backwards in time
                 this.core.recalcBeatIndex();
-                //this.core.callEventListeners("newsong", core.currentSong);
+
+                this.midUpdate = true;
+                this.core.callEventListeners("newsong", core.currentSong);
+                this.midUpdate = false;
             }
         });
 
-        this.editor.$on('loadbuildup', event => this.loadAudio('build'));
-        this.editor.$on('loadrhythm', event => this.loadAudio('loop'));
-        this.editor.$on('songremove', event => this.removeAudio());
+        this.editor.$on('loadbuildup', event => this.onLoadAudio('build', event.detail));
+        this.editor.$on('loadrhythm', event => this.onLoadAudio('loop', event.detail));
+        this.editor.$on('removebuildup', event => this.onRemoveAudio('build'));
+        this.editor.$on('removerhythm', event => this.onRemoveAudio('loop'));
+        this.editor.$on('addbank', event => this.addBank());
+        this.editor.$on('removebank', event => this.removeBank(event.detail));
         this.editor.$on('songnew', event => this.newSong());
         this.editor.$on('savezip', event => this.saveZIP());
         this.editor.$on('savexml', event => this.saveXML());
@@ -90,13 +106,16 @@ export class HuesEditor {
         return {'build':'loop', 'loop':'build'}[section] as SectionName;
     }
 
-    async loadAudio(section: SectionName) {
+    async onLoadAudio(section: SectionName, sectionData: HuesSongSection) {
         // If first load, this makes fresh, gets the core synced up
         this.newSong(this.song);
 
+        // brand new section may be added (eg: new build, fresh loop)
+        this.editor.$set({[section]: sectionData});
+
         // Have we just added a build to a song with a rhythm, or vice versa?
         // If so, link their lengths
-        let newlyLinked = !this.song![section].sound && !!this.song![this.other(section)].sound;
+        let newlyLinked = !this.song![section]?.sound && !!this.song![this.other(section)]?.sound;
 
         // Do we have a loop to play?
         if(this.song!.loop.sound) {
@@ -112,28 +131,48 @@ export class HuesEditor {
         }
     }
 
-    removeAudio() {
+    onRemoveAudio(section: SectionName) {
         // Is the loop playable?
-        if(this.song?.loop.sound) {
-            this.core.soundManager.playSong(this.song, true, true);
+        if(this.song!.loop.sound) {
+            this.core.soundManager.playSong(this.song!, true, true);
         } else {
             this.core.soundManager.stop();
         }
+
+        if(section == "build") {
+            this.editor.$set({build: undefined});
+        }
+    }
+
+    addBank() {
+        if(this.song) {
+            this.song.addBank();
+            // resync UI
+            this.editor.$set({
+                loop: this.song.loop,
+                build: this.song.build,
+                hiddenBanks: this.song.hiddenBanks,
+            });
+        }
+    }
+
+    removeBank(index: number) {
+        if(this.song) {
+            this.song.removeBank(index);
+            // resync UI
+            this.editor.$set({
+                loop: this.song.loop,
+                build: this.song.build,
+                hiddenBanks: this.song.hiddenBanks,
+            });
+        }
     }
 
     newSong(song?: HuesSong) {
         if(!song) {
-            song = {
-                title:"Title",
-                loop: {},
-                build: {},
-                source:"",
-                enabled:true,
-                charsPerBeat: null,
-                // Because new songs are empty
-                independentBuild: true,
-                buildupPlayed: false,
-            };
+            song = new HuesSong("Title");
+            // editor-created charts are a little more vibrant
+            song.loop.banks = ["x...o...x...o..."];
            if(!this.respack) {
                this.respack = new Respack();
                this.respack.name = "Editor Respack";
@@ -161,7 +200,7 @@ export class HuesEditor {
         // Force independent build if only 1 source is present
 
         // Effectively `buildup ^ loop` - does only 1 exist?
-        let hasBuild = !!this.song?.build.sound;
+        let hasBuild = !!this.song?.build?.sound;
         let hasLoop = !!this.song?.loop.sound;
         if(hasBuild != hasLoop) {
             this.setIndependentBuild(true);
@@ -181,15 +220,24 @@ export class HuesEditor {
         if(!root) {
             root = xmlbuilder.begin();
         }
-        xml = root.ele('song', {'name': this.song.loop.fname});
+        xml = root.ele('song', {'name': this.song.loop.basename});
         xml.ele('title', this.song.title);
         if(this.song.source) {
             xml.ele('source', this.song.source);
         }
-        xml.ele('rhythm', this.song.loop.chart);
-        if(this.song.build.sound) {
-            xml.ele('buildup', this.song.build.fname);
-            xml.ele('buildupRhythm', this.song.build.chart);
+        xml.ele('rhythm', this.song.loop.banks[0]);
+        for(let bank = 1; bank < this.song.loop.banks.length; bank++) {
+            // rhythm2, rhythm3 etc
+            xml.ele('rhythm' + (bank+1), this.song.loop.banks[bank]);
+        }
+
+        if(this.song.build?.sound) {
+            xml.ele('buildup', this.song.build.basename);
+            xml.ele('buildupRhythm', this.song.build.banks[0]);
+            for(let bank = 1; bank < this.song.build.banks.length; bank++) {
+                // buildupRhythm2, buildupRhythm3 etc
+                xml.ele('buildupRhythm' + (bank+1), this.song.build.banks[bank]);
+            }
             if(this.song.independentBuild) {
                 xml.ele('independentBuild', 'true');
             }
@@ -211,12 +259,12 @@ export class HuesEditor {
         document.body.removeChild(element);
     }
 
-    async addSectionToZip(zipWriter: zip.ZipWriter, section: HuesSongSection) {
-        if(!section.sound) {
+    async addSectionToZip(zipWriter: zip.ZipWriter, section?: HuesSongSection) {
+        if(!section?.sound) {
             return;
         }
         const u8 = new Uint8Array(section.sound);
-        await zipWriter.add(section.nameWithExt!, new zip.Uint8ArrayReader(u8));
+        await zipWriter.add(section.filename!, new zip.Uint8ArrayReader(u8));
     }
 
     async saveZIP() {
@@ -234,7 +282,7 @@ export class HuesEditor {
 
         this.downloadURI(
             dataURI,
-            "0x40Hues - " + this.song!.loop.fname + ".zip"
+            "0x40Hues - " + this.song!.loop.basename + ".zip"
         );
 
         window.onbeforeunload = null;
@@ -248,7 +296,7 @@ export class HuesEditor {
 
         this.downloadURI(
             'data:text/plain;charset=utf-8,' + encodeURIComponent(result),
-            "0x40Hues - " + this.song!.loop.fname + ".xml"
+            "0x40Hues - " + this.song!.loop.basename + ".xml"
         );
 
         window.onbeforeunload = null;
diff --git a/src/js/HuesEditor/EditorBox.svelte b/src/js/HuesEditor/EditorBox.svelte
index 15c6c68..110d0bc 100644
--- a/src/js/HuesEditor/EditorBox.svelte
+++ b/src/js/HuesEditor/EditorBox.svelte
@@ -1,35 +1,40 @@
 <script lang="ts">
     import HuesButton from '../Components/HuesButton.svelte';
+    import { HuesSongSection } from '../ResourcePack';
+    import { HuesIcon } from '../HuesIcon';
+    import type SoundManager from '../SoundManager';
 
     import { createEventDispatcher, tick } from 'svelte';
 
-    import type { HuesSongSection } from '../ResourcePack';
-    import type SoundManager from '../SoundManager';
-
     const dispatch = createEventDispatcher();
 
     export let title: string;
-    export let section: HuesSongSection;
+    export let section: HuesSongSection | undefined;
     export let showHelp = false;
     export let newLineAtBeat: number;
     export let beatIndex: number | null;
     export let soundManager: SoundManager;
 
-    export let editBox: HTMLDivElement;
-    export let header: HTMLDivElement;
+    export let editBox: HTMLDivElement | undefined = undefined;
+    export let header: HTMLDivElement | undefined = undefined;
 
     let fileInput: HTMLInputElement;
-    let editDiv: HTMLDivElement;
+    let editBanks: HTMLDivElement[] = [];
 
     export let locked = false;
-    export let caret: number = 0;;
+    export let caret: number | undefined = undefined;
+    export let hiddenBanks: boolean[] = [];
+    let bankFocus = 0;
+    let bankHover = 0;
+
+    $: activeBanks = section?.banks
+        .map((bank, i): [HTMLDivElement, number] => [editBanks[i], i])
+        .filter((bankI, i) => !hiddenBanks[i]);
 
     let toggleLock = () => {
         locked = !locked;
     };
 
-    $: valid = section && section.chart !== undefined;
-
     let oldLen: number;
 
     const getCaret = () => {
@@ -39,31 +44,32 @@
         // through all the children to get to our actual selection
         let caret = 0;
         const sel = window.getSelection();
-        if(sel?.rangeCount) {
+        if (sel?.rangeCount) {
           const range = sel.getRangeAt(0);
-          for(let child of editDiv.childNodes) {
-              if(range.commonAncestorContainer == child) {
+          for(let child of editBanks[bankFocus].childNodes) {
+              if (range.commonAncestorContainer == child) {
                   caret += range.endOffset;
                 return caret;
-              } else if(child.textContent !== null) {
-                  caret += child.textContent.length;
+              } else {
+                  caret += child.textContent?.length || 0;
               }
           }
         }
-        return null;
+        return undefined;
     };
 
-    export const setCaret = (newCaret: number) => {
-        if(!section.chart) {
-            return;
+    export const setCaret = (newCaret: number, el?: HTMLDivElement) => {
+        if(el === undefined) {
+            el = editBanks[bankFocus];
+        } else {
+            bankFocus = editBanks.indexOf(el);
         }
-
-        caret = Math.min(newCaret, section.chart.length);
+        caret = Math.min(newCaret, section!.mapLen);
         let sel = window.getSelection();
         // need to get the text out of the div
-        const text = [...editDiv.childNodes].find(child => child.nodeType === Node.TEXT_NODE);
+        const text = [...el.childNodes].find(child => child.nodeType === Node.TEXT_NODE);
         // I mean this shouldn't ever fail, right?
-        if(text !== undefined && sel) {
+        if(text && sel) {
             sel.collapse(text, caret);
         }
     }
@@ -71,61 +77,113 @@
     // we could fake the keyboard input with js... or just do this since we know
     // how we handle inputs
     export const fakeInput = async (str: string) => {
-        if(!section.chart) {
-            return;
+        saveLen(); // beforeinput
+
+        let b = section!.banks[bankFocus];
+
+        // if a range is selected, we need to delete the range first or the
+        // caret is going to be wrong
+        const sel = window.getSelection();
+        if(sel?.rangeCount) {
+            const range = sel.getRangeAt(0);
+            const rLen = range.endOffset - range.startOffset;
+            if(rLen > 1) {
+                b = b.slice(0, range.startOffset) + b.slice(range.endOffset);
+                caret = range.startOffset;
+            }
         }
 
-        saveLen(); // beforeinput
-        section.chart = section.chart.slice(0, caret) + str + section.chart.slice(caret) // modify chart
-        setCaret(caret + str.length); // handleInput expects the editor to have focus
+        section!.banks[bankFocus] = b.slice(0, caret) + str + b.slice(caret); // modify chart
+        const newCaret = caret! + str.length;
+        await tick();
+        setCaret(newCaret); // handleInput expects the editor to have focus
         await handleInput();
     };
 
     let saveLen = () => {
-        oldLen = section.chart!.length;
+        oldLen = section!.mapLen;
         dispatch('beforeinput');
     }
 
     const confirmLeave = () => "Unsaved beatmap - leave anyway?";
 
-    let handleInput = async () => {
-        if(section.chart!.length == 0) {
-            section.chart = '.';
+    let deleteAtCaret = (bank: number, count: number, caret: number) => {
+        const b = section!.banks[bank];
+        section!.banks[bank] = b.slice(0, caret) + b.slice(caret! + count);
+    }
+
+    let insertAtCaret = (bank: number, count: number, caret: number) => {
+        const b = section!.banks[bank];
+        const extra = '.'.repeat(count);
+        section!.banks[bank] = b.slice(0,caret) + extra + b.slice(caret);
+    }
+
+    let matchLenAtCaret = (bank: number, need: number, caret: number) => {
+        const have = section!.banks[bank].length;
+        if(have < need) {
+            insertAtCaret(bank, need - have, caret);
+        } else if(need < have) {
+            deleteAtCaret(bank, have - need, caret);
         }
+    }
 
-        caret = getCaret()!;
+    let handleInput = async () => {
+        caret = getCaret();
 
-        const newLen = section.chart!.length;
-        if(locked && oldLen != newLen) {
+        const newLen = section!.banks[bankFocus].length;
+        if(locked && oldLen != newLen && caret !== undefined) {
             // by adding or removing as many extra characters as required,
             // starting from the caret, this even works for pastes
             if(newLen > oldLen) {
                 // delete extra
                 caret = Math.min(oldLen, caret);
-                const extra = newLen - oldLen;
-                section.chart = section.chart!.slice(0, caret) + section.chart!.slice(caret + extra);
+                deleteAtCaret(bankFocus, newLen - oldLen, caret);
             } else {
                 // add extra
-                const extra = '.'.repeat(oldLen - newLen);
-                section.chart = section.chart!.slice(0,caret) + extra + section.chart!.slice(caret);
+                insertAtCaret(bankFocus, oldLen - newLen, caret);
             }
 
             await tick();
             setCaret(caret);
+        } else if(!locked && oldLen != newLen && caret !== undefined) {
+            // extend/shrink any other banks as required at the insertion caret
+            for(let i = 0; i < section!.banks.length; i++) {
+                if(i == bankFocus) {
+                    continue;
+                }
+
+                if(newLen > oldLen) {
+                    matchLenAtCaret(i, newLen, Math.max(0, caret - (newLen - oldLen)));
+                } else {
+                    matchLenAtCaret(i, newLen, Math.max(0, caret));
+                }
+            }
         }
 
         window.onbeforeunload = confirmLeave;
         dispatch('afterinput');
     };
 
-    const getCaretFromMouseEvent = (event: MouseEvent) => {
+    const getCaretFromMouseEvent = (event: MouseEvent): [number, HTMLDivElement?] => {
         // We cannot just get the caret on the right click event, because in
         // Firefox, the first right click just focuses the textbox without
         // actually moving the caret. Only subsequent clicks will move it. So
         // instead, we get this hacky nonsense.
 
+        // Also, for multi-bank, the divs all fight for focus (and the top one
+        // always wins), so this is required.
+
+        // for all but the hover event, at least 1 bank is active and valid,
+        // because otherwise the events wouldn't arrive at all. So we check just
+        // for this.
+        if(!activeBanks?.length) {
+            return [0, undefined];
+        }
+
         // http://stackoverflow.com/a/10816667
-        let el: HTMLElement | null = event.target as HTMLElement;
+        // find where the cursor is relative to the editBox
+        //let el = event.target as HTMLElement;
+        let el = editBox as HTMLElement;
         let x = 0;
         let y = 0;
 
@@ -138,27 +196,40 @@
         x = event.clientX - x;
         y = event.clientY - y;
 
-        const fontWidth = editDiv.clientWidth / newLineAtBeat;
-        const lines = Math.ceil(editDiv.textContent!.length / newLineAtBeat);
-        const fontHeight = editDiv.clientHeight / lines;
+        const fontWidth = activeBanks![0][0].clientWidth / newLineAtBeat;
+        const bankCount = activeBanks!.length;
+        const lines = Math.ceil(section!.mapLen / newLineAtBeat) * bankCount;
+        const fontHeight = activeBanks![0][0].clientHeight / lines;
 
         x = Math.floor(x / fontWidth);
         y = Math.floor(y / fontHeight);
 
-        return x + (y * newLineAtBeat);
+        let targetEl = activeBanks![y % bankCount][0];
+        y = Math.floor(y / bankCount);
+
+        return [x + (y * newLineAtBeat), targetEl];
     }
 
     let seek = (event: MouseEvent) => {
-        const off = getCaretFromMouseEvent(event);
-        setCaret(off);
-        dispatch('seek', off / section.chart!.length);
+        const [off, el] = getCaretFromMouseEvent(event);
+        setCaret(off, el);
+        dispatch('seek', off / section!.mapLen);
         event.preventDefault();
     };
 
-    let updateCaret = () => {
-        const off = getCaret();
-        if(off !== null) {
-            caret = off;
+    let click = (event: MouseEvent) => {
+        const [off, el] = getCaretFromMouseEvent(event);
+        caret = off;
+
+        bankFocus = editBanks.indexOf(el!);
+
+        event.stopPropagation();
+    }
+
+    let hover = (event: MouseEvent) => {
+        const [off, el] = getCaretFromMouseEvent(event);
+        if(el !== undefined) {
+            bankHover = editBanks.indexOf(el);
         }
     }
 
@@ -172,7 +243,10 @@
 
     let handleArrows = (event: KeyboardEvent) => {
         if(['ArrowLeft','ArrowRight','ArrowUp','ArrowDown'].includes(event.key)) {
-            updateCaret();
+            const off = getCaret();
+            if(off !== undefined) {
+                caret = off;
+            }
         }
     };
 
@@ -181,21 +255,19 @@
     let handlePaste = (event: ClipboardEvent) => {
         // cancel paste
         event.preventDefault();
-
-        if(!event.clipboardData) {
-            return;
-        }
+        event.stopPropagation();
 
         // get text representation of clipboard
-        let text = event.clipboardData.getData('text/plain');
+        let text = event.clipboardData?.getData('text/plain');
 
-        // insert text manually
-        // this is deprecated but keeps working and no alternative, so whatever
-        document.execCommand("insertText", false, text);
+        if(text) {
+            // insert text manually
+            fakeInput(text);
+        }
     }
 
     let loadSong = async () => {
-        if(!fileInput.files?.length) {
+        if(!fileInput.files || fileInput.files.length < 1) {
             return;
         }
 
@@ -204,7 +276,7 @@
         try {
             let buffer = await file.arrayBuffer();
             // Is this buffer even decodable?
-            testSong = {sound: buffer};
+            testSong = new HuesSongSection(undefined, buffer);
             await soundManager.loadBuffer(testSong);
         } catch(err) {
             console.error(err);
@@ -213,38 +285,36 @@
         }
 
         // if there isn't actually any song, force one to be created
+        let newSection;
         if(section === undefined) {
-            dispatch('songnew');
-            await tick();
+            newSection = new HuesSongSection();
+            // editor-created charts are a little more vibrant
+            newSection.banks = ["x...o...x...o..."];
+        } else {
+            newSection = section;
         }
 
         // Save filename for XML export
-        section.fname = file.name.replace(/\.[^/.]+$/, "");
-        section.nameWithExt = file.name;
+        newSection.filename = file.name;
         // the original buffer is lost to the worker, so we take it from the song
-        section.sound = testSong.sound;
-
-        // make empty map if needed
-        if(!section.chart) {
-            section.chart = "x...o...x...o...";
-        }
+        newSection.sound = testSong.sound;
 
-        dispatch('songload');
+        dispatch('songload', newSection);
     }
 
     let removeSong = () => {
-        section.chart = undefined;
-        section.fname = undefined;
-        section.nameWithExt = undefined;
-        section.sound = undefined;
+        section!.banks = ['.'];
+        section!.filename = undefined;
+        section!.sound = undefined;
 
         dispatch('songremove');
     }
 
     let copyPretty = () => {
+        // TODO: copy all banks?
         // http://stackoverflow.com/a/27012001
         let regex = new RegExp("(.{" + newLineAtBeat + "})", "g");
-        let text = section.chart!.replace(regex, "$1\n");
+        let text = section!.banks[bankFocus].replace(regex, "$1\n");
 
         let textArea = document.createElement("textarea");
         textArea.className = "copybox";
@@ -254,6 +324,11 @@
         document.execCommand('copy');
         document.body.removeChild(textArea);
     }
+
+    $: styleForMap = (i: number) => {
+        // the crazy top calc is because the char is centered in the line-height
+        return `width:${newLineAtBeat}ch; top: calc(-${activeBanks!.length-1}ch/2 + ${i}ch); line-height: ${activeBanks!.length}ch;`;
+    }
 </script>
 
 <!-- So sibling editors that are linked can be modified together nicely -->
@@ -265,27 +340,27 @@
     <!-- Filthy width hacks to align labels -->
     <span style="min-width: 7ch;">{@html title}</span>
     <!-- |<< (seek back) -->
-    <HuesButton icon disabled={!valid} on:click={() => dispatch("rewind")}>&#xe90b;</HuesButton>
-    <span class="beat-count">{valid ? section.chart.length : 0} beats</span>
+    <HuesButton icon disabled={!section?.sound} on:click={() => dispatch("rewind")}>{@html HuesIcon.REWIND}</HuesButton>
+    <span class="beat-count">{section ? section.mapLen : 0} beats</span>
     <!-- Lock icon -->
     <HuesButton
         icon
         title="{locked ? "Unlock" : "Lock"} beat count"
         on:click={toggleLock}
-        disabled={!valid}
+        disabled={!section?.sound}
     >
-        {@html locked ? "&#xe906;" : "&#xe907;"}
+        {@html locked ? HuesIcon.LOCKED : HuesIcon.UNLOCKED}
     </HuesButton>
     <!-- Copy icon -->
-    <HuesButton icon disabled={!valid} title="Copy formatted beatmap" on:click={() => copyPretty()}>&#xe90c;</HuesButton>
+    <HuesButton icon disabled={!section?.sound} title="Copy formatted beatmap" on:click={() => copyPretty()}>{@html HuesIcon.COPY}</HuesButton>
 
     <!-- spacer -->
     <div/>
 
-    <HuesButton on:click={() => dispatch('halve')} disabled={!valid || locked || section.chart.length <= 1}>
+    <HuesButton on:click={() => dispatch('halve')} disabled={!section?.sound || locked || section.mapLen <= 1}>
         Halve
     </HuesButton>
-    <HuesButton on:click={() => dispatch('double')} disabled={!valid || locked}>
+    <HuesButton on:click={() => dispatch('double')} disabled={!section?.sound || locked}>
         Double
     </HuesButton>
     <input
@@ -299,11 +374,11 @@
         <!-- Filthy width hacks to align labels -->
         <div style="min-width: 12ch;">Load {title}</div>
     </HuesButton>
-    <HuesButton on:click={removeSong} disabled={!valid}>Remove</HuesButton>
+    <HuesButton on:click={removeSong} disabled={!section?.sound}>Remove</HuesButton>
 </div>
 
-<div class="edit-box" bind:this={editBox}>
-    {#if showHelp && !valid}
+<div class="edit-box" bind:this={editBox} on:mousemove={hover}>
+    {#if showHelp && !section?.sound}
         <div class="beat-hilight">
 Click [LOAD RHYTHM] to load a loop!
 OGG,or LAME encoded MP3s work best.
@@ -319,33 +394,49 @@ and easy inclusion into a Resource Pack!
 Click [HELP] for advanced techniques and more
 information.
         </div>
-    {:else if !valid}
+    {:else if !section?.sound}
         <div class="beat-hilight">
             [none]
         </div>
-    {:else if beatIndex !== null && beatIndex >= 0}
-        <div class="beat-hilight" style="width:{newLineAtBeat}ch;">
-            {@html ' '.repeat(beatIndex) + '&block;'}
-        </div>
+    <!-- don't need `&& activeBanks` but type checker can't unravel it -->
+    {:else if beatIndex !== null && beatIndex >= 0 && activeBanks}
+        {#each activeBanks as _, i}
+            <div class="beat-hilight" style="{styleForMap(i)}">
+                {@html ' '.repeat(beatIndex) + '&block;'}
+            </div>
+        {/each}
     {/if}
-    {#if valid}
+    {#if section?.sound && activeBanks}
+        {#if activeBanks.length > 1}
+            <!-- This should be as simple as a background-color, but it selects the
+                entire bounding box instead of just the text itself, and using a
+                span breaks the text wrapping -->
+            <div class="beat-focus" style="{styleForMap(bankFocus)}">
+                {@html '&block;'.repeat(section.mapLen)}
+            </div>
+        {/if}
         <!-- Note the order of saveLen/bind/handleInput - it matters -->
-        <div
-            bind:this={editDiv}
-            class="beatmap"
-            contenteditable="true"
-            spellcheck="false"
-            style="width:{newLineAtBeat}ch;"
-            on:keydown={banEnter}
-            on:keyup={handleArrows}
-            on:paste={handlePaste}
-            on:input={saveLen}
-            bind:textContent={section.chart}
-            on:input={handleInput}
-            on:contextmenu={seek}
-            on:click={updateCaret}
-            on:focus={() => dispatch('focus')}
-        />
+        {#each activeBanks as [_, bankI], i}
+            <div
+                bind:this={editBanks[bankI]}
+                class:underline={activeBanks.length > 1 && i == activeBanks.length - 1}
+                class:hover={bankI == bankHover}
+                contenteditable
+                spellcheck="false"
+                class="beatmap"
+                style="{styleForMap(i)}"
+                on:keydown={banEnter}
+                on:keyup={handleArrows}
+                on:paste={handlePaste}
+                on:input={saveLen}
+                bind:textContent={section.banks[bankI]}
+                on:input={handleInput}
+                on:contextmenu={seek}
+                on:mousedown={click}
+                on:click={click}
+                on:focus={() => dispatch('focus')}
+            />
+        {/each}
     {/if}
 </div>
 
@@ -382,7 +473,8 @@ information.
 }
 
 .beatmap {
-    position: relative;
+    position: absolute;
+    pointer-events: none;
 }
 
 .beatmap:focus {
@@ -390,8 +482,22 @@ information.
     outline: none;
 }
 
+.beatmap.hover {
+    pointer-events: inherit;
+}
+
+.beat-focus {
+    position: absolute;
+    color: rgba(127,127,127,0.2);
+}
+
 .beat-hilight {
+    overflow-anchor: none;
     position: absolute;
     color: rgba(127,127,127,0.8);
 }
+
+.underline {
+    text-decoration: underline;
+}
 </style>
diff --git a/src/js/HuesEditor/Main.svelte b/src/js/HuesEditor/Main.svelte
index da10fdf..fbedec7 100644
--- a/src/js/HuesEditor/Main.svelte
+++ b/src/js/HuesEditor/Main.svelte
@@ -11,6 +11,7 @@
     import type SoundManager from '../SoundManager';
     import type { HuesSongSection } from '../ResourcePack';
     import type { EditorUndoRedo } from '../HuesEditor';
+    import { HuesIcon } from '../HuesIcon';
 
     export let soundManager: SoundManager;
     export let huesRoot: HTMLElement; // required for size calculations
@@ -24,15 +25,16 @@
     export let disabled = true;
 
     // mirrored props from the song object, to make binding/events work nicely
-    export let independentBuild: boolean;
-    export let title: string;
-    export let source: string;
-    export let loop: HuesSongSection;
-    export let build: HuesSongSection;
-    export let undoQueue: EditorUndoRedo[];
-    export let redoQueue: EditorUndoRedo[];
-    export let songLoadPromise = Promise.reject();
-    export let locked: boolean; // link these together
+    export let independentBuild: boolean = false;
+    export let title: string = "";
+    export let source: string = "";
+    export let loop: HuesSongSection | undefined = undefined;
+    export let build: HuesSongSection | undefined = undefined;
+    export let undoQueue: EditorUndoRedo[] = [];
+    export let redoQueue: EditorUndoRedo[] = [];
+    export let hiddenBanks: boolean[] = [];
+    export let songLoadPromise: Promise<void> = Promise.reject();
+    export let locked: boolean = false; // link these together
 
     // and until we convert the rest of the app to svelte, this lets consumers
     // update their own state more simply
@@ -44,6 +46,7 @@
             source: source,
             loop: loop,
             build: build,
+            hiddenBanks: hiddenBanks,
         })
     };
 
@@ -99,10 +102,10 @@
     let statusMsg = "";
     let statusAnim = false;
 
-    $: buildIndex = (beatIndex < 0 && build.chart) ? build.chart.length + beatIndex : null;
+    $: buildIndex = (beatIndex < 0 && build) ? build.mapLen + beatIndex : null;
     $: loopIndex = beatIndex >= 0 ? beatIndex : null;
-    $: loopLen = loop?.chart ? loop.chart.length : NaN;
-    $: hasBoth = !!build?.chart && !!loop?.chart;
+    $: loopLen = loop ? loop.mapLen : NaN;
+    $: hasBoth = build && loop;
     $: editorFocussed = editorFocus !== null;
 
     let newLineAtBeat = 32;
@@ -123,8 +126,13 @@
         }
 
         // if you start saving more props, add them here
-        build.chart = props.build;
-        loop.chart = props.loop;
+        if(build && props.builds) {
+            build.banks = props.builds;
+        }
+        if(loop && props.loops) {
+            loop.banks = props.loops;
+        }
+
         independentBuild = props.independentBuild;
         if(props.caret !== undefined) {
             await tick();
@@ -132,12 +140,19 @@
         }
     };
 
-    const undoRedoSnapshot = () => {
-        return {
-            build: build.chart,
-            loop: loop.chart,
+    const undoRedoSnapshot = (): EditorUndoRedo => {
+        let ret: EditorUndoRedo = {
             independentBuild: independentBuild,
         };
+
+        if(build) {
+            ret.builds = [...build.banks];
+        }
+        if(loop) {
+            ret.loops = [...loop.banks];
+        }
+
+        return ret;
     }
 
     const undo = () => {
@@ -195,39 +210,53 @@
 
     // subtract or add '.' until the child is the same beat ratio as the parent
     const resyncEditorLengths = (parent: EditorBox) => {
+        parent.section?.recalcBeatString();
+
         if(independentBuild || !hasBoth) {
             return;
         }
 
         let child = otherEditor(parent);
 
-        const secPerBeat = soundLen(parent) / parent.section.chart!.length;
-        let childBeats = Math.round(soundLen(child) / secPerBeat);
-        // charts must have at least 1 character
-        childBeats = Math.max(childBeats, 1);
-        if(childBeats > child.section.chart!.length) {
-            const extra = childBeats - child.section.chart!.length;
-            child.section.chart += '.'.repeat(extra);
-        } else if(childBeats < child.section.chart!.length) {
-            child.section.chart = child.section.chart!.slice(0, childBeats);
-        } else {
+        let changed = false;
+        for(let i = 0; i < parent.section!.banks.length; i++) {
+            const secPerBeat = soundLen(parent) / parent.section!.banks[i].length;
+            let childBeats = Math.round(soundLen(child) / secPerBeat);
+            // charts must have at least 1 character
+            childBeats = Math.max(childBeats, 1);
+            if(childBeats > child.section!.banks[i].length) {
+                const extra = childBeats - child.section!.banks[i].length;
+                child.section!.banks[i] += '.'.repeat(extra);
+                changed = true;
+            } else if(childBeats < child.section!.banks[i].length) {
+                child.section!.banks[i] = child.section!.banks[i].slice(0, childBeats);
+                changed = true;
+            }
+        }
+
+        if(!changed) {
             return; // no change needed after all
         }
 
+        child.section!.recalcBeatString();
         child.section = child.section; // inform of changed data
     };
 
     const doubleBeats = (editor: EditorBox) => {
-        editor.section.chart = editor.section.chart!.replace(/(.)/g, "$1.");
+        for(let i = 0; i < editor.section!.banks.length; i++) {
+            editor.section!.banks[i] = editor.section!.banks[i]!.replace(/(.)/g, "$1.");
+        }
         editor.section = editor.section; // inform of data change
     }
     const halveBeats = (editor: EditorBox) => {
-        let ret = editor.section.chart!.replace(/(.)./g, "$1");
-        // don't allow an empty map
-        if(!ret) {
-            ret = '.';
+        for(let i = 0; i < editor.section!.banks.length; i++) {
+            let ret = editor.section!.banks[i].replace(/(.)./g, "$1");
+            // don't allow an empty map
+            if(!ret) {
+                ret = '.';
+            }
+            editor.section!.banks[i] = ret;
         }
-        editor.section.chart = ret;
         editor.section = editor.section; // inform of data change
     }
 
@@ -403,6 +432,35 @@
             disabled={!hasBoth}
         />
 
+        <div class="banks">
+            <div class="banks-span-both">BANKS</div>
+            {#if loop}
+            {#each loop.banks as bank, i}
+            <HuesButton
+                nopad title="Toggle bank visibility"
+                on:click={() => {hiddenBanks[i] = !hiddenBanks[i]}}>
+                {i+1} <span class="hues-icon">{@html hiddenBanks[i] ? HuesIcon.EYE_CLOSED : '&emsp;'}</span>
+            </HuesButton>
+            {#if loop.banks.length == 1}
+                <div></div>
+            {:else}
+                <HuesButton
+                    nopad nouppercase title="Remove bank"
+                    on:click={() => {pushUndo(); dispatch('removebank', i)}}>
+                    x
+                </HuesButton>
+            {/if}
+            {/each}
+            {/if}
+            <div class="banks-span-both">
+                <HuesButton
+                    title="Add bank"
+                    on:click={() => {pushUndo(); dispatch('addbank')}}>
+                    +
+                </HuesButton>
+            </div>
+        </div>
+
         <EditorBox
             title="Buildup"
             bind:this={buildEditorComponent}
@@ -412,22 +470,23 @@
             on:rewind={() => soundManager.seek(-soundManager.build.length)}
             on:seek={event => soundManager.seek(-soundManager.build.length * (1 - event.detail))}
             on:error={event => alert(event.detail)}
-            on:songload={event => dispatch('loadbuildup', event)}
+            on:songload={event => dispatch('loadbuildup', event.detail)}
             on:double={doubleClicked}
             on:halve={halveClicked}
             on:beforeinput={editorBeforeInput}
             on:afterinput={editorAfterInput}
             on:focus={editorOnfocus}
-            on:songremove
+            on:songremove={event => dispatch('removebuildup')}
             on:songnew
             beatIndex={buildIndex}
             {newLineAtBeat}
             {soundManager}
+            {hiddenBanks}
         />
 
         <div title="Resize" class="resize-handle" on:mousedown={resizeMousedown} bind:this={resizeHandle}>
-            <!-- DRAG HANDLE -->
-            <div class="hues-icon handle">&#xe908;</div>
+            <!-- MENU looks like a drag handle when wide enough -->
+            <div class="hues-icon handle">{@html HuesIcon.MENU}</div>
         </div>
 
         <EditorBox
@@ -441,17 +500,18 @@
             on:rewind={() => soundManager.seek(0)}
             on:seek={event => soundManager.seek(soundManager.loop.length * event.detail)}
             on:error={event => alert(event.detail)}
-            on:songload={event => dispatch('loadrhythm', event)}
+            on:songload={event => dispatch('loadrhythm', event.detail)}
             on:double={doubleClicked}
             on:halve={halveClicked}
             on:beforeinput={editorBeforeInput}
             on:afterinput={editorAfterInput}
             on:focus={editorOnfocus}
-            on:songremove
+            on:songremove={event => dispatch('removerhythm')}
             on:songnew
             beatIndex={loopIndex}
             {newLineAtBeat}
             {soundManager}
+            {hiddenBanks}
         />
 
         <!-- Beat inserter buttons -->
@@ -471,9 +531,9 @@
         <!-- Footer buttons -->
         <div class="controls">
             <!-- Backward -->
-            <HuesButton icon on:click={() => {changeRate(-0.25)}}>&#xe909;</HuesButton>
+            <HuesButton icon on:click={() => {changeRate(-0.25)}}>{@html HuesIcon.BACKWARD}</HuesButton>
             <!-- Forward -->
-            <HuesButton icon on:click={() => {changeRate(0.25)}}>&#xe90a;</HuesButton>
+            <HuesButton icon on:click={() => {changeRate(0.25)}}>{@html HuesIcon.FORWARD}</HuesButton>
 
             <!-- lazy spacer -->
             <div/>
@@ -565,6 +625,21 @@ hr {
     align-self: center;
 }
 
+.banks {
+    grid-column: editor-banks;
+    grid-row: 1/-1;
+    align-self: center;
+    text-align: center;
+
+    display: grid;
+    grid-template-columns: auto 1.5ch;
+    justify-items: stretch;
+}
+
+.banks-span-both {
+    grid-column: 1/-1;
+}
+
 .edit-area {
     --buildup-ratio: 1fr;
     --rhythm-ratio: 3fr;
@@ -574,6 +649,7 @@ hr {
 
     display: grid;
     grid-template-columns:
+        [editor-banks] min-content
         [editor-link] min-content
         [editors] auto;
     /* Magically works since EditorBox has 2 sub-elements */
diff --git a/src/js/HuesEditor/Timelock.svelte b/src/js/HuesEditor/Timelock.svelte
index b8a0449..1c21cf7 100644
--- a/src/js/HuesEditor/Timelock.svelte
+++ b/src/js/HuesEditor/Timelock.svelte
@@ -2,6 +2,7 @@
     import HuesButton from '../Components/HuesButton.svelte';
 
     import { createEventDispatcher } from 'svelte';
+import { HuesIcon } from '../HuesIcon';
 
     export let unlocked = true;
     export let disabled = false;
@@ -24,7 +25,7 @@
         {disabled}
         on:click={click}
         title="Lock Buildup/Rhythm beat lengths">
-            {@html realUnlocked ? '&#xe904;' : '&#xe905;'}
+            {@html realUnlocked ? HuesIcon.CHAIN_BROKEN : HuesIcon.CHAIN}
     </HuesButton>
 </div>
 
diff --git a/src/js/HuesIcon.ts b/src/js/HuesIcon.ts
new file mode 100644
index 0000000..aa9408c
--- /dev/null
+++ b/src/js/HuesIcon.ts
@@ -0,0 +1,18 @@
+// Generated from icomoon
+export enum HuesIcon {
+    COG          = "&#xe900;",
+    PLAY         = "&#xe901;", // play3
+    PAUSE        = "&#xe902;", // pause2
+    SHUFFLE      = "&#xe903;",
+    CHAIN_BROKEN = "&#xe904;", // chain-broken, unlink
+    CHAIN        = "&#xe905;", // chain, link
+    LOCKED       = "&#xe906;",
+    UNLOCKED     = "&#xe907;",
+    MENU         = "&#xe908;",
+    BACKWARD     = "&#xe909;", // backward2
+    FORWARD      = "&#xe90a;", // forward3
+    REWIND       = "&#xe90b;", // first
+    COPY         = "&#xe90c;",
+    EYE          = "&#xe90d;",
+    EYE_CLOSED   = "&#xe90e;",
+};
diff --git a/src/js/HuesUI.ts b/src/js/HuesUI.ts
index 4cd034f..b174a3a 100644
--- a/src/js/HuesUI.ts
+++ b/src/js/HuesUI.ts
@@ -8,6 +8,7 @@ import '../css/huesUI-weed.css';
 import '../css/huesUI-xmas.css';
 import type { HuesColour, HuesCore } from './HuesCore';
 import type { HuesImage, HuesSong } from './ResourcePack';
+import { HuesIcon } from './HuesIcon';
 
 /*
     Base UI Class for Hues display. Parent is an element
@@ -138,7 +139,7 @@ export class HuesUI {
 
         // Config stuff
         this.settingsToggle = document.createElement("div");
-        this.settingsToggle.innerHTML = '&#xe900;'; // COG
+        this.settingsToggle.innerHTML = HuesIcon.COG;
         this.settingsToggle.className = 'hues-icon';
         this.settingsToggle.onclick = () => {
             this.core?.window.toggle();
@@ -650,7 +651,7 @@ export class ModernUI extends HuesUI {
         this.songPrev.className = "hues-m-prevbutton";
         this.songNext.className = "hues-m-nextbutton";
         this.songShuffle = document.createElement("div");
-        this.songShuffle.innerHTML = '&#xe903;'; // SHUFFLE
+        this.songShuffle.innerHTML = HuesIcon.SHUFFLE;
         this.songShuffle.className = "hues-m-actbutton hues-icon";
         this.songShuffle.onclick = () => {this.core?.randomSong();};
         songs.appendChild(this.songList);
@@ -669,7 +670,7 @@ export class ModernUI extends HuesUI {
         imageControls.className = "hues-m-controlbuttons";
 
         this.imageMode = document.createElement("div");
-        this.imageMode.innerHTML = "&#xe901;"; // PLAY
+        this.imageMode.innerHTML = HuesIcon.PLAY;
         this.imageMode.className = "hues-m-actbutton hues-icon";
         this.imageMode.onclick = () => {this.core?.toggleFullAuto();};
         this.imagePrev.className = "hues-m-prevbutton";
@@ -760,9 +761,9 @@ export class ModernUI extends HuesUI {
 
     newMode (isAuto: boolean) {
         if(isAuto) {
-            this.imageMode.innerHTML = '&#xe902;'; // PAUSE;
+            this.imageMode.innerHTML = HuesIcon.PAUSE;
         } else {
-            this.imageMode.innerHTML = "&#xe901;"; // PLAY
+            this.imageMode.innerHTML = HuesIcon.PLAY;
         }
     }
 
diff --git a/src/js/ResourcePack.ts b/src/js/ResourcePack.ts
index c7baba9..f9074d1 100644
--- a/src/js/ResourcePack.ts
+++ b/src/js/ResourcePack.ts
@@ -1,27 +1,222 @@
 import type { EditorUndoRedo } from "./HuesEditor";
 
 import * as zip from "@zip.js/zip.js";
-
-export interface HuesSongSection {
-    chart?: string;
+import { BeatTypes, Effect, ImageColour } from "./HuesCore";
+
+export class HuesSongSection {
+    // Any section will have at least one bank with some beats in it. If a song
+    // is lacking a section, its HuesSongSection should instead be undefined.
+    banks: string[];
+    // a single string containing the best-effort flattened banks to their
+    // closest characters
+    beatString: string;
+    // The raw soundfile contents
     sound?: ArrayBuffer;
-    fname?: string;
-    nameWithExt?: string;
+    // The raw filename of the audio - eg: finale_loop.mp3
+    protected fname?: string;
+
+    constructor(absPath?: string, sound?: ArrayBuffer) {
+        this.banks = ["."];
+        this.beatString = '.';
+
+        this.sound = sound;
+        if(absPath) {
+            this.filename = absPath;
+        }
+    }
+
+    set filename(path: string | undefined) {
+        if(!path) {
+            this.fname = path;
+            return;
+        }
+
+        const parts = path.split('/');
+        this.fname = parts.pop() || path;
+    }
+
+    get filename() {
+        return this.fname;
+    }
+
+    // the name of the audio file, with no extension - eg: finale_loop
+    get basename(): string | undefined {
+        if(!this.filename) {
+            return undefined;
+        }
+        // don't do a generic extension pop since audio extensions are checked
+        // when parsing
+        return this.filename.replace(audioExtensions, "");
+    }
+
+    // get the beatmap length - all banks have the same length
+    get mapLen() {
+        return this.banks[0].length;
+    }
+
+    private effectsToBits(effects: Effect[]) {
+        let ret = 0;
+        for(const eff of effects) {
+            ret |= 1 << eff;
+        }
+        return ret;
+    }
+
+    // https://stackoverflow.com/a/43122214/7972801
+    private bitCount(n: number) {
+        var bits = 0
+        while (n !== 0) {
+            bits += this.bitCount32(n | 0)
+            n /= 0x100000000
+        }
+        return bits
+    }
+    private bitCount32(n: number) {
+        n = n - ((n >> 1) & 0x55555555)
+        n = (n & 0x33333333) + ((n >> 2) & 0x33333333)
+        return ((n + (n >> 4) & 0xF0F0F0F) * 0x1010101) >> 24
+    }
+
+    // update the best-effort flattening of the banks, since this is somewhat
+    // intensive I guess and doesn't have to be dynamically done each frame.
+    // It could certainly be optimised, but I think it should be fine
+    recalcBeatString() {
+        let beatBits: {[beat: number]: string} = {};
+        for(const [char, effects] of Object.entries(BeatTypes)) {
+            beatBits[this.effectsToBits(effects)] = char;
+        }
+
+        let ret = "";
+        for(let i = 0; i < this.mapLen; i++) {
+            let bits = 0;
+            for(const bank of this.banks) {
+                const beat = bank[i];
+                const effects : Effect[] = (BeatTypes as any)[beat] ?? ImageColour;
+                bits |= this.effectsToBits(effects);
+            }
+
+            const exactMatch = beatBits[bits];
+            if(exactMatch !== undefined) {
+                ret += exactMatch;
+                continue;
+            }
+
+            // we have to find the closest match
+            // XOR and count the ones to see how different each target char is
+            // from the effects being used
+            let closest = '.';
+            let best = null;
+            for(const [compare, char] of Object.entries(beatBits)) {
+                const diff = this.bitCount(+compare ^ bits);
+                if(best === null || diff < best) {
+                    best = diff;
+                    closest = char;
+                }
+            }
+            ret += closest;
+        }
+
+        this.beatString = ret;
+    }
+
+    // should not ever throw outside of development
+    checkConsistency() {
+        if(this.mapLen <= 0) {
+            throw "SongSection has no bank data!";
+        }
+
+        for(const bank of this.banks) {
+            if(bank.length != this.mapLen) {
+                throw "SongSection bank length consistency check failure!";
+            }
+        }
+    }
+
+    // For a given index, return a string with every bank's beat characters
+    // eg: banks ['abc', 'def', 'ghi'] at index 1 returns ['b', 'e', 'h']
+    beatsAt(index: number): string[] {
+        let ret = [];
+        for(const bank of this.banks) {
+            ret.push(bank[index]);
+        }
+
+        return ret;
+    }
+
+    removeBank(index: number) {
+        if(this.banks.length > 1) {
+            this.banks.splice(index, 1);
+        }
+    }
+
+    addBank() {
+        this.banks.push('.'.repeat(this.mapLen));
+    }
 }
 
-export interface HuesSong {
+export class HuesSong {
     title : string;
+    // loop/build should have identical # of banks, and each bank should be the
+    // same length. Not enforcing this programmatically is probably going to
+    // blow up in my face later
     loop: HuesSongSection;
-    build: HuesSongSection;
+    build?: HuesSongSection;
     source: string;
-    enabled: boolean;
     charsPerBeat: number | null;
     independentBuild: boolean;
     // runtime
+    enabled: boolean;
     buildupPlayed: boolean;
     // editor
-    undoQueue?: EditorUndoRedo;
-    redoQueue?: EditorUndoRedo;
+    undoQueue?: EditorUndoRedo[];
+    redoQueue?: EditorUndoRedo[];
+    // putting this here lets it persist across song change, which is neat
+    hiddenBanks: boolean[];
+
+    constructor(title?: string, loopFilename?: string) {
+        this.title = title || "";
+        this.loop = new HuesSongSection(loopFilename);
+        this.source = "";
+        this.charsPerBeat = null;
+        this.independentBuild = false;
+
+        this.enabled = true;
+        this.buildupPlayed = false;
+        // exploit default-undefined being false
+        this.hiddenBanks = [];
+    }
+
+    get bankCount() {
+        return this.loop.banks.length;
+    }
+
+    removeBank(index: number) {
+        this.loop.removeBank(index);
+        this.build?.removeBank(index);
+        this.hiddenBanks.splice(index, 1);
+        this.checkConsistency();
+    }
+
+    addBank() {
+        this.loop.addBank();
+        this.build?.addBank();
+        this.hiddenBanks[this.bankCount] = false; // new bank is always visible
+        this.checkConsistency();
+    }
+
+    recalcBeatStrings() {
+        this.loop.recalcBeatString();
+        this.build?.recalcBeatString();
+    }
+
+    // should not ever throw outside of development
+    checkConsistency() {
+        if(this.build && this.build.banks.length != this.loop.banks.length) {
+            throw "Song bank lengths are mismatched!";
+        }
+        this.loop.checkConsistency();
+        this.build?.checkConsistency();
+    }
 }
 
 export interface HuesImage {
@@ -234,26 +429,14 @@ export class Respack {
     }
 
     async parseSong(file: zip.Entry): Promise<void> {
-        let name = basename(file).replace(audioExtensions, "");
-        debug("parsing song: " + name);
-        if (this.containsSong(name)) {
-            let oldSong = this.getSong(name);
-            console.warn("Song", name, "already exists! Conflict with", name, "and", oldSong?.loop.fname);
-        } else {
-            let newSong: HuesSong = {
-                title:"",
-                loop: {
-                    fname:name,
-                    nameWithExt:basename(file),
-                },
-                build: {},
-                source:"",
-                enabled:true,
-                charsPerBeat: null,
-                buildupPlayed: false,
-                independentBuild: false,
-            };
+        let newSong = new HuesSong("", file.filename);
+
+        debug("parsing song: " + newSong.loop.filename);
 
+        const oldSong = this.getSong(newSong.loop.basename);
+        if (oldSong) {
+            console.warn("Song", newSong.loop.filename, "already exists! Conflict with " + oldSong);
+        } else {
             this.songs.push(newSong);
 
             let arr = await file.getData!(new zip.Uint8ArrayWriter()) as Uint8Array;
@@ -414,6 +597,38 @@ export class Respack {
         }
     }
 
+    loadExtraCharts(el: Element, section: HuesSongSection, tagPrefix: string, expected?: number) {
+        for(let i = 2; true; i++) {
+            let extraChart = el.getTag(tagPrefix + i);
+            if(extraChart === null) {
+                break;
+            }
+
+            if(extraChart.length < section.mapLen) {
+                console.warn(tagPrefix + i + " is shorter than primary " + tagPrefix + ", padding with '.'");
+                extraChart += ".".repeat(section.mapLen - extraChart.length);
+            } else if(extraChart.length > section.mapLen) {
+                console.warn(tagPrefix + i + " is longer than primary " + tagPrefix + ", truncating");
+                extraChart = extraChart.slice(0, section.mapLen);
+            }
+
+            section.banks.push(extraChart);
+        }
+
+        if(expected && section.banks.length != expected) {
+            console.warn("Should have seen", expected, tagPrefix, "sections, but found", section.banks.length);
+            if(section.banks.length < expected) {
+                console.warn("Adding empty banks to fit");
+                for(let i = section.banks.length; i < expected; i++) {
+                    section.banks.push(".".repeat(section.mapLen));
+                }
+            } else {
+                console.warn("Deleting excess banks");
+                section.banks = section.banks.slice(0, expected);
+            }
+        }
+    }
+
     parseSongFile(dom: Document) {
         debug(" - Parsing songFile");
 
@@ -424,45 +639,54 @@ export class Respack {
                 song.title = el.getTag("title") || "";
                 if(!song.title) {
                     song.title = "<no name>";
-                    console.warn(song.loop.fname, "has no title!");
+                    console.warn(song.loop.basename, "has no title!");
                 }
 
-                song.loop.chart = el.getTag("rhythm") || undefined;
-                if(!song.loop.chart) {
-                    song.loop.chart = "..no..rhythm..";
-                    console.warn(song.loop.fname, "has no rhythm!!");
+                let chart = el.getTag("rhythm");
+                if(chart === null) {
+                    chart = "..no..rhythm..";
+                    console.warn(song.loop.basename, "has no rhythm!!");
                 }
+                song.loop.banks = [chart];
+                this.loadExtraCharts(el, song.loop, "rhythm");
 
-                song.build.fname = el.getTag("buildup") || undefined;
-                if(song.build.fname) {
-                    debug("  Finding a buildup '" + song.build.fname + "' for ", song.loop.fname);
-                    let build = this.getSong(song.build.fname);
+                const buildName = el.getTag("buildup") || undefined;
+                if(buildName) {
+                    debug("  Finding a buildup '" + buildName + "' for ", song.loop.basename);
+                    let build = this.getSong(buildName);
                     if(build) {
                         // migrate this from loop to build
-                        song.build.sound = build.loop.sound;
-                        song.build.nameWithExt = build.loop.nameWithExt;
-                        song.buildupPlayed = false;
+                        song.build = build.loop;
                         // get rid of the junk
                         this.songs.splice(this.songs.indexOf(build), 1);
+
+                        let buildChart = el.getTag("buildupRhythm");
+                        if(buildChart === null) {
+                            buildChart = ".";
+                            console.warn(song.loop.basename, "has no buildup, despite having a buildup sound!!");
+                        }
+                        song.build.banks = [buildChart];
+                        this.loadExtraCharts(el, song.build, "buildupRhythm", song.loop.banks.length);
                     } else {
-                        console.warn("Didn't find a buildup '" + song.build.fname + "'!");
+                        console.warn("Didn't find a buildup '" + buildName + "'!");
                     }
                 }
 
-                song.build.chart = el.getTag("buildupRhythm") || undefined;
                 song.independentBuild = !!el.getTag("independentBuild");
                 song.source = el.getTag("source") || "";
                 song.charsPerBeat = parseFloat(el.getTag("charsPerBeat") || "0");
 
+                song.recalcBeatStrings();
+                song.checkConsistency();
                 newSongs.push(song);
-                debug("  [I] " + song.loop.fname, ": '" + song.title + "' added to songs");
+                debug("  [I] " + song.loop.basename, ": '" + song.title + "' added to songs");
             } else {
                 console.warn("songs.xml: <song> element" + el.getAttribute("name") + "- no song found");
             }
         }
         for(let i = 0; i < this.songs.length; i++) {
             if(newSongs.indexOf(this.songs[i]) == -1) {
-                console.warn("We have a file for", this.songs[i].loop.fname, "but no information for it");
+                console.warn("We have a file for", this.songs[i].loop.basename, "but no information for it");
             }
         }
         this.songs = newSongs;
@@ -540,9 +764,9 @@ export class Respack {
         return this.getImage(name) !== null;
     }
 
-    getSong(name: string | null): null | HuesSong {
+    getSong(name: string | undefined | null): null | HuesSong {
         for(let song of this.songs) {
-            if (name == song.loop.fname) {
+            if (name == song.loop.basename) {
                 return song;
             }
         }
diff --git a/src/js/SoundManager.ts b/src/js/SoundManager.ts
index dfdf275..9fd7b08 100644
--- a/src/js/SoundManager.ts
+++ b/src/js/SoundManager.ts
@@ -365,7 +365,7 @@ export default class SoundManager extends EventListener<SoundCallbacks> {
         let promises = [this.loadBuffer(song.loop).then(buffer => {
             buffers.loop = buffer;
         })];
-        if(song.build.sound) {
+        if(song.build?.sound) {
             promises.push(this.loadBuffer(song.build).then(buffer => {
                 buffers.buildup = buffer;
             }));