diff --git a/src/components/BaseKeymap.vue b/src/components/BaseKeymap.vue
index 950acd8c6859..64547d83ce45 100644
--- a/src/components/BaseKeymap.vue
+++ b/src/components/BaseKeymap.vue
@@ -23,9 +23,9 @@ export default {
       this.width = max.x;
       this.height = max.y;
     },
-    calculateMax(newLayout) {
-      const layout = this.layouts[newLayout];
-      const max = layout.reduce(
+    calculateMax(layout) {
+      const layoutArray = this.layouts[layout];
+      const max = layoutArray.reduce(
         (acc, pos) => {
           let _pos = Object.assign({ w: 1, h: 1 }, pos);
           const coor = this.calcKeyKeymapPos(_pos.x, _pos.y);
diff --git a/src/components/VisualTesterKeymap.vue b/src/components/VisualTesterKeymap.vue
index 878d250aef9a..765443e6f4dc 100644
--- a/src/components/VisualTesterKeymap.vue
+++ b/src/components/VisualTesterKeymap.vue
@@ -1,5 +1,17 @@
 <template>
   <div class="tester">
+    <div class="layout-selector-radios">
+      <slot v-for="_layout in availableLayouts">
+        <input
+          :id="_layout"
+          :key="_layout"
+          :value="_layout"
+          v-model="layout"
+          type="radio"
+        />
+        <label :for="_layout" :key="_layout">{{ _layout }}</label>
+      </slot>
+    </div>
     <div class="visual-tester-keymap" :style="styles">
       <template v-for="meta in testerLayer">
         <component
@@ -72,15 +84,15 @@ export default {
     document.removeEventListener('keyup', this.keyup);
   },
   computed: {
-    ...mapState('tester', [
-      'layout',
-      'defaults',
-      'layouts',
-      'config',
-      'keymap',
+    ...mapState('tester', ['defaults', 'layouts', 'config', 'keymap']),
+    ...mapGetters('keymap', ['colorway']),
+    ...mapGetters('tester', [
+      'availableLayouts',
+      'getQMKCode',
+      'activeKeymap',
+      'activeLayoutMeta',
       'codeToPosition'
     ]),
-    ...mapGetters('keymap', ['colorway']),
     styles() {
       let styles = [];
       styles.push(`width: ${this.width}px;`);
@@ -88,16 +100,25 @@ export default {
       styles.push(`font-size: ${this.fontsize * this.config.SCALE}em;`);
       return styles.join('');
     },
+    layout: {
+      get() {
+        return this.$store.state.tester.layout;
+      },
+      set(value) {
+        this.$store.commit('tester/reset', value);
+        this.$store.commit('tester/setLayout', value);
+      }
+    },
     testerLayer() {
-      if (this.keymap.length === 0) {
+      const keymap = this.activeKeymap;
+      if (isUndefined(keymap)) {
         return [];
       }
-      const layout = this.layouts[this.layout];
-      const keymap = this.keymap[0];
+
       // Calculate Max with given layout
       // eslint-disable-next-line no-console
       this.profile && console.time('currentLayer');
-      let curLayer = layout.map((pos, index) => {
+      let curLayer = this.activeLayoutMeta.map((pos, index) => {
         let _pos = Object.assign({ w: 1, h: 1 }, pos);
         const coor = this.calcKeyKeymapPos(_pos.x, _pos.y);
         const dims = this.calcKeyKeymapDims(_pos.w, _pos.h);
@@ -148,7 +169,9 @@ export default {
       const pos = this.codeToPosition[this.firefoxKeys(ev.code)];
       this.writeToStatus(this.formatLog('KEY-UP', pos, evStr));
       if (!isUndefined(pos)) {
-        this.setDetected(pos);
+        this.setDetected({
+          pos
+        });
       }
     },
     keydown(ev) {
@@ -166,7 +189,7 @@ export default {
       this.lastCode = ev.code;
       this.lastKeyCode = ev.keyCode;
       if (!isUndefined(pos)) {
-        this.setActive(pos);
+        this.setActive({ pos });
       }
     },
     scrollToEnd() {
@@ -193,22 +216,17 @@ export default {
       msg.unshift(
         [
           'Event key:',
-          this.greenMarkup(ev.key, 10),
+          this.greenMarkup(ev.key, 11),
           'Code:',
-          this.greenMarkup(ev.code, 11),
+          this.greenMarkup(ev.code, 13),
           'KeyCode:',
           ev.keyCode
         ].join(' ')
       );
       return msg.join(' ');
     },
-    getQMKCode(pos) {
-      if (pos === undefined) {
-        return '';
-      }
-      return this.$store.state.tester.keymap[0][pos].code;
-    },
     firefoxKeys(code) {
+      // Remap certain codes on Firefox for consistency
       switch (code) {
         case 'OSLeft':
           return 'MetaLeft';
@@ -240,13 +258,19 @@ export default {
 };
 </script>
 <style>
+.layout-selector-container select {
+  padding: 5px 4px;
+  border-radius: 4px;
+  border: 1px solid #cdcdcd;
+  margin-left: 10px;
+}
 span.log-green {
   color: lightgreen;
 }
 .tester {
   margin-top: 35px;
   display: grid;
-  grid-template: 1fr 1fr / 1fr;
+  grid-template: 30px 1fr 1fr / 1fr;
   justify-items: center;
 }
 .visual-tester-keymap {
diff --git a/src/store/modules/tester.js b/src/store/modules/tester.js
deleted file mode 100644
index 396ed5150b3d..000000000000
--- a/src/store/modules/tester.js
+++ /dev/null
@@ -1,377 +0,0 @@
-import defaults from './config';
-import Vue from 'vue';
-
-const codeToPosition = [
-  'Escape',
-  'F1',
-  'F2',
-  'F3',
-  'F4',
-  'F5',
-  'F6',
-  'F7',
-  'F8',
-  'F9',
-  'F10',
-  'F11',
-  'F12',
-  'F13',
-  'ScrollLock',
-  'Pause',
-  'Backquote',
-  'Digit1',
-  'Digit2',
-  'Digit3',
-  'Digit4',
-  'Digit5',
-  'Digit6',
-  'Digit7',
-  'Digit8',
-  'Digit9',
-  'Digit0',
-  'Minus',
-  'Equal',
-  'Backspace',
-  'Insert',
-  'Home',
-  'PageUp',
-  'NumLock',
-  'NumpadDivide',
-  'NumpadMultiply',
-  'NumpadSubtract',
-  'Tab',
-  'KeyQ',
-  'KeyW',
-  'KeyE',
-  'KeyR',
-  'KeyT',
-  'KeyY',
-  'KeyU',
-  'KeyI',
-  'KeyO',
-  'KeyP',
-  'BracketLeft',
-  'BracketRight',
-  'Backslash',
-  'Delete',
-  'End',
-  'PageDown',
-  'Numpad7',
-  'Numpad8',
-  'Numpad9',
-  'NumpadAdd',
-  'CapsLock',
-  'KeyA',
-  'KeyS',
-  'KeyD',
-  'KeyF',
-  'KeyG',
-  'KeyH',
-  'KeyJ',
-  'KeyK',
-  'KeyL',
-  'Semicolon',
-  'Quote',
-  'Enter',
-  'Numpad4',
-  'Numpad5',
-  'Numpad6',
-  'ShiftLeft',
-  'KeyZ',
-  'KeyX',
-  'KeyC',
-  'KeyV',
-  'KeyB',
-  'KeyN',
-  'KeyM',
-  'Comma',
-  'Period',
-  'Slash',
-  'ShiftRight',
-  'ArrowUp',
-  'Numpad1',
-  'Numpad2',
-  'Numpad3',
-  'NumpadEnter',
-  'ControlLeft',
-  'MetaLeft',
-  'AltLeft',
-  'Space',
-  'AltRight',
-  'MetaRight',
-  'ContextMenu',
-  'ControlRight',
-  'ArrowLeft',
-  'ArrowDown',
-  'ArrowRight',
-  'Numpad0',
-  'NumpadDecimal'
-].reduce((acc, code, idx) => {
-  acc[code] = idx;
-  return acc;
-}, {});
-
-const state = {
-  defaults,
-  codeToPosition,
-  config: Object.assign({}, defaults),
-  layout: 'LAYOUT',
-  keymap: [],
-  layouts: {
-    LAYOUT: [
-      { label: 'Esc', x: 0, y: 0 },
-      { label: 'F1', x: 2, y: 0 },
-      { label: 'F2', x: 3, y: 0 },
-      { label: 'F3', x: 4, y: 0 },
-      { label: 'F4', x: 5, y: 0 },
-      { label: 'F5', x: 6.5, y: 0 },
-      { label: 'F6', x: 7.5, y: 0 },
-      { label: 'F7', x: 8.5, y: 0 },
-      { label: 'F8', x: 9.5, y: 0 },
-      { label: 'F9', x: 11, y: 0 },
-      { label: 'F10', x: 12, y: 0 },
-      { label: 'F11', x: 13, y: 0 },
-      { label: 'F12', x: 14, y: 0 },
-      { label: 'PrtSc', x: 15.25, y: 0 },
-      { label: 'Scroll Lock', x: 16.25, y: 0 },
-      { label: 'Pause', x: 17.25, y: 0 },
-      { label: '~', x: 0, y: 1.5 },
-      { label: '!', x: 1, y: 1.5 },
-      { label: '@', x: 2, y: 1.5 },
-      { label: '#', x: 3, y: 1.5 },
-      { label: '$', x: 4, y: 1.5 },
-      { label: '%', x: 5, y: 1.5 },
-      { label: '^', x: 6, y: 1.5 },
-      { label: '&', x: 7, y: 1.5 },
-      { label: '*', x: 8, y: 1.5 },
-      { label: '(', x: 9, y: 1.5 },
-      { label: ')', x: 10, y: 1.5 },
-      { label: '_', x: 11, y: 1.5 },
-      { label: '+', x: 12, y: 1.5 },
-      { label: 'Backspace', x: 13, y: 1.5, w: 2 },
-      { label: 'Insert', x: 15.25, y: 1.5 },
-      { label: 'Home', x: 16.25, y: 1.5 },
-      { label: 'PgUp', x: 17.25, y: 1.5 },
-      { label: 'Num Lock', x: 18.5, y: 1.5 },
-      { label: '/', x: 19.5, y: 1.5 },
-      { label: '*', x: 20.5, y: 1.5 },
-      { label: '-', x: 21.5, y: 1.5 },
-      { label: 'Tab', x: 0, y: 2.5, w: 1.5 },
-      { label: 'Q', x: 1.5, y: 2.5 },
-      { label: 'W', x: 2.5, y: 2.5 },
-      { label: 'E', x: 3.5, y: 2.5 },
-      { label: 'R', x: 4.5, y: 2.5 },
-      { label: 'T', x: 5.5, y: 2.5 },
-      { label: 'Y', x: 6.5, y: 2.5 },
-      { label: 'U', x: 7.5, y: 2.5 },
-      { label: 'I', x: 8.5, y: 2.5 },
-      { label: 'O', x: 9.5, y: 2.5 },
-      { label: 'P', x: 10.5, y: 2.5 },
-      { label: '{', x: 11.5, y: 2.5 },
-      { label: '}', x: 12.5, y: 2.5 },
-      { label: '|', x: 13.5, y: 2.5, w: 1.5 },
-      { label: 'Delete', x: 15.25, y: 2.5 },
-      { label: 'End', x: 16.25, y: 2.5 },
-      { label: 'PgDn', x: 17.25, y: 2.5 },
-      { label: '7', x: 18.5, y: 2.5 },
-      { label: '8', x: 19.5, y: 2.5 },
-      { label: '9', x: 20.5, y: 2.5 },
-      { label: '+', x: 21.5, y: 2.5, h: 2 },
-      { label: 'Caps Lock', x: 0, y: 3.5, w: 1.75 },
-      { label: 'A', x: 1.75, y: 3.5 },
-      { label: 'S', x: 2.75, y: 3.5 },
-      { label: 'D', x: 3.75, y: 3.5 },
-      { label: 'F', x: 4.75, y: 3.5 },
-      { label: 'G', x: 5.75, y: 3.5 },
-      { label: 'H', x: 6.75, y: 3.5 },
-      { label: 'J', x: 7.75, y: 3.5 },
-      { label: 'K', x: 8.75, y: 3.5 },
-      { label: 'L', x: 9.75, y: 3.5 },
-      { label: ':', x: 10.75, y: 3.5 },
-      { label: '"', x: 11.75, y: 3.5 },
-      { label: 'Enter', x: 12.75, y: 3.5, w: 2.25 },
-      { label: '4', x: 18.5, y: 3.5 },
-      { label: '5', x: 19.5, y: 3.5 },
-      { label: '6', x: 20.5, y: 3.5 },
-      { label: 'Shift', x: 0, y: 4.5, w: 2.25 },
-      { label: 'Z', x: 2.25, y: 4.5 },
-      { label: 'X', x: 3.25, y: 4.5 },
-      { label: 'C', x: 4.25, y: 4.5 },
-      { label: 'V', x: 5.25, y: 4.5 },
-      { label: 'B', x: 6.25, y: 4.5 },
-      { label: 'N', x: 7.25, y: 4.5 },
-      { label: 'M', x: 8.25, y: 4.5 },
-      { label: '<', x: 9.25, y: 4.5 },
-      { label: '>', x: 10.25, y: 4.5 },
-      { label: '?', x: 11.25, y: 4.5 },
-      { label: 'Shift', x: 12.25, y: 4.5, w: 2.75 },
-      { label: '\u2191', x: 16.25, y: 4.5 },
-      { label: '1', x: 18.5, y: 4.5 },
-      { label: '2', x: 19.5, y: 4.5 },
-      { label: '3', x: 20.5, y: 4.5 },
-      { label: 'Enter', x: 21.5, y: 4.5, h: 2 },
-      { label: 'Ctrl', x: 0, y: 5.5, w: 1.25 },
-      { label: 'Win', x: 1.25, y: 5.5, w: 1.25 },
-      { label: 'Alt', x: 2.5, y: 5.5, w: 1.25 },
-      { x: 3.75, y: 5.5, w: 6.25 },
-      { label: 'Alt', x: 10, y: 5.5, w: 1.25 },
-      { label: 'Win', x: 11.25, y: 5.5, w: 1.25 },
-      { label: 'Menu', x: 12.5, y: 5.5, w: 1.25 },
-      { label: 'Ctrl', x: 13.75, y: 5.5, w: 1.25 },
-      { label: '\u2190', x: 15.25, y: 5.5 },
-      { label: '\u2193', x: 16.25, y: 5.5 },
-      { label: '\u2192', x: 17.25, y: 5.5 },
-      { label: '0', x: 18.5, y: 5.5, w: 2 },
-      { label: '.', x: 20.5, y: 5.5 }
-    ]
-  }
-};
-
-const getters = {};
-
-const actions = {
-  init({ state, commit }) {
-    const store = this;
-    commit('setKeymap', [
-      [
-        'KC_ESC',
-        'KC_F1',
-        'KC_F2',
-        'KC_F3',
-        'KC_F4',
-        'KC_F5',
-        'KC_F6',
-        'KC_F7',
-        'KC_F8',
-        'KC_F9',
-        'KC_F10',
-        'KC_F11',
-        'KC_F12',
-        'KC_PSCR',
-        'KC_SLCK',
-        'KC_PAUS',
-        'KC_GRV',
-        'KC_1',
-        'KC_2',
-        'KC_3',
-        'KC_4',
-        'KC_5',
-        'KC_6',
-        'KC_7',
-        'KC_8',
-        'KC_9',
-        'KC_0',
-        'KC_MINS',
-        'KC_EQL',
-        'KC_BSPC',
-        'KC_INS',
-        'KC_HOME',
-        'KC_PGUP',
-        'KC_NLCK',
-        'KC_PSLS',
-        'KC_PAST',
-        'KC_PMNS',
-        'KC_TAB',
-        'KC_Q',
-        'KC_W',
-        'KC_E',
-        'KC_R',
-        'KC_T',
-        'KC_Y',
-        'KC_U',
-        'KC_I',
-        'KC_O',
-        'KC_P',
-        'KC_LBRC',
-        'KC_RBRC',
-        'KC_BSLS',
-        'KC_DEL',
-        'KC_END',
-        'KC_PGDN',
-        'KC_P7',
-        'KC_P8',
-        'KC_P9',
-        'KC_PPLS',
-        'KC_CAPS',
-        'KC_A',
-        'KC_S',
-        'KC_D',
-        'KC_F',
-        'KC_G',
-        'KC_H',
-        'KC_J',
-        'KC_K',
-        'KC_L',
-        'KC_SCLN',
-        'KC_QUOT',
-        'KC_ENT',
-        'KC_P4',
-        'KC_P5',
-        'KC_P6',
-        'KC_LSFT',
-        'KC_Z',
-        'KC_X',
-        'KC_C',
-        'KC_V',
-        'KC_B',
-        'KC_N',
-        'KC_M',
-        'KC_COMM',
-        'KC_DOT',
-        'KC_SLSH',
-        'KC_RSFT',
-        'KC_UP',
-        'KC_P1',
-        'KC_P2',
-        'KC_P3',
-        'KC_PENT',
-        'KC_LCTL',
-        'KC_LGUI',
-        'KC_LALT',
-        'KC_SPC',
-        'KC_RALT',
-        'KC_RGUI',
-        'KC_APP',
-        'KC_RCTL',
-        'KC_LEFT',
-        'KC_DOWN',
-        'KC_RGHT',
-        'KC_P0',
-        'KC_PDOT'
-      ].map(code => {
-        const meta = store.getters['keycodes/lookupKeycode'](code);
-        return {
-          ...meta
-        };
-      })
-    ]);
-    return state.keymap;
-  }
-};
-
-const mutations = {
-  setKeymap(state, keymap) {
-    state.keymap = keymap;
-  },
-  setActive(state, pos) {
-    Vue.set(state.keymap[0][pos], 'active', true);
-    Vue.set(state.keymap[0][pos], 'detected', false);
-  },
-  setDetected(state, pos) {
-    Vue.set(state.keymap[0][pos], 'active', false);
-    Vue.set(state.keymap[0][pos], 'detected', true);
-  },
-  reset(state) {
-    state.keymap[0].map((v, idx) => {
-      Vue.set(state.keymap[0][idx], 'detected', false);
-    });
-  }
-};
-
-export default {
-  namespaced: true,
-  state,
-  getters,
-  actions,
-  mutations
-};
diff --git a/src/store/modules/tester/codeToPos.js b/src/store/modules/tester/codeToPos.js
new file mode 100644
index 000000000000..30b66b3ac9a9
--- /dev/null
+++ b/src/store/modules/tester/codeToPos.js
@@ -0,0 +1,142 @@
+const ROW1 = [
+  'Escape',
+  'F1',
+  'F2',
+  'F3',
+  'F4',
+  'F5',
+  'F6',
+  'F7',
+  'F8',
+  'F9',
+  'F10',
+  'F11',
+  'F12',
+  'F13',
+  'ScrollLock',
+  'Pause'
+];
+
+const ROW2 = [
+  'Backquote',
+  'Digit1',
+  'Digit2',
+  'Digit3',
+  'Digit4',
+  'Digit5',
+  'Digit6',
+  'Digit7',
+  'Digit8',
+  'Digit9',
+  'Digit0',
+  'Minus',
+  'Equal',
+  'Backspace',
+  'Insert',
+  'Home',
+  'PageUp',
+  'NumLock',
+  'NumpadDivide',
+  'NumpadMultiply',
+  'NumpadSubtract'
+];
+
+const ROW3 = [
+  'Tab',
+  'KeyQ',
+  'KeyW',
+  'KeyE',
+  'KeyR',
+  'KeyT',
+  'KeyY',
+  'KeyU',
+  'KeyI',
+  'KeyO',
+  'KeyP',
+  'BracketLeft',
+  'BracketRight',
+  'Backslash',
+  'Delete',
+  'End',
+  'PageDown',
+  'Numpad7',
+  'Numpad8',
+  'Numpad9',
+  'NumpadAdd'
+];
+
+// ISO Row 3 is different from ANSI by replacing Backslash with Enter
+const ISO_ROW3 = [
+  ...ROW3.slice(0, ROW3.indexOf('Backslash')),
+  'Enter',
+  ...ROW3.slice(ROW3.lastIndexOf('Delete'))
+];
+
+const ROW4 = [
+  'CapsLock',
+  'KeyA',
+  'KeyS',
+  'KeyD',
+  'KeyF',
+  'KeyG',
+  'KeyH',
+  'KeyJ',
+  'KeyK',
+  'KeyL',
+  'Semicolon',
+  'Quote',
+  'Enter',
+  'Numpad4',
+  'Numpad5',
+  'Numpad6'
+];
+
+// ISO Row 4 replaces Enter with Backslash
+const ISO_ROW4 = [
+  ...ROW4.slice(0, ROW4.indexOf('Enter')),
+  'Backslash',
+  ...ROW4.slice(ROW4.lastIndexOf('Numpad4'))
+];
+
+const ROW5 = [
+  'ShiftLeft',
+  'KeyZ',
+  'KeyX',
+  'KeyC',
+  'KeyV',
+  'KeyB',
+  'KeyN',
+  'KeyM',
+  'Comma',
+  'Period',
+  'Slash',
+  'ShiftRight',
+  'ArrowUp',
+  'Numpad1',
+  'Numpad2',
+  'Numpad3',
+  'NumpadEnter'
+];
+
+// ISO Row 5 has an extra key Non-US Backslash after left shift
+const ISO_ROW5 = [ROW5[0], 'IntlBackslash', ...ROW5.slice(1)];
+
+const ROW6 = [
+  'ControlLeft',
+  'MetaLeft',
+  'AltLeft',
+  'Space',
+  'AltRight',
+  'MetaRight',
+  'ContextMenu',
+  'ControlRight',
+  'ArrowLeft',
+  'ArrowDown',
+  'ArrowRight',
+  'Numpad0',
+  'NumpadDecimal'
+];
+
+const ANSI = [...ROW1, ...ROW2, ...ROW3, ...ROW4, ...ROW5, ...ROW6];
+const ISO = [...ROW1, ...ROW2, ...ISO_ROW3, ...ISO_ROW4, ...ISO_ROW5, ...ROW6];
+export default { ANSI, ISO };
diff --git a/src/store/modules/tester/index.js b/src/store/modules/tester/index.js
new file mode 100644
index 000000000000..636cb175ed57
--- /dev/null
+++ b/src/store/modules/tester/index.js
@@ -0,0 +1,115 @@
+import defaults from '../config';
+import keys from 'lodash/keys';
+import Vue from 'vue';
+import qmkToPos from './qmk';
+import codeToPos from './codeToPos';
+import layouts from './layouts';
+import isUndefined from 'lodash/isUndefined';
+
+function reduceCodeToPos(arr) {
+  // Create look up table for Browser Code to Layout position
+  return arr.reduce((acc, code, idx) => {
+    acc[code] = idx;
+    return acc;
+  }, {});
+}
+
+const codeToPosition = {
+  ANSI: reduceCodeToPos(codeToPos.ANSI),
+  ISO: reduceCodeToPos(codeToPos.ISO)
+};
+
+function getDefaultLayout() {
+  const userLang = navigator.language || navigator.userLanguage;
+  let layout = 'ANSI';
+  if (userLang.toLowerCase().indexOf('en') < 0) {
+    layout = 'ISO';
+  }
+  return layout;
+}
+
+const state = {
+  defaults,
+  codeToPosition,
+  config: Object.assign({}, defaults),
+  layout: getDefaultLayout(),
+  keymap: {},
+  layouts: {
+    ISO: layouts.ISO,
+    ANSI: layouts.ANSI
+  }
+};
+
+const getters = {
+  availableLayouts(state) {
+    return keys(state.layouts).sort();
+  },
+  getQMKCode(state) {
+    return pos => {
+      if (isUndefined(pos)) {
+        return '';
+      }
+      return state.keymap[state.layout][pos].code;
+    };
+  },
+  activeKeymap(state) {
+    return state.keymap[state.layout];
+  },
+  activeLayoutMeta(state) {
+    return state.layouts[state.layout];
+  },
+  codeToPosition(state) {
+    return state.codeToPosition[state.layout];
+  }
+};
+
+function mapKeymap(store, arr) {
+  // Create look up table for QMK Code to Layout position
+  return arr.map(code => {
+    const meta = store.getters['keycodes/lookupKeycode'](code);
+    return {
+      ...meta
+    };
+  });
+}
+
+const actions = {
+  init({ state, commit }) {
+    const store = this;
+    commit('setKeymap', {
+      ANSI: mapKeymap(store, qmkToPos.ANSI),
+      ISO: mapKeymap(store, qmkToPos.ISO)
+    });
+    return state.keymap;
+  }
+};
+
+const mutations = {
+  setLayout(state, layout) {
+    state.layout = layout;
+  },
+  setKeymap(state, keymap) {
+    state.keymap = keymap;
+  },
+  setActive(state, { pos }) {
+    Vue.set(state.keymap[state.layout][pos], 'active', true);
+    Vue.set(state.keymap[state.layout][pos], 'detected', false);
+  },
+  setDetected(state, { pos }) {
+    Vue.set(state.keymap[state.layout][pos], 'active', false);
+    Vue.set(state.keymap[state.layout][pos], 'detected', true);
+  },
+  reset(state) {
+    state.keymap[state.layout].forEach((v, idx) => {
+      Vue.set(state.keymap[state.layout][idx], 'detected', false);
+    });
+  }
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+};
diff --git a/src/store/modules/tester/layouts.js b/src/store/modules/tester/layouts.js
new file mode 100644
index 000000000000..30b42e362a74
--- /dev/null
+++ b/src/store/modules/tester/layouts.js
@@ -0,0 +1,185 @@
+const ROW1 = [
+  { label: 'Esc', x: 0, y: 0 },
+  { label: 'F1', x: 2, y: 0 },
+  { label: 'F2', x: 3, y: 0 },
+  { label: 'F3', x: 4, y: 0 },
+  { label: 'F4', x: 5, y: 0 },
+  { label: 'F5', x: 6.5, y: 0 },
+  { label: 'F6', x: 7.5, y: 0 },
+  { label: 'F7', x: 8.5, y: 0 },
+  { label: 'F8', x: 9.5, y: 0 },
+  { label: 'F9', x: 11, y: 0 },
+  { label: 'F10', x: 12, y: 0 },
+  { label: 'F11', x: 13, y: 0 },
+  { label: 'F12', x: 14, y: 0 },
+  { label: 'PrtSc', x: 15.25, y: 0 },
+  { label: 'Scroll Lock', x: 16.25, y: 0 },
+  { label: 'Pause', x: 17.25, y: 0 }
+];
+const ROW2 = [
+  { label: '~', x: 0, y: 1.5 },
+  { label: '!', x: 1, y: 1.5 },
+  { label: '@', x: 2, y: 1.5 },
+  { label: '#', x: 3, y: 1.5 },
+  { label: '$', x: 4, y: 1.5 },
+  { label: '%', x: 5, y: 1.5 },
+  { label: '^', x: 6, y: 1.5 },
+  { label: '&', x: 7, y: 1.5 },
+  { label: '*', x: 8, y: 1.5 },
+  { label: '(', x: 9, y: 1.5 },
+  { label: ')', x: 10, y: 1.5 },
+  { label: '_', x: 11, y: 1.5 },
+  { label: '+', x: 12, y: 1.5 },
+  { label: 'Backspace', x: 13, y: 1.5, w: 2 },
+  { label: 'Insert', x: 15.25, y: 1.5 },
+  { label: 'Home', x: 16.25, y: 1.5 },
+  { label: 'PgUp', x: 17.25, y: 1.5 },
+  { label: 'Num Lock', x: 18.5, y: 1.5 },
+  { label: '/', x: 19.5, y: 1.5 },
+  { label: '*', x: 20.5, y: 1.5 },
+  { label: '-', x: 21.5, y: 1.5 }
+];
+
+const ROW3 = [
+  { label: 'Tab', x: 0, y: 2.5, w: 1.5 },
+  { label: 'Q', x: 1.5, y: 2.5 },
+  { label: 'W', x: 2.5, y: 2.5 },
+  { label: 'E', x: 3.5, y: 2.5 },
+  { label: 'R', x: 4.5, y: 2.5 },
+  { label: 'T', x: 5.5, y: 2.5 },
+  { label: 'Y', x: 6.5, y: 2.5 },
+  { label: 'U', x: 7.5, y: 2.5 },
+  { label: 'I', x: 8.5, y: 2.5 },
+  { label: 'O', x: 9.5, y: 2.5 },
+  { label: 'P', x: 10.5, y: 2.5 },
+  { label: '{', x: 11.5, y: 2.5 },
+  { label: '}', x: 12.5, y: 2.5 },
+  { label: '|', x: 13.5, y: 2.5, w: 1.5 },
+  { label: 'Delete', x: 15.25, y: 2.5 },
+  { label: 'End', x: 16.25, y: 2.5 },
+  { label: 'PgDn', x: 17.25, y: 2.5 },
+  { label: '7', x: 18.5, y: 2.5 },
+  { label: '8', x: 19.5, y: 2.5 },
+  { label: '9', x: 20.5, y: 2.5 },
+  { label: '+', x: 21.5, y: 2.5, h: 2 }
+];
+const ROW4 = [
+  { label: 'Caps Lock', x: 0, y: 3.5, w: 1.75 },
+  { label: 'A', x: 1.75, y: 3.5 },
+  { label: 'S', x: 2.75, y: 3.5 },
+  { label: 'D', x: 3.75, y: 3.5 },
+  { label: 'F', x: 4.75, y: 3.5 },
+  { label: 'G', x: 5.75, y: 3.5 },
+  { label: 'H', x: 6.75, y: 3.5 },
+  { label: 'J', x: 7.75, y: 3.5 },
+  { label: 'K', x: 8.75, y: 3.5 },
+  { label: 'L', x: 9.75, y: 3.5 },
+  { label: ':', x: 10.75, y: 3.5 },
+  { label: '"', x: 11.75, y: 3.5 },
+  { label: 'Enter', x: 12.75, y: 3.5, w: 2.25 },
+  { label: '4', x: 18.5, y: 3.5 },
+  { label: '5', x: 19.5, y: 3.5 },
+  { label: '6', x: 20.5, y: 3.5 }
+];
+const ROW5 = [
+  { label: 'Shift', x: 0, y: 4.5, w: 2.25 },
+  { label: 'Z', x: 2.25, y: 4.5 },
+  { label: 'X', x: 3.25, y: 4.5 },
+  { label: 'C', x: 4.25, y: 4.5 },
+  { label: 'V', x: 5.25, y: 4.5 },
+  { label: 'B', x: 6.25, y: 4.5 },
+  { label: 'N', x: 7.25, y: 4.5 },
+  { label: 'M', x: 8.25, y: 4.5 },
+  { label: '<', x: 9.25, y: 4.5 },
+  { label: '>', x: 10.25, y: 4.5 },
+  { label: '?', x: 11.25, y: 4.5 },
+  { label: 'Shift', x: 12.25, y: 4.5, w: 2.75 },
+  { label: '\u2191', x: 16.25, y: 4.5 },
+  { label: '1', x: 18.5, y: 4.5 },
+  { label: '2', x: 19.5, y: 4.5 },
+  { label: '3', x: 20.5, y: 4.5 },
+  { label: 'Enter', x: 21.5, y: 4.5, h: 2 }
+];
+const ROW6 = [
+  { label: 'Ctrl', x: 0, y: 5.5, w: 1.25 },
+  { label: 'Win', x: 1.25, y: 5.5, w: 1.25 },
+  { label: 'Alt', x: 2.5, y: 5.5, w: 1.25 },
+  { x: 3.75, y: 5.5, w: 6.25 },
+  { label: 'Alt', x: 10, y: 5.5, w: 1.25 },
+  { label: 'Win', x: 11.25, y: 5.5, w: 1.25 },
+  { label: 'Menu', x: 12.5, y: 5.5, w: 1.25 },
+  { label: 'Ctrl', x: 13.75, y: 5.5, w: 1.25 },
+  { label: '\u2190', x: 15.25, y: 5.5 },
+  { label: '\u2193', x: 16.25, y: 5.5 },
+  { label: '\u2192', x: 17.25, y: 5.5 },
+  { label: '0', x: 18.5, y: 5.5, w: 2 },
+  { label: '.', x: 20.5, y: 5.5 }
+];
+
+const ISO_ROW3 = [
+  { label: 'Tab', x: 0, y: 2.5, w: 1.5 },
+  { label: 'Q', x: 1.5, y: 2.5 },
+  { label: 'W', x: 2.5, y: 2.5 },
+  { label: 'E', x: 3.5, y: 2.5 },
+  { label: 'R', x: 4.5, y: 2.5 },
+  { label: 'T', x: 5.5, y: 2.5 },
+  { label: 'Y', x: 6.5, y: 2.5 },
+  { label: 'U', x: 7.5, y: 2.5 },
+  { label: 'I', x: 8.5, y: 2.5 },
+  { label: 'O', x: 9.5, y: 2.5 },
+  { label: 'P', x: 10.5, y: 2.5 },
+  { label: '{', x: 11.5, y: 2.5 },
+  { label: '}', x: 12.5, y: 2.5 },
+  { label: 'Enter', x: 13.75, y: 2.5, w: 1.25, h: 2 },
+  { label: 'Delete', x: 15.25, y: 2.5 },
+  { label: 'End', x: 16.25, y: 2.5 },
+  { label: 'PgDn', x: 17.25, y: 2.5 },
+  { label: '7', x: 18.5, y: 2.5 },
+  { label: '8', x: 19.5, y: 2.5 },
+  { label: '9', x: 20.5, y: 2.5 },
+  { label: '+', x: 21.5, y: 2.5, h: 2 }
+];
+const ISO_ROW4 = [
+  { label: 'Caps Lock', x: 0, y: 3.5, w: 1.75 },
+  { label: 'A', x: 1.75, y: 3.5 },
+  { label: 'S', x: 2.75, y: 3.5 },
+  { label: 'D', x: 3.75, y: 3.5 },
+  { label: 'F', x: 4.75, y: 3.5 },
+  { label: 'G', x: 5.75, y: 3.5 },
+  { label: 'H', x: 6.75, y: 3.5 },
+  { label: 'J', x: 7.75, y: 3.5 },
+  { label: 'K', x: 8.75, y: 3.5 },
+  { label: 'L', x: 9.75, y: 3.5 },
+  { label: ':', x: 10.75, y: 3.5 },
+  { label: '"', x: 11.75, y: 3.5 },
+  { label: 'NonUsHash', x: 12.75, y: 3.5 },
+  { label: '4', x: 18.5, y: 3.5 },
+  { label: '5', x: 19.5, y: 3.5 },
+  { label: '6', x: 20.5, y: 3.5 }
+];
+
+const ISO_ROW5 = [
+  { label: 'Shift', x: 0, y: 4.5, w: 1.25 },
+  { label: 'IntlBackslash', x: 1.25, y: 4.5 },
+  { label: 'Z', x: 2.25, y: 4.5 },
+  { label: 'X', x: 3.25, y: 4.5 },
+  { label: 'C', x: 4.25, y: 4.5 },
+  { label: 'V', x: 5.25, y: 4.5 },
+  { label: 'B', x: 6.25, y: 4.5 },
+  { label: 'N', x: 7.25, y: 4.5 },
+  { label: 'M', x: 8.25, y: 4.5 },
+  { label: '<', x: 9.25, y: 4.5 },
+  { label: '>', x: 10.25, y: 4.5 },
+  { label: '?', x: 11.25, y: 4.5 },
+  { label: 'Shift', x: 12.25, y: 4.5, w: 2.75 },
+  { label: '\u2191', x: 16.25, y: 4.5 },
+  { label: '1', x: 18.5, y: 4.5 },
+  { label: '2', x: 19.5, y: 4.5 },
+  { label: '3', x: 20.5, y: 4.5 },
+  { label: 'Enter', x: 21.5, y: 4.5, h: 2 }
+];
+
+const ANSI = [...ROW1, ...ROW2, ...ROW3, ...ROW4, ...ROW5, ...ROW6];
+
+const ISO = [...ROW1, ...ROW2, ...ISO_ROW3, ...ISO_ROW4, ...ISO_ROW5, ...ROW6];
+export default { ANSI, ISO };
diff --git a/src/store/modules/tester/qmk.js b/src/store/modules/tester/qmk.js
new file mode 100644
index 000000000000..2d9111a5aaf8
--- /dev/null
+++ b/src/store/modules/tester/qmk.js
@@ -0,0 +1,180 @@
+const ROW1 = [
+  'KC_ESC',
+  'KC_F1',
+  'KC_F2',
+  'KC_F3',
+  'KC_F4',
+  'KC_F5',
+  'KC_F6',
+  'KC_F7',
+  'KC_F8',
+  'KC_F9',
+  'KC_F10',
+  'KC_F11',
+  'KC_F12',
+  'KC_PSCR',
+  'KC_SLCK',
+  'KC_PAUS'
+];
+const ROW2 = [
+  'KC_GRV',
+  'KC_1',
+  'KC_2',
+  'KC_3',
+  'KC_4',
+  'KC_5',
+  'KC_6',
+  'KC_7',
+  'KC_8',
+  'KC_9',
+  'KC_0',
+  'KC_MINS',
+  'KC_EQL',
+  'KC_BSPC',
+  'KC_INS',
+  'KC_HOME',
+  'KC_PGUP',
+  'KC_NLCK',
+  'KC_PSLS',
+  'KC_PAST',
+  'KC_PMNS'
+];
+const ROW3 = [
+  'KC_TAB',
+  'KC_Q',
+  'KC_W',
+  'KC_E',
+  'KC_R',
+  'KC_T',
+  'KC_Y',
+  'KC_U',
+  'KC_I',
+  'KC_O',
+  'KC_P',
+  'KC_LBRC',
+  'KC_RBRC',
+  'KC_BSLS',
+  'KC_DEL',
+  'KC_END',
+  'KC_PGDN',
+  'KC_P7',
+  'KC_P8',
+  'KC_P9',
+  'KC_PPLS'
+];
+const ISO_ROW3 = [
+  'KC_TAB',
+  'KC_Q',
+  'KC_W',
+  'KC_E',
+  'KC_R',
+  'KC_T',
+  'KC_Y',
+  'KC_U',
+  'KC_I',
+  'KC_O',
+  'KC_P',
+  'KC_LBRC',
+  'KC_RBRC',
+  'KC_ENT',
+  'KC_DEL',
+  'KC_END',
+  'KC_PGDN',
+  'KC_P7',
+  'KC_P8',
+  'KC_P9',
+  'KC_PPLS'
+];
+const ROW4 = [
+  'KC_CAPS',
+  'KC_A',
+  'KC_S',
+  'KC_D',
+  'KC_F',
+  'KC_G',
+  'KC_H',
+  'KC_J',
+  'KC_K',
+  'KC_L',
+  'KC_SCLN',
+  'KC_QUOT',
+  'KC_ENT',
+  'KC_P4',
+  'KC_P5',
+  'KC_P6'
+];
+const ISO_ROW4 = [
+  'KC_CAPS',
+  'KC_A',
+  'KC_S',
+  'KC_D',
+  'KC_F',
+  'KC_G',
+  'KC_H',
+  'KC_J',
+  'KC_K',
+  'KC_L',
+  'KC_SCLN',
+  'KC_QUOT',
+  'KC_NUHS',
+  'KC_P4',
+  'KC_P5',
+  'KC_P6'
+];
+const ROW5 = [
+  'KC_LSFT',
+  'KC_Z',
+  'KC_X',
+  'KC_C',
+  'KC_V',
+  'KC_B',
+  'KC_N',
+  'KC_M',
+  'KC_COMM',
+  'KC_DOT',
+  'KC_SLSH',
+  'KC_RSFT',
+  'KC_UP',
+  'KC_P1',
+  'KC_P2',
+  'KC_P3',
+  'KC_PENT'
+];
+const ISO_ROW5 = [
+  'KC_LSFT',
+  'KC_NUBS',
+  'KC_Z',
+  'KC_X',
+  'KC_C',
+  'KC_V',
+  'KC_B',
+  'KC_N',
+  'KC_M',
+  'KC_COMM',
+  'KC_DOT',
+  'KC_SLSH',
+  'KC_RSFT',
+  'KC_UP',
+  'KC_P1',
+  'KC_P2',
+  'KC_P3',
+  'KC_PENT'
+];
+const ROW6 = [
+  'KC_LCTL',
+  'KC_LGUI',
+  'KC_LALT',
+  'KC_SPC',
+  'KC_RALT',
+  'KC_RGUI',
+  'KC_APP',
+  'KC_RCTL',
+  'KC_LEFT',
+  'KC_DOWN',
+  'KC_RGHT',
+  'KC_P0',
+  'KC_PDOT'
+];
+const ANSI = [...ROW1, ...ROW2, ...ROW3, ...ROW4, ...ROW5, ...ROW6];
+const ISO = [...ROW1, ...ROW2, ...ISO_ROW3, ...ISO_ROW4, ...ISO_ROW5, ...ROW6];
+export default { ANSI, ISO };