diff --git a/eslint.config.mjs b/eslint.config.mjs
index 11726daf..dcdedcde 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -119,6 +119,7 @@ export default [
         },
       ],
       'react/react-in-jsx-scope': 0,
+      curly: ['warn', 'all'],
     },
   },
 ];
diff --git a/src/midiEditor/CVOutput/CVOutputControls.svelte b/src/midiEditor/CVOutput/CVOutputControls.svelte
index 4854ca29..0441fae1 100644
--- a/src/midiEditor/CVOutput/CVOutputControls.svelte
+++ b/src/midiEditor/CVOutput/CVOutputControls.svelte
@@ -16,6 +16,7 @@
   export let view: Writable<MIDIEditorBaseView>;
   export let getCursorPosBeats: () => number;
   export let setCursorPosBeats: (newCursorPosBeats: number) => void;
+  export let activateDrag: () => void;
 
   const expand = () => {
     $state.isExpanded = true;
@@ -26,7 +27,7 @@
 </script>
 
 {#if !$state.isExpanded}
-  <CollapsedCvOutputControls {name} {expand} {deleteOutput} {setName} />
+  <CollapsedCvOutputControls {name} {expand} {deleteOutput} {setName} {activateDrag} />
 {:else}
   <CVOutputControlsInner
     {name}
@@ -39,5 +40,6 @@
     view={$view}
     {getCursorPosBeats}
     {setCursorPosBeats}
+    {activateDrag}
   />
 {/if}
diff --git a/src/midiEditor/CVOutput/CVOutputControlsInner.svelte b/src/midiEditor/CVOutput/CVOutputControlsInner.svelte
index e97b4e44..a5727849 100644
--- a/src/midiEditor/CVOutput/CVOutputControlsInner.svelte
+++ b/src/midiEditor/CVOutput/CVOutputControlsInner.svelte
@@ -15,6 +15,7 @@
   import { mkCVOutputSettingsPopup } from './CVOutputSettingsPopup';
   import type { MIDIEditorBaseView } from 'src/midiEditor';
   import Cursor from 'src/midiEditor/CVOutput/Cursor.svelte';
+  import SvelteDragHandle from 'src/midiEditor/SvelteDragHandle.svelte';
 
   export let name: string;
   export let setName: (name: string) => void;
@@ -26,6 +27,7 @@
   export let view: MIDIEditorBaseView;
   export let getCursorPosBeats: () => number;
   export let setCursorPosBeats: (newCursorPosBeats: number) => void;
+  export let activateDrag: () => void;
 
   let width: number | undefined;
   let widthObserver: ResizeObserver | undefined;
@@ -54,7 +56,11 @@
     role="button"
   >
     ⌄
-    <EditableInstanceName {name} {setName} left={PIANO_KEYBOARD_WIDTH} />
+    <SvelteDragHandle
+      {activateDrag}
+      style={{ zIndex: 2, top: 0, left: 28, position: 'absolute', height: 16 }}
+    />
+    <EditableInstanceName {name} {setName} left={60} />
     <button class="delete-cv-output-button" on:click={deleteOutput}>✕</button>
   </header>
 
diff --git a/src/midiEditor/CVOutput/CollapsedCVOutputControls.svelte b/src/midiEditor/CVOutput/CollapsedCVOutputControls.svelte
index c6f7bd38..7a80107e 100644
--- a/src/midiEditor/CVOutput/CollapsedCVOutputControls.svelte
+++ b/src/midiEditor/CVOutput/CollapsedCVOutputControls.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
   import EditableInstanceName from 'src/midiEditor/EditableInstanceName.svelte';
+  import SvelteDragHandle from 'src/midiEditor/SvelteDragHandle.svelte';
 
   export let name: string;
   export let expand: () => void;
   export let deleteOutput: () => void;
   export let setName: (name: string) => void;
+  export let activateDrag: () => void;
 </script>
 
 <div
@@ -15,6 +17,10 @@
   aria-label="Expand"
   role="button"
 >
-  › <EditableInstanceName left={24} {name} {setName} />
+  › <SvelteDragHandle
+    {activateDrag}
+    style={{ zIndex: 2, top: 0, left: 28, position: 'absolute', height: 16 }}
+  />
+  <EditableInstanceName left={60} {name} {setName} />
   <button class="delete-cv-output-button" on:click={deleteOutput}>✕</button>
 </div>
diff --git a/src/midiEditor/CollapsedMIDIEditor.svelte b/src/midiEditor/CollapsedMIDIEditor.svelte
index 1e29e56b..6f0c21ef 100644
--- a/src/midiEditor/CollapsedMIDIEditor.svelte
+++ b/src/midiEditor/CollapsedMIDIEditor.svelte
@@ -5,6 +5,7 @@
   import { PIANO_KEYBOARD_WIDTH } from 'src/midiEditor/conf';
   import type { ManagedMIDIEditorUIInstance } from 'src/midiEditor/MIDIEditorUIManager';
   import EditableInstanceName from './EditableInstanceName.svelte';
+  import SvelteDragHandle from 'src/midiEditor/SvelteDragHandle.svelte';
 
   export let parentInstance: MIDIEditorInstance;
   export let inst: ManagedMIDIEditorUIInstance;
@@ -12,6 +13,7 @@
   export let scrollHorizontalBeats: Readable<number>;
   export let expand: () => void;
   export let instIx: number;
+  export let activateDrag: () => void;
 
   let minimapContainer: HTMLDivElement | null = null;
   let svg: SVGSVGElement | null = null;
@@ -54,6 +56,10 @@
   >
     ›
   </button>
+  <SvelteDragHandle
+    style={{ zIndex: 2, top: -1, left: 28, position: 'absolute', height: 16 }}
+    {activateDrag}
+  />
   <button
     class="delete-cv-output-button"
     on:click={() => parentInstance.uiManager.deleteMIDIEditorInstance(inst.id)}
@@ -62,7 +68,7 @@
     ✕
   </button>
   <EditableInstanceName
-    left={24}
+    left={60}
     name={inst.name}
     setName={newName => parentInstance.uiManager.renameInstance(inst.name, newName)}
     transparent
diff --git a/src/midiEditor/DnD.tsx b/src/midiEditor/DnD.tsx
new file mode 100644
index 00000000..282463fe
--- /dev/null
+++ b/src/midiEditor/DnD.tsx
@@ -0,0 +1,100 @@
+import { createContext, useCallback, useRef } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+
+const ItemTypes = {
+  INSTANCE: 'instance',
+};
+
+export const DragActivationContext = createContext<() => void>(() => {});
+
+interface DragHandleProps {
+  activateDrag: () => void;
+  style?: React.CSSProperties;
+}
+
+export const DragHandle: React.FC<DragHandleProps> = ({ style, activateDrag }) => (
+  <div
+    className='drag-handle'
+    style={style}
+    onMouseDown={e => {
+      e.stopPropagation();
+      activateDrag();
+    }}
+  />
+);
+
+interface DraggableInstanceProps {
+  index: number;
+  instanceKey: string;
+  moveInstance: (dragIndex: number, hoverIndex: number) => void;
+  children: React.ReactNode;
+}
+
+export const DraggableInstance: React.FC<DraggableInstanceProps> = ({
+  index,
+  instanceKey,
+  moveInstance,
+  children,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const dragAllowedRef = useRef(false);
+
+  const [{ isDragging }, drag] = useDrag({
+    type: ItemTypes.INSTANCE,
+    item: { index },
+    canDrag: () => dragAllowedRef.current,
+    collect: monitor => ({ isDragging: monitor.isDragging() }),
+    end: () => {
+      dragAllowedRef.current = false;
+    },
+  });
+
+  drag(ref);
+
+  const [, drop] = useDrop({
+    accept: ItemTypes.INSTANCE,
+    hover(item: { index: number }, monitor) {
+      if (!ref.current) {
+        return;
+      }
+
+      const dragIndex = item.index;
+      const hoverIndex = index;
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+
+      const hoverBoundingRect = ref.current.getBoundingClientRect();
+      const boundingHeight = hoverBoundingRect.bottom - hoverBoundingRect.top;
+      const hoverCutoffY = boundingHeight < 100 ? boundingHeight / 2 : 50;
+      const clientOffset = monitor.getClientOffset();
+      if (!clientOffset) {
+        return;
+      }
+      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+      if (
+        (dragIndex < hoverIndex && hoverClientY < hoverCutoffY) ||
+        (dragIndex > hoverIndex && hoverClientY > hoverCutoffY)
+      ) {
+        return;
+      }
+      moveInstance(dragIndex, hoverIndex);
+      item.index = hoverIndex;
+    },
+  });
+
+  drop(ref);
+
+  const activateDrag = useCallback(() => {
+    dragAllowedRef.current = true;
+  }, []);
+
+  return (
+    <div ref={ref} key={instanceKey} style={{ opacity: isDragging ? 0.5 : 1 }}>
+      <DragActivationContext.Provider value={activateDrag}>
+        {children}
+      </DragActivationContext.Provider>
+    </div>
+  );
+};
diff --git a/src/midiEditor/MIDIEditor.css b/src/midiEditor/MIDIEditor.css
index a1cc48f3..07012759 100644
--- a/src/midiEditor/MIDIEditor.css
+++ b/src/midiEditor/MIDIEditor.css
@@ -81,6 +81,26 @@
       }
     }
   }
+
+  .drag-handle {
+    width: 30px;
+    height: 18px;
+    border: 1px solid #999;
+    cursor: grab;
+
+    /* vertical ridges to indicate that it's a handle */
+    background-image: repeating-linear-gradient(
+      90deg,
+      #888,
+      #888 2px,
+      #444 1px,
+      #444 4px
+    );
+  }
+
+  .drag-handle:active {
+    cursor: grabbing;
+  }
 }
 
 .expanded-midi-editor-instance {
diff --git a/src/midiEditor/MIDIEditor.tsx b/src/midiEditor/MIDIEditor.tsx
index f5bbd03a..c608a0b9 100644
--- a/src/midiEditor/MIDIEditor.tsx
+++ b/src/midiEditor/MIDIEditor.tsx
@@ -1,7 +1,9 @@
 import download from 'downloadjs';
 import * as R from 'ramda';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import ControlPanel from 'react-control-panel';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 
 import './MIDIEditor.css';
 
@@ -27,6 +29,7 @@ import MIDIEditorUIInstance from 'src/midiEditor/MIDIEditorUIInstance';
 import type { ManagedInstance, MIDIEditorUIManager } from 'src/midiEditor/MIDIEditorUIManager';
 import type MIDIEditorPlaybackHandler from 'src/midiEditor/PlaybackHandler';
 import EditableInstanceName from './EditableInstanceName.svelte';
+import { DragActivationContext, DraggableInstance, DragHandle } from './DnD';
 
 const MIDIWasmModule = new AsyncOnce(() => import('src/midi'));
 
@@ -205,7 +208,7 @@ const handleMIDIFileUpload = async (
   } catch (err) {
     if (err) {
       console.error('Error importing MIDI: ', err);
-      // TODO: Display to user?
+      toastError(`Error importing MIDI: ${err}`);
     }
   }
 };
@@ -555,6 +558,132 @@ const CollapsedMIDIEditorShim = mkSvelteComponentShim(CollapsedMIDIEditor);
 
 const EditableInstanceNameShim = mkSvelteComponentShim(EditableInstanceName);
 
+interface MIDIEditorInstanceCompProps {
+  instance: Extract<ManagedInstance, { type: 'midiEditor' }>;
+  instIx: number;
+  parentInstance: MIDIEditorInstance;
+  lastCanvasRefsByInstID: React.MutableRefObject<{ [key: string]: HTMLCanvasElement }>;
+  windowSize: { width: number; height: number };
+  vcId: string;
+}
+
+const MIDIEditorInstanceComp: React.FC<MIDIEditorInstanceCompProps> = ({
+  instance,
+  instIx,
+  parentInstance,
+  lastCanvasRefsByInstID,
+  windowSize,
+  vcId,
+}) => {
+  const activateDrag = useContext(DragActivationContext);
+  const inst = instance.instance;
+
+  if (!instance.isExpanded) {
+    return (
+      <div className='collapsed-midi-editor-instance'>
+        <CollapsedMIDIEditorShim
+          parentInstance={parentInstance}
+          inst={inst}
+          pxPerBeat={parentInstance.baseView.pxPerBeatStore}
+          scrollHorizontalBeats={parentInstance.baseView.scrollHorizontalBeatsStore}
+          expand={() => parentInstance.uiManager.expandUIInstance(inst.id)}
+          instIx={instIx}
+          activateDrag={activateDrag}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className='expanded-midi-editor-instance'>
+      <div className='instance-header'>
+        <button
+          className='collapse-midi-editor-instance'
+          onClick={() => parentInstance.uiManager.collapseUIInstance(inst.id)}
+        >
+          ⌄
+        </button>
+        <DragHandle style={{ position: 'absolute', left: 28 }} activateDrag={activateDrag} />
+        <EditableInstanceNameShim
+          left={PIANO_KEYBOARD_WIDTH + 2}
+          name={inst.name}
+          setName={newName => parentInstance.uiManager.renameInstance(inst.name, newName)}
+        />
+        <button
+          className='delete-cv-output-button'
+          onClick={() => parentInstance.uiManager.deleteMIDIEditorInstance(inst.id)}
+          style={instIx === 0 ? { right: 30 } : undefined}
+        >
+          ✕
+        </button>
+      </div>
+      <canvas
+        ref={canvas => {
+          if (!canvas) {
+            return;
+          }
+          if (canvas === lastCanvasRefsByInstID.current[inst.id]) {
+            return;
+          }
+          lastCanvasRefsByInstID.current[inst.id] = canvas;
+
+          parentInstance.uiManager.getUIInstanceByID(inst.id)?.destroy();
+          const managedInst = parentInstance.uiManager.getMIDIEditorInstanceByID(inst.id)!;
+          const instanceHeight = parentInstance.uiManager.computeUIInstanceHeight();
+          const newInst = new MIDIEditorUIInstance(
+            windowSize.width,
+            instanceHeight,
+            canvas,
+            parentInstance,
+            managedInst,
+            vcId
+          );
+          parentInstance.uiManager.setUIInstanceForID(inst.id, newInst);
+        }}
+        onMouseDown={evt => {
+          parentInstance.uiManager.setActiveUIInstanceID(inst.id);
+          evt.preventDefault();
+          evt.stopPropagation();
+        }}
+        onContextMenu={evt => {
+          evt.preventDefault();
+          evt.stopPropagation();
+        }}
+      />
+    </div>
+  );
+};
+
+interface CVOutputInstanceCompProps {
+  output: Extract<ManagedInstance, { type: 'cvOutput' }>['instance'];
+  parentInstance: MIDIEditorInstance;
+}
+
+const CVOutputInstanceComp: React.FC<CVOutputInstanceCompProps> = ({ output, parentInstance }) => {
+  const activateDrag = useContext(DragActivationContext);
+
+  return (
+    <div className='cv-output-instance'>
+      <CVOutputControlsShim
+        name={output.name}
+        state={output.state}
+        deleteOutput={() => parentInstance.deleteCVOutput(output.name)}
+        setName={newName => parentInstance.renameCVOutput(output.name, newName)}
+        registerInstance={uiInstance => output.registerUIInstance(uiInstance)}
+        setFrozenOutputValue={newFrozenOutputValue =>
+          output.backend.setFrozenOutputValue(newFrozenOutputValue)
+        }
+        view={parentInstance.baseView.store}
+        getCursorPosBeats={() => parentInstance.playbackHandler.getCursorPosBeats()}
+        setCursorPosBeats={newCursorPosBeats =>
+          void parentInstance.playbackHandler.setCursorPosBeats(newCursorPosBeats)
+        }
+        activateDrag={activateDrag}
+      />
+    </div>
+  );
+};
+
 class ActiveInstanceProxy {
   private uiManager: MIDIEditorUIManager;
 
@@ -620,118 +749,66 @@ const MIDIEditor: React.FC<MIDIEditorProps> = ({
     [parentInstance.uiManager]
   );
 
+  const moveInstance = useCallback(
+    (dragIndex: number, hoverIndex: number) => {
+      const updatedInstances = [...instances];
+      const [removed] = updatedInstances.splice(dragIndex, 1);
+      updatedInstances.splice(hoverIndex, 0, removed);
+      parentInstance.uiManager.instances.set(updatedInstances);
+    },
+    [instances, parentInstance.uiManager]
+  );
+
   return (
-    <div className='midi-editor'>
-      <MIDIEditorControls
-        parentInst={parentInstance}
-        activeInstance={activeInstanceProxy}
-        initialState={initialStateForControls.current}
-        onChange={handleChange}
-        playbackHandler={parentInstance.playbackHandler}
-      />
-      <div className='spacer' style={{ height: 64 }} />
-      <div>
-        {instances.map((instance, instIx) => {
-          if (instance.type === 'midiEditor') {
-            const inst = instance.instance;
-            if (instance.isExpanded) {
+    <DndProvider backend={HTML5Backend}>
+      <div className='midi-editor'>
+        <MIDIEditorControls
+          parentInst={parentInstance}
+          activeInstance={activeInstanceProxy}
+          initialState={initialStateForControls.current}
+          onChange={handleChange}
+          playbackHandler={parentInstance.playbackHandler}
+        />
+        <div className='spacer' style={{ height: 64 }} />
+        <div>
+          {instances.map((instance, instIx) => {
+            if (instance.type === 'midiEditor') {
               return (
-                <div key={inst.id} className='expanded-midi-editor-instance'>
-                  <button
-                    className='collapse-midi-editor-instance'
-                    onClick={() => parentInstance.uiManager.collapseUIInstance(inst.id)}
-                  >
-                    ⌄
-                  </button>
-                  <EditableInstanceNameShim
-                    left={PIANO_KEYBOARD_WIDTH + 2}
-                    name={inst.name}
-                    setName={newName => parentInstance.uiManager.renameInstance(inst.name, newName)}
-                  />
-                  <button
-                    className='delete-cv-output-button'
-                    onClick={() => parentInstance.uiManager.deleteMIDIEditorInstance(inst.id)}
-                    style={instIx === 0 ? { right: 30 } : undefined}
-                  >
-                    ✕
-                  </button>
-                  <canvas
-                    ref={canvas => {
-                      if (!canvas) {
-                        return;
-                      }
-
-                      if (canvas === lastCanvasRefsByInstID.current[inst.id]) {
-                        return;
-                      }
-                      lastCanvasRefsByInstID.current[inst.id] = canvas;
-
-                      parentInstance.uiManager.getUIInstanceByID(inst.id)?.destroy();
-                      const managedInst = parentInstance.uiManager.getMIDIEditorInstanceByID(
-                        inst.id
-                      )!;
-                      const instanceHeight = parentInstance.uiManager.computeUIInstanceHeight();
-                      const newInst = new MIDIEditorUIInstance(
-                        windowSize.width,
-                        instanceHeight,
-                        canvas,
-                        parentInstance,
-                        managedInst,
-                        vcId
-                      );
-                      parentInstance.uiManager.setUIInstanceForID(inst.id, newInst);
-                    }}
-                    onMouseDown={evt => {
-                      parentInstance.uiManager.setActiveUIInstanceID(inst.id);
-                      evt.preventDefault();
-                      evt.stopPropagation();
-                    }}
-                    onContextMenu={evt => {
-                      evt.preventDefault();
-                      evt.stopPropagation();
-                    }}
+                <DraggableInstance
+                  key={instance.id}
+                  index={instIx}
+                  instanceKey={instance.id}
+                  moveInstance={moveInstance}
+                >
+                  <MIDIEditorInstanceComp
+                    instance={instance}
+                    instIx={instIx}
+                    parentInstance={parentInstance}
+                    lastCanvasRefsByInstID={lastCanvasRefsByInstID}
+                    windowSize={windowSize}
+                    vcId={vcId}
                   />
-                </div>
+                </DraggableInstance>
               );
+            } else if (instance.type === 'cvOutput') {
+              const output = instance.instance;
+              return (
+                <DraggableInstance
+                  key={output.name}
+                  index={instIx}
+                  instanceKey={output.name}
+                  moveInstance={moveInstance}
+                >
+                  <CVOutputInstanceComp output={output} parentInstance={parentInstance} />
+                </DraggableInstance>
+              );
+            } else {
+              throw new Error('Unknown instance type');
             }
-
-            return (
-              <CollapsedMIDIEditorShim
-                key={inst.id}
-                parentInstance={parentInstance}
-                inst={inst}
-                pxPerBeat={parentInstance.baseView.pxPerBeatStore}
-                scrollHorizontalBeats={parentInstance.baseView.scrollHorizontalBeatsStore}
-                expand={() => parentInstance.uiManager.expandUIInstance(inst.id)}
-                instIx={instIx}
-              />
-            );
-          } else if (instance.type === 'cvOutput') {
-            const output = instance.instance;
-            return (
-              <CVOutputControlsShim
-                key={output.name}
-                name={output.name}
-                state={output.state}
-                deleteOutput={() => parentInstance.deleteCVOutput(output.name)}
-                setName={newName => parentInstance.renameCVOutput(output.name, newName)}
-                registerInstance={uiInstance => output.registerUIInstance(uiInstance)}
-                setFrozenOutputValue={newFrozenOutputValue =>
-                  output.backend.setFrozenOutputValue(newFrozenOutputValue)
-                }
-                view={parentInstance.baseView.store}
-                getCursorPosBeats={() => parentInstance.playbackHandler.getCursorPosBeats()}
-                setCursorPosBeats={newCursorPosBeats =>
-                  void parentInstance.playbackHandler.setCursorPosBeats(newCursorPosBeats)
-                }
-              />
-            );
-          } else {
-            throw new Error('Unknown instance type');
-          }
-        })}
+          })}
+        </div>
       </div>
-    </div>
+    </DndProvider>
   );
 };
 
diff --git a/src/midiEditor/SvelteDragHandle.svelte b/src/midiEditor/SvelteDragHandle.svelte
new file mode 100644
index 00000000..4662d1b2
--- /dev/null
+++ b/src/midiEditor/SvelteDragHandle.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type React from 'react';
+
+  import ReactShim from 'src/misc/ReactShim.svelte';
+  import { DragHandle } from './DnD';
+
+  export let activateDrag: () => void;
+  export let style: React.CSSProperties | undefined = undefined;
+</script>
+
+<ReactShim Component={DragHandle} props={{ activateDrag, style }} />
diff --git a/src/midiEditor/index.ts b/src/midiEditor/index.ts
index 4cf6fcb0..0aab69ae 100644
--- a/src/midiEditor/index.ts
+++ b/src/midiEditor/index.ts
@@ -285,7 +285,7 @@ export class MIDIEditorInstance {
   }
 
   /**
-   * Retruns `true` if the loop point was actually updated and `false` if it wasn't updated due to
+   * Returns `true` if the loop point was actually updated and `false` if it wasn't updated due to
    * playback currently being active or something else.
    */
   public setLoopPoint(loopPoint: number | null): boolean {