diff --git a/src/App.vue b/src/App.vue
index f603998f..c441d41b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -109,6 +109,8 @@ const newline = ref(UNIX_NEWLINE);
 const colorScheme = ref<"light" | "dark">("light");
 const centsFractionDigits = ref(3);
 const decimalFractionDigits = ref(5);
+const showVirtualQwerty = ref(false);
+
 // Special keyboard codes also from local storage.
 const deactivationCode = ref("Backquote");
 const equaveUpCode = ref("NumpadMultiply");
@@ -746,6 +748,9 @@ onMounted(() => {
       storage.getItem("decimalFractionDigits")!
     );
   }
+  if ("showVirtualQwerty" in storage) {
+    showVirtualQwerty.value = storage.getItem("showVirtualQwerty") === "true";
+  }
 
   // Fetch special key map
   if ("deactivationCode" in storage) {
@@ -895,6 +900,9 @@ watch(centsFractionDigits, (newValue) =>
 watch(decimalFractionDigits, (newValue) =>
   window.localStorage.setItem("decimalFractionDigits", newValue.toString())
 );
+watch(showVirtualQwerty, (newValue) =>
+  window.localStorage.setItem("showVirtualQwerty", newValue.toString())
+);
 // Store keymaps
 watch(deactivationCode, (newValue) =>
   window.localStorage.setItem("deactivationCode", newValue)
@@ -922,6 +930,9 @@ watch(degreeDownCode, (newValue) =>
       <li><RouterLink to="/">Build Scale</RouterLink></li>
       <li><RouterLink to="/analysis">Analysis</RouterLink></li>
       <li><RouterLink to="/vk">Virtual Keyboard</RouterLink></li>
+      <li v-if="showVirtualQwerty">
+        <RouterLink to="/qwerty">Virtual QWERTY</RouterLink>
+      </li>
       <li><RouterLink to="/synth">Synth</RouterLink></li>
       <li><RouterLink to="/midi">MIDI I/O</RouterLink></li>
       <li><RouterLink to="/prefs">Preferences</RouterLink></li>
@@ -984,6 +995,9 @@ watch(degreeDownCode, (newValue) =>
     :sustainLevel="sustainLevel"
     :releaseTime="releaseTime"
     :maxPolyphony="maxPolyphony"
+    :typingKeyboard="typingKeyboard"
+    :keyboardMapping="keyboardMapping"
+    :showVirtualQwerty="showVirtualQwerty"
     @update:audioDelay="audioDelay = $event"
     @update:mainVolume="mainVolume = $event"
     @update:scaleName="scaleName = $event"
@@ -1008,6 +1022,7 @@ watch(degreeDownCode, (newValue) =>
     @update:colorScheme="colorScheme = $event"
     @update:centsFractionDigits="centsFractionDigits = $event"
     @update:decimalFractionDigits="decimalFractionDigits = $event"
+    @update:showVirtualQwerty="showVirtualQwerty = $event"
     @update:deactivationCode="deactivationCode = $event"
     @update:equaveUpCode="equaveUpCode = $event"
     @update:equaveDownCode="equaveDownCode = $event"
diff --git a/src/components/VirtualTypingKeyboard.vue b/src/components/VirtualTypingKeyboard.vue
new file mode 100644
index 00000000..a481d0e1
--- /dev/null
+++ b/src/components/VirtualTypingKeyboard.vue
@@ -0,0 +1,417 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, reactive, ref } from "vue";
+import { mmod } from "xen-dev-utils";
+import type { Keyboard, CoordinateKeyboardEvent } from "@/keyboard";
+import { CODES_LAYER_1 } from "@/keyboard";
+import { LEFT_MOUSE_BTN } from "@/constants";
+
+/** Unimplemented features:
+ * Key highlights on touch/click
+ * Global key off when clicking the button with that rectangle inside it
+ * Sustain when multi-touching with the shift buttons
+ */
+
+type NoteOff = () => void;
+type NoteOnCallback = (index: number) => NoteOff;
+
+const props = defineProps<{
+  baseIndex: number; // Should incorporate equave shift
+  baseMidiNote: number;
+  keyColors: string[];
+  keyboardMode: "isomorphic" | "piano";
+  colorScheme: "light" | "dark";
+  keyboardMapping: Map<string, number>;
+  isomorphicHorizontal: number;
+  isomorphicVertical: number;
+  noteOn: NoteOnCallback;
+  heldNotes: Map<number, number>;
+  typingKeyboard: Keyboard;
+  deactivationCode: string;
+  equaveUpCode: string;
+  equaveDownCode: string;
+  degreeUpCode: string;
+  degreeDownCode: string;
+  equaveShift: number;
+  degreeShift: number;
+}>();
+
+defineEmits(["update:equaveShift", "update:degreeShift"]);
+
+type VirtualKey = {
+  key: string;
+  x: number;
+  y: number;
+  index?: number;
+  color: string;
+  stroke: string;
+  class: {
+    black: boolean;
+    white: boolean;
+    active: boolean;
+  };
+};
+
+// Aesthetic state and properties (interacts with typing keyboard directly)
+
+const activeKeys = reactive(new Set());
+
+const disabledFill = computed(() =>
+  props.colorScheme === "light" ? "whitesmoke" : "gray"
+);
+
+const rows = computed(() => {
+  const colors = props.keyColors.length ? props.keyColors : ["white"];
+  const horizontal = props.isomorphicHorizontal;
+  const vertical = props.isomorphicVertical;
+  const base = props.baseIndex;
+  const midi = props.baseMidiNote;
+  const mapping = props.keyboardMapping;
+
+  const result: VirtualKey[][] = [];
+
+  const offsets = [200, 250, 280, 230];
+  let j = 0;
+  for (const codeRow of CODES_LAYER_1) {
+    const row = [];
+    let i = 0;
+    for (const code of codeRow) {
+      if (code === null || code === "Backquote") {
+        continue;
+      }
+      let index;
+      if (props.keyboardMode === "isomorphic") {
+        index = base + i * horizontal + (2 - j) * vertical;
+      } else {
+        index = mapping!.get(code);
+      }
+      const color =
+        index === undefined
+          ? disabledFill.value
+          : colors[mmod(index - midi, colors.length)];
+      const black = color.toLowerCase() === "black";
+      row.push({
+        key: code,
+        x: offsets[j] + 100 * i,
+        y: 100 + 100 * j,
+        index,
+        color: color,
+        stroke: index === undefined ? disabledFill.value : "dimgray",
+        class: {
+          black,
+          white: !black && index !== undefined,
+          active: activeKeys.has(code) && index !== undefined,
+        },
+      });
+      i++;
+    }
+    result.push(row);
+    j++;
+  }
+  return result;
+});
+
+const noteOffFill = ref("lightgray");
+const equaveUpFill = ref("lightgray");
+const equaveDownFill = ref("lightgray");
+const degreeUpFill = ref("lightgray");
+const degreeDownFill = ref("lightgray");
+const shiftLeftFill = ref("lightgray");
+const shiftRightFill = ref("lightgray");
+
+function typingKeyDown(event: CoordinateKeyboardEvent) {
+  activeKeys.add(event.code);
+  return () => activeKeys.delete(event.code);
+}
+
+function windowKeyDown(event: KeyboardEvent) {
+  const code = event.code;
+  if (code === props.deactivationCode) {
+    noteOffFill.value = "limegreen";
+  }
+  if (code === props.equaveUpCode) {
+    equaveUpFill.value = "limegreen";
+  }
+  if (code === props.equaveDownCode) {
+    equaveDownFill.value = "limegreen";
+  }
+  if (code === props.degreeUpCode) {
+    degreeUpFill.value = "limegreen";
+  }
+  if (code === props.degreeDownCode) {
+    degreeDownFill.value = "limegreen";
+  }
+  if (code === "ShiftLeft") {
+    shiftLeftFill.value = "limegreen";
+  }
+  if (code === "ShiftRight") {
+    shiftRightFill.value = "limegreen";
+  }
+}
+
+function windowKeyUp(event: KeyboardEvent) {
+  const code = event.code;
+  if (code === props.deactivationCode) {
+    noteOffFill.value = "lightgray";
+  }
+  if (code === props.equaveUpCode) {
+    equaveUpFill.value = "lightgray";
+  }
+  if (code === props.equaveDownCode) {
+    equaveDownFill.value = "lightgray";
+  }
+  if (code === props.degreeUpCode) {
+    degreeUpFill.value = "lightgray";
+  }
+  if (code === props.degreeDownCode) {
+    degreeDownFill.value = "lightgray";
+  }
+  if (code === "ShiftLeft") {
+    shiftLeftFill.value = "lightgray";
+  }
+  if (code === "ShiftRight") {
+    shiftRightFill.value = "lightgray";
+  }
+}
+
+// Synth interactive state and properties
+
+const noteOffs: Map<number, NoteOff> = new Map();
+
+const isMousePressed = ref(false);
+
+function start(index: number) {
+  noteOffs.set(index, props.noteOn(index));
+}
+
+function end(index: number) {
+  if (noteOffs.has(index)) {
+    noteOffs.get(index)!();
+    noteOffs.delete(index);
+  }
+}
+
+function onTouchEnd(event: TouchEvent, index: number) {
+  event.preventDefault();
+  end(index);
+}
+
+function onTouchStart(event: TouchEvent, index: number) {
+  event.preventDefault();
+  // Make sure that we start a new note.
+  end(index);
+
+  start(index);
+}
+
+function onMouseDown(event: MouseEvent, index: number) {
+  if (event.button !== LEFT_MOUSE_BTN) {
+    return;
+  }
+  event.preventDefault();
+  isMousePressed.value = true;
+  start(index);
+}
+
+function onMouseUp(event: MouseEvent, index: number) {
+  if (event.button !== LEFT_MOUSE_BTN) {
+    return;
+  }
+  event.preventDefault();
+  isMousePressed.value = false;
+  end(index);
+}
+
+function onMouseEnter(event: MouseEvent, index: number) {
+  if (!isMousePressed.value) {
+    return;
+  }
+  event.preventDefault();
+  start(index);
+}
+
+function onMouseLeave(event: MouseEvent, index: number) {
+  if (!isMousePressed.value) {
+    return;
+  }
+  event.preventDefault();
+  end(index);
+}
+
+function windowMouseUp(event: MouseEvent) {
+  if (event.button === LEFT_MOUSE_BTN) {
+    isMousePressed.value = false;
+  }
+}
+
+onMounted(() => {
+  props.typingKeyboard.addKeydownListener(typingKeyDown);
+  window.addEventListener("keydown", windowKeyDown);
+  window.addEventListener("keyup", windowKeyUp);
+  window.addEventListener("mouseup", windowMouseUp);
+});
+
+onUnmounted(() => {
+  props.typingKeyboard.removeEventListener(typingKeyDown);
+  window.removeEventListener("keydown", windowKeyDown);
+  window.removeEventListener("keyup", windowKeyUp);
+  noteOffs.forEach((off) => {
+    if (off !== null) {
+      off();
+    }
+  });
+  window.removeEventListener("mouseup", windowMouseUp);
+});
+</script>
+
+<template>
+  <svg
+    width="200"
+    height="100"
+    viewBox="0 0 1700 800"
+    style="width: 100%; height: auto"
+  >
+    <g class="click-not-implemented">
+      <rect
+        x="100"
+        y="100"
+        width="98"
+        height="98"
+        rx="5"
+        ry="5"
+        :fill="noteOffFill"
+        stroke="lightslategray"
+        stroke-width="1"
+      />
+      <rect
+        x="125"
+        y="140"
+        width="50"
+        height="20"
+        fill="none"
+        stroke="dimgray"
+        stroke-width="1"
+        pointer-events="none"
+      />
+    </g>
+
+    <g @click="$emit('update:equaveShift', equaveShift - 1)">
+      <rect
+        x="1520"
+        y="20"
+        width="48"
+        height="48"
+        rx="3"
+        ry="3"
+        :fill="equaveDownFill"
+        stroke="lightslategray"
+        stroke-width="1"
+      />
+      <text x="1530" y="60" font-size="50" pointer-events="none">↓</text>
+    </g>
+    <g @click="$emit('update:equaveShift', equaveShift + 1)">
+      <rect
+        x="1570"
+        y="20"
+        width="48"
+        height="48"
+        rx="3"
+        ry="3"
+        :fill="equaveUpFill"
+        stroke="lightslategray"
+        stroke-width="1"
+      />
+      <text x="1580" y="60" font-size="50" pointer-events="none">↑</text>
+    </g>
+    <g @click="$emit('update:degreeShift', degreeShift - 1)">
+      <rect
+        x="1620"
+        y="20"
+        width="48"
+        height="48"
+        rx="3"
+        ry="3"
+        :fill="degreeDownFill"
+        stroke="lightslategray"
+        stroke-width="1"
+      />
+      <text x="1622" y="55" font-size="50" pointer-events="none">←</text>
+    </g>
+    <g @click="$emit('update:degreeShift', degreeShift + 1)">
+      <rect
+        x="1620"
+        y="70"
+        width="48"
+        height="98"
+        rx="3"
+        ry="3"
+        :fill="degreeUpFill"
+        stroke="lightslategray"
+        stroke-width="1"
+      />
+      <text x="1620" y="125" font-size="50" pointer-events="none">→</text>
+    </g>
+
+    <template v-for="row of rows">
+      <rect
+        v-for="key of row"
+        :key="key.key"
+        :class="key.class"
+        :x="key.x"
+        :y="key.y"
+        :fill="key.color"
+        :stroke="key.stroke"
+        width="98"
+        height="98"
+        rx="5"
+        ry="5"
+        stroke-width="1"
+        @touchstart="onTouchStart($event, key.index!)"
+        @touchend="onTouchEnd($event, key.index!)"
+        @touchcancel="onTouchEnd($event, key.index!)"
+        @mousedown="onMouseDown($event, key.index!)"
+        @mouseup="onMouseUp($event, key.index!)"
+        @mouseenter="onMouseEnter($event, key.index!)"
+        @mouseleave="onMouseLeave($event, key.index!)"
+      />
+    </template>
+    <rect
+      x="100"
+      y="400"
+      width="128"
+      height="98"
+      rx="5"
+      ry="5"
+      :fill="shiftLeftFill"
+      stroke="lightslategray"
+      stroke-width="1"
+      class="click-not-implemented"
+    />
+    <rect
+      x="1330"
+      y="400"
+      width="250"
+      height="98"
+      rx="5"
+      ry="5"
+      :fill="shiftRightFill"
+      stroke="lightslategray"
+      stroke-width="1"
+      class="click-not-implemented"
+    />
+  </svg>
+</template>
+
+<style scoped>
+svg {
+  user-select: none;
+}
+svg rect.white.active {
+  fill: lightgreen !important;
+}
+svg rect.black.active {
+  fill: green;
+}
+.click-not-implemented {
+  cursor: not-allowed;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 6432376e..ce43c333 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -62,6 +62,11 @@ const router = createRouter({
       name: "virtualKeyboard",
       component: () => import("../views/VirtualKeyboardView.vue"),
     },
+    {
+      path: "/qwerty",
+      name: "qwerty",
+      component: () => import("../views/VirtualQwerty.vue"),
+    },
     // Root aliases mainly for compatibility with old SW1 URLs.
     {
       path: "/index.html",
diff --git a/src/views/PreferencesView.vue b/src/views/PreferencesView.vue
index acba9e0c..6c59dbac 100644
--- a/src/views/PreferencesView.vue
+++ b/src/views/PreferencesView.vue
@@ -7,6 +7,7 @@ const props = defineProps<{
   colorScheme: "light" | "dark";
   centsFractionDigits: number;
   decimalFractionDigits: number;
+  showVirtualQwerty: boolean;
 }>();
 
 const emit = defineEmits([
@@ -15,6 +16,7 @@ const emit = defineEmits([
   "update:centsFractionDigits",
   "update:decimalFractionDigits",
   "update:virtualKeyboardMode",
+  "update:showVirtualQwerty",
 ]);
 
 const newline = computed({
@@ -33,6 +35,10 @@ const decimalFractionDigits = computed({
   get: () => props.decimalFractionDigits,
   set: (newValue: number) => emit("update:decimalFractionDigits", newValue),
 });
+const showVirtualQwerty = computed({
+  get: () => props.showVirtualQwerty,
+  set: (newValue: boolean) => emit("update:showVirtualQwerty", newValue),
+});
 </script>
 
 <template>
@@ -56,6 +62,17 @@ const decimalFractionDigits = computed({
             </select>
           </div>
         </div>
+        <h2>Advanced</h2>
+        <div class="control-group">
+          <div class="control checkbox-container">
+            <input
+              id="virtual-qwerty"
+              type="checkbox"
+              v-model="showVirtualQwerty"
+            />
+            <label for="virtual-qwerty"> Virtual QWERTY in top menu</label>
+          </div>
+        </div>
       </div>
       <div class="column">
         <h2>Appearance</h2>
diff --git a/src/views/VirtualQwerty.vue b/src/views/VirtualQwerty.vue
new file mode 100644
index 00000000..262ed5c0
--- /dev/null
+++ b/src/views/VirtualQwerty.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import VirtualTypingKeyboard from "@/components/VirtualTypingKeyboard.vue";
+import type { Keyboard } from "@/keyboard";
+import type { Scale } from "scale-workshop-core";
+
+type NoteOff = () => void;
+type NoteOnCallback = (index: number) => NoteOff;
+
+defineProps<{
+  baseMidiNote: number;
+  equaveShift: number;
+  degreeShift: number;
+  isomorphicHorizontal: number;
+  isomorphicVertical: number;
+  scale: Scale;
+  keyColors: string[];
+  noteOn: NoteOnCallback;
+  heldNotes: Map<number, number>;
+  keyboardMode: "isomorphic" | "piano";
+  colorScheme: "light" | "dark";
+  keyboardMapping: Map<string, number>;
+  typingKeyboard: Keyboard;
+  deactivationCode: string;
+  equaveUpCode: string;
+  equaveDownCode: string;
+  degreeUpCode: string;
+  degreeDownCode: string;
+}>();
+
+defineEmits(["update:equaveShift", "update:degreeShift"]);
+</script>
+
+<template>
+  <main>
+    <VirtualTypingKeyboard
+      :baseIndex="baseMidiNote + equaveShift * scale.size + degreeShift"
+      :baseMidiNote="baseMidiNote"
+      :isomorphicHorizontal="isomorphicHorizontal"
+      :keyboardMode="keyboardMode"
+      :colorScheme="colorScheme"
+      :keyboardMapping="keyboardMapping"
+      :isomorphicVertical="isomorphicVertical"
+      :keyColors="keyColors"
+      :noteOn="noteOn"
+      :heldNotes="heldNotes"
+      :typingKeyboard="typingKeyboard"
+      :deactivationCode="deactivationCode"
+      :equaveUpCode="equaveUpCode"
+      :equaveDownCode="equaveDownCode"
+      :degreeUpCode="degreeUpCode"
+      :degreeDownCode="degreeDownCode"
+      :equaveShift="equaveShift"
+      :degreeShift="degreeShift"
+      @update:equaveShift="$emit('update:equaveShift', $event)"
+      @update:degreeShift="$emit('update:degreeShift', $event)"
+    ></VirtualTypingKeyboard>
+  </main>
+</template>