diff --git a/tests/rendering/zelos/README.md b/tests/rendering/zelos/README.md
new file mode 100644
index 000000000..d8cf459df
--- /dev/null
+++ b/tests/rendering/zelos/README.md
@@ -0,0 +1,19 @@
+# Zelos Rendering / PXT-Blockly Comparison Playground
+
+## Dependencies
+```
+npm install -g http-server
+```
+
+## Running the Playground:
+
+In Blockly's root directory, run:
+```
+http-server ./
+```
+
+and browse to:
+```
+http://127.0.0.1:8080/tests/rendering/zelos
+```
+
diff --git a/tests/rendering/zelos/index.html b/tests/rendering/zelos/index.html
new file mode 100644
index 000000000..1b85aa938
--- /dev/null
+++ b/tests/rendering/zelos/index.html
@@ -0,0 +1,204 @@
+<html>
+
+<head>
+  <style>
+    html,
+    body {
+      margin: 0;
+    }
+
+    #frames {
+      position: absolute;
+      width: 100%;
+      height: calc(100% - 3rem);
+      bottom: 0;
+    }
+
+    #frames .row {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+    }
+
+    #frames .col {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+    }
+
+    #frames .col h2 {
+      text-align: center;
+    }
+
+    #frames iframe {
+      border: 0;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 500px;
+    }
+  </style>
+</head>
+
+<body>
+  <select id="selector">
+    <option value="colour_blend">colour_blend</option>
+    <option value="colour_picker">colour_picker</option>
+    <option value="colour_random">colour_random</option>
+    <option value="colour_rgb">colour_rgb</option>
+    <option value="controls_flow_statements">controls_flow_statements</option>
+    <option value="controls_for">controls_for</option>
+    <option value="controls_forEach">controls_forEach</option>
+    <option value="controls_if">controls_if</option>
+    <option value="controls_if_else">controls_if_else</option>
+    <option value="controls_if_elseif">controls_if_elseif</option>
+    <option value="controls_if_if">controls_if_if</option>
+    <option value="controls_ifelse">controls_ifelse</option>
+    <option value="controls_repeat">controls_repeat</option>
+    <option value="controls_repeat_ext">controls_repeat_ext</option>
+    <option value="controls_whileUntil">controls_whileUntil</option>
+    <option value="lists_create_empty">lists_create_empty</option>
+    <option value="lists_create_with">lists_create_with</option>
+    <option value="lists_create_with_container">lists_create_with_container</option>
+    <option value="lists_create_with_item">lists_create_with_item</option>
+    <option value="lists_getIndex">lists_getIndex</option>
+    <option value="lists_getSublist">lists_getSublist</option>
+    <option value="lists_indexOf">lists_indexOf</option>
+    <option value="lists_isEmpty">lists_isEmpty</option>
+    <option value="lists_length">lists_length</option>
+    <option value="lists_repeat">lists_repeat</option>
+    <option value="lists_reverse">lists_reverse</option>
+    <option value="lists_setIndex">lists_setIndex</option>
+    <option value="lists_sort">lists_sort</option>
+    <option value="lists_split">lists_split</option>
+    <option value="logic_boolean">logic_boolean</option>
+    <option value="logic_compare">logic_compare</option>
+    <option value="logic_negate">logic_negate</option>
+    <option value="logic_null">logic_null</option>
+    <option value="logic_operation">logic_operation</option>
+    <option value="logic_ternary">logic_ternary</option>
+    <option value="math_addition">math_addition</option>
+    <option value="math_arithmetic">math_arithmetic</option>
+    <option value="math_atan2">math_atan2</option>
+    <option value="math_change">math_change</option>
+    <option value="math_constant">math_constant</option>
+    <option value="math_constrain">math_constrain</option>
+    <option value="math_modulo">math_modulo</option>
+    <option value="math_number">math_number</option>
+    <option value="math_number_property">math_number_property</option>
+    <option value="math_on_list">math_on_list</option>
+    <option value="math_random_float">math_random_float</option>
+    <option value="math_random_int">math_random_int</option>
+    <option value="math_round">math_round</option>
+    <option value="math_single">math_single</option>
+    <option value="math_subtraction">math_subtraction</option>
+    <option value="math_trig">math_trig</option>
+    <option value="multi_block_1">multi_block_1</option>
+    <option value="multi_block_logic">multi_block_logic</option>
+    <option value="multi_colour_with_external">multi_colour_with_external</option>
+    <option value="multi_colour_with_internal">multi_colour_with_internal</option>
+    <option value="multi_stack">multi_stack</option>
+    <option value="not_true">not_true</option>
+    <option value="procedures_callnoreturn">procedures_callnoreturn</option>
+    <option value="procedures_callreturn">procedures_callreturn</option>
+    <option value="procedures_defnoreturn">procedures_defnoreturn</option>
+    <option value="procedures_defreturn">procedures_defreturn</option>
+    <option value="procedures_ifreturn">procedures_ifreturn</option>
+    <option value="procedures_mutatorarg">procedures_mutatorarg</option>
+    <option value="procedures_mutatorcontainer">procedures_mutatorcontainer</option>
+    <option value="text_append">text_append</option>
+    <option value="text_changeCase">text_changeCase</option>
+    <option value="text_charAt">text_charAt</option>
+    <option value="text_count">text_count</option>
+    <option value="text_create_join_container">text_create_join_container</option>
+    <option value="text_create_join_item">text_create_join_item</option>
+    <option value="text_getSubstring">text_getSubstring</option>
+    <option value="text_indexOf">text_indexOf</option>
+    <option value="text_isEmpty">text_isEmpty</option>
+    <option value="text_join">text_join</option>
+    <option value="text_length">text_length</option>
+    <option value="text_print">text_print</option>
+    <option value="text_prompt">text_prompt</option>
+    <option value="text_prompt_ext">text_prompt_ext</option>
+    <option value="text_replace">text_replace</option>
+    <option value="text_reverse">text_reverse</option>
+    <option value="text_trim">text_trim</option>
+    <option value="variables_get">variables_get</option>
+    <option value="variables_get_dynamic">variables_get_dynamic</option>
+    <option value="variables_set">variables_set</option>
+    <option value="variables_set_dynamic">variables_set_dynamic</option>
+  </select>
+  <div id="frames">
+    <div class="row">
+      <div class="col">
+        <h2>Zelos Rendering</h2>
+      </div>
+      <div class="col">
+        <h2>PXT-Blockly Rendering</h2>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <iframe id="zelos" src="./zelos.html"></iframe>
+      </div>
+      <div class="col">
+        <iframe id="pxtblockly" src="./pxtblockly.html"></iframe>
+      </div>
+    </div>
+  </div>
+
+  <script type="text/javascript">
+    var pxtblockly = document.getElementById('pxtblockly');
+    var zelos = document.getElementById('zelos');
+    var selector = document.getElementById('selector');
+    var hash = document.location.hash;
+    if (hash) {
+      selector.value = hash.substring(1);
+    }
+
+    pxtblockly.addEventListener('load', function () {
+      updateWorkspaces(selector.value);
+    });
+
+    zelos.addEventListener('load', function () {
+      updateWorkspaces(selector.value);
+    });
+
+    selector.addEventListener('change', function (e) {
+      updateWorkspaces(e.target.value);
+    });
+
+    function updateWorkspaces(testCase) {
+      var fileName = '../../screenshot/test_cases/' + testCase;
+      window.location.hash = testCase;
+
+      var rawFile = new XMLHttpRequest();
+      rawFile.open('GET', fileName, false);
+      rawFile.onreadystatechange = function () {
+        if (rawFile.readyState === 4) {
+          if (rawFile.status === 200 || rawFile.status == 0) {
+            var xml = rawFile.responseText;
+            if (xml) {
+              pxtblockly.contentWindow.postMessage(xml, '*');
+              zelos.contentWindow.postMessage(xml, '*');
+            }
+          }
+        }
+      }
+      rawFile.send();
+    }
+
+    document.addEventListener('keydown', function (e) {
+      if (e.keyCode === 37) {
+        selector.selectedIndex = selector.selectedIndex - 1;
+        updateWorkspaces(selector.value);
+      } else if (e.keyCode === 39) {
+        selector.selectedIndex = selector.selectedIndex + 1;
+        updateWorkspaces(selector.value);
+      }
+    });
+
+  </script>
+</body>
+
+</html>
diff --git a/tests/rendering/zelos/pxtblockly.html b/tests/rendering/zelos/pxtblockly.html
new file mode 100644
index 000000000..8e454c255
--- /dev/null
+++ b/tests/rendering/zelos/pxtblockly.html
@@ -0,0 +1,38 @@
+<html>
+
+<head>
+  <script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/blockly_compressed.js"></script>
+  <script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/blocks_compressed.js"></script>
+  <script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/msg/messages.js"></script>
+</head>
+
+<body>
+  <div id="blocklyDiv"></div>
+  <script>
+    var blocklyDiv = document.getElementById('blocklyDiv');
+    var workspace;
+    window.addEventListener('message', function (msg) {
+      var xml = msg.data;
+      try {
+        if (workspace) {
+          workspace.dispose();
+          blocklyDiv.innerHTML = '';
+        }
+      } catch { }
+
+      workspace = Blockly.inject(blocklyDiv, {
+        move: {
+          scrollbars: true,
+          drag: true,
+          wheel: false,
+        },
+      });
+
+      try {
+        Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
+      } catch { }
+    });
+  </script>
+</body>
+
+</html>
diff --git a/tests/rendering/zelos/zelos.html b/tests/rendering/zelos/zelos.html
new file mode 100644
index 000000000..a01d04dcc
--- /dev/null
+++ b/tests/rendering/zelos/zelos.html
@@ -0,0 +1,50 @@
+<html>
+
+<head>
+  <script type="text/javascript" src="../../../blockly_uncompressed.js"></script>
+  <script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/blocks_compressed.js"></script>
+  <script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/msg/messages.js"></script>
+
+  <style>
+    .blocklyText {
+      font: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
+      font-weight: bold;
+      font-size: 12pt;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="blocklyDiv"></div>
+  <script>
+    goog.require('Blockly.zelos.Renderer');
+    Blockly.Field.FONTSIZE = 12;
+
+    var blocklyDiv = document.getElementById('blocklyDiv');
+    var workspace;
+    window.addEventListener('message', function (msg) {
+      var xml = msg.data;
+      try {
+        if (workspace) {
+          workspace.dispose();
+          blocklyDiv.innerHTML = '';
+        }
+      } catch { }
+
+      workspace = Blockly.inject(blocklyDiv, {
+        renderer: 'zelos',
+        move: {
+          scrollbars: true,
+          drag: true,
+          wheel: false,
+        },
+      });
+
+      try {
+        Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
+      } catch { }
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
