diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6f34bd72b..e0df0c205 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Changed
 
 - Remove unused `/embedded/projects/:identifier` route (#1013)
+- Runner defaults to `pyodide` (#937)
 
 ### Fixed
 
@@ -28,6 +29,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Fix initial value of `user` in `WebComponentLoader` (#1021)
 - Make `authKey` in e2e web component spec more realistic (#1022)
 - Remove unused `ComponentStore` (#1023)
+- Dynamic switching between `pyodide` and `skulpt` based on user imports (#937)
 
 ## [0.23.0] - 2024-05-09
 
diff --git a/cypress/e2e/missionZero-wc.cy.js b/cypress/e2e/missionZero-wc.cy.js
index 3db6aee39..1a59184ae 100644
--- a/cypress/e2e/missionZero-wc.cy.js
+++ b/cypress/e2e/missionZero-wc.cy.js
@@ -34,10 +34,7 @@ it("loads the sense hat library", () => {
 });
 
 it("sets initial criteria correctly", () => {
-  cy.get("editor-wc")
-    .shadow()
-    .find("div[class=cm-content]")
-    .invoke("text", "from sense_hat import SenseHat");
+  cy.get("editor-wc").shadow().find("div[class=cm-content]").invoke("text", "");
   cy.get("editor-wc").shadow().find(".btn--run").click();
   cy.get("#results").should(
     "contain",
@@ -100,7 +97,10 @@ it("resets criteria correctly", () => {
     );
   cy.get("editor-wc").shadow().find(".btn--run").contains("Run").click();
   cy.get("#results").should("contain", '"readPressure":true');
-  cy.get("editor-wc").shadow().find("div[class=cm-content]").invoke("text", "");
+  cy.get("editor-wc")
+    .shadow()
+    .find("div[class=cm-content]")
+    .invoke("text", "from sense_hat import SenseHat");
   cy.get("editor-wc").shadow().find(".btn--run").contains("Run").click();
   cy.get("#results").should(
     "contain",
@@ -139,7 +139,13 @@ it("picks up calls to input()", () => {
     .find("div[class=cm-content]")
     .invoke("text", "input()");
   cy.get("editor-wc").shadow().find(".btn--run").click();
-  cy.get("editor-wc").shadow().contains("Text output").click();
+  cy.get("editor-wc")
+    .shadow()
+    .find(
+      "div[class='pythonrunner-container skulptrunner skulptrunner--active']",
+    )
+    .contains("Text output")
+    .click();
   cy.get("editor-wc")
     .shadow()
     .find("span[contenteditable=true]")
@@ -174,7 +180,7 @@ it("does not return null duration if no change in focus", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.send_message("a")',
+      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.show_message("a")',
     );
   cy.get("editor-wc").shadow().find(".btn--run").click();
   cy.get("#results").should("not.contain", '"duration":null');
@@ -186,7 +192,7 @@ it("does not return null duration if focus changed before code run", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.send_message("a")',
+      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.show_message("a")',
     );
   cy.window().blur();
   cy.window().focus();
@@ -200,7 +206,7 @@ it("returns duration of null if focus is lost", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.send_message("a")',
+      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.show_message("a")',
     );
   cy.get("editor-wc").shadow().find(".btn--run").click();
   cy.window().blur();
@@ -214,7 +220,7 @@ it("does not return duration of null if code rerun after focus lost", () => {
     .find("div[class=cm-content]")
     .invoke(
       "text",
-      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.send_message("a")',
+      'from sense_hat import SenseHat\nsense = SenseHat()\nsense.show_message("a")',
     );
   cy.get("editor-wc").shadow().find(".btn--run").click();
   cy.window().blur();
diff --git a/cypress/e2e/spec-wc.cy.js b/cypress/e2e/spec-wc.cy.js
index d2c2abff3..b823c0dbb 100644
--- a/cypress/e2e/spec-wc.cy.js
+++ b/cypress/e2e/spec-wc.cy.js
@@ -89,6 +89,21 @@ describe("default behaviour", () => {
     cy.get("editor-wc").shadow().contains("Visual output").click();
     cy.get("editor-wc").shadow().find("#root").should("not.contain", "yaw");
   });
+
+  it("does not render astro pi component if sense hat unimported", () => {
+    cy.get("editor-wc")
+      .shadow()
+      .find("div[class=cm-content]")
+      .invoke("text", "import sense_hat");
+    cy.get("editor-wc").shadow().find(".btn--run").click();
+    cy.get("editor-wc")
+      .shadow()
+      .find("div[class=cm-content]")
+      .invoke("text", "import p5");
+    cy.get("editor-wc").shadow().find(".btn--run").click();
+    cy.get("editor-wc").shadow().contains("Visual output").click();
+    cy.get("editor-wc").shadow().find("#root").should("not.contain", "yaw");
+  });
 });
 
 describe("when load_remix_disabled is true, e.g. in editor-standalone", () => {
diff --git a/public/PyodideServiceWorker.js b/public/PyodideServiceWorker.js
new file mode 100644
index 000000000..d6ee62889
--- /dev/null
+++ b/public/PyodideServiceWorker.js
@@ -0,0 +1,40 @@
+self.addEventListener("install", () => {
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener("fetch", (event) => {
+  if (
+    event.request.cache === "only-if-cached" &&
+    event.request.mode !== "same-origin"
+  ) {
+    return;
+  }
+
+  console.log(event.request);
+
+  const interceptedRequests = ["pyodide", "Pyodide"];
+
+  if (!interceptedRequests.some((str) => event.request.url.includes(str))) {
+    event.respondWith(
+      fetch(event.request)
+        .then((response) => {
+          console.log(`Intercepted: ${event.request.url}`);
+
+          const body = response.body;
+          const status = response.status;
+          const headers = new Headers(response.headers);
+          const statusText = response.statusText;
+
+          headers.set("Cross-Origin-Embedder-Policy", "require-corp");
+          headers.set("Cross-Origin-Opener-Policy", "same-origin");
+
+          // return new Response(body, { status, statusText, headers });
+        })
+        .catch(console.error),
+    );
+  }
+});
diff --git a/public/PyodideWorker.js b/public/PyodideWorker.js
new file mode 100644
index 000000000..da1e2ca1d
--- /dev/null
+++ b/public/PyodideWorker.js
@@ -0,0 +1,321 @@
+/* global importScripts, loadPyodide, SharedArrayBuffer, Atomics, pygal, _internal_sense_hat */
+
+// importScripts(`${window.location.origin}/pygal.js`);
+// importScripts("http://localhost:8080/pygal.js");
+// importScripts("http://localhost:3011/pygal.js");
+importScripts(
+  "https://staging-editor.raspberrypi.org/branches/issues_903_Investigate_setting_Pyodide_HTTP_headers_via_a_service_worker/pygal.js",
+);
+// importScripts(`${window.location.origin}/_internal_sense_hat.js`);
+// importScripts("http://localhost:8080/_internal_sense_hat.js");
+// importScripts("http://localhost:3011/_internal_sense_hat.js");
+importScripts(
+  "https://staging-editor.raspberrypi.org/branches/issues_903_Investigate_setting_Pyodide_HTTP_headers_via_a_service_worker/_internal_sense_hat.js",
+);
+
+const supportsAllFeatures = typeof SharedArrayBuffer !== "undefined";
+
+// eslint-disable-next-line no-restricted-globals
+if (!supportsAllFeatures && name !== "incremental-features") {
+  console.warn(
+    [
+      "The code editor will not be able to capture standard input or stop execution because these HTTP headers are not set:",
+      "  - Cross-Origin-Opener-Policy: same-origin",
+      "  - Cross-Origin-Embedder-Policy: require-corp",
+      "",
+      "If your app can cope with or without these features, please initialize the web worker with { name: 'incremental-features' } to silence this warning.",
+      "You can then check for the presence of { stdinBuffer, interruptBuffer } in the handleLoaded message to check whether these features are supported.",
+      "",
+      "If you definitely need these features, either configure your server to respond with the HTTP headers above, or register a service worker.",
+      "Once the HTTP headers are set, the browser will block cross-domain resources so you will need to add 'crossorigin' to <script> and other tags.",
+      "You may wish to scope the HTTP headers to only those pages that host the code editor to make the browser restriction easier to deal with.",
+      "",
+      "Please refer to these code snippets for registering a service worker:",
+      "  - https://github.com/RaspberryPiFoundation/python-execution-prototypes/blob/fd2c50e032cba3bb0e92e19a88eb62e5b120fe7a/pyodide/index.html#L92-L98",
+      "  - https://github.com/RaspberryPiFoundation/python-execution-prototypes/blob/fd2c50e032cba3bb0e92e19a88eb62e5b120fe7a/pyodide/serviceworker.js",
+    ].join("\n"),
+  );
+}
+importScripts("https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js");
+let pyodide, pyodidePromise, stdinBuffer, interruptBuffer, stopped;
+let encoder = new TextEncoder();
+
+const onmessage = async ({ data }) => {
+  pyodide = await pyodidePromise;
+
+  switch (data.method) {
+    case "writeFile":
+      pyodide.FS.writeFile(data.filename, encoder.encode(data.content));
+      break;
+    case "runPython":
+      runPython(data.python);
+      break;
+    case "stopPython":
+      stopped = true;
+      break;
+    default:
+      throw new Error(`Unsupported method: ${data.method}`);
+  }
+};
+
+// eslint-disable-next-line no-restricted-globals
+addEventListener("message", async (event) => {
+  onmessage(event);
+});
+
+const runPython = async (python) => {
+  stopped = false;
+  await pyodide.runPythonAsync(`
+  old_input = input
+
+  def patched_input(prompt=False):
+      if (prompt):
+          print(prompt)
+      return old_input()
+
+  __builtins__.input = patched_input
+  `);
+
+  try {
+    await withSupportForPackages(python, async () => {
+      await pyodide.runPython(python);
+    });
+  } catch (error) {
+    if (!(error instanceof pyodide.ffi.PythonError)) {
+      throw error;
+    }
+    postMessage({ method: "handleError", ...parsePythonError(error) });
+  }
+
+  await reloadPyodideToClearState();
+};
+
+const checkIfStopped = () => {
+  if (stopped) {
+    throw new pyodide.ffi.PythonError("KeyboardInterrupt");
+  }
+};
+
+const withSupportForPackages = async (python, runPythonFn = async () => {}) => {
+  const imports = await pyodide._api.pyodide_code.find_imports(python).toJs();
+  await Promise.all(imports.map((name) => loadDependency(name)));
+
+  checkIfStopped();
+  await pyodide.loadPackagesFromImports(python);
+
+  checkIfStopped();
+  await runPythonFn();
+
+  for (let name of imports) {
+    checkIfStopped();
+    await vendoredPackages[name]?.after();
+  }
+};
+
+const loadDependency = async (name) => {
+  checkIfStopped();
+
+  // If the import is for another user file then open it and load its dependencies.
+  if (pyodide.FS.readdir("/home/pyodide").includes(`${name}.py`)) {
+    const fileContent = pyodide.FS.readFile(`/home/pyodide/${name}.py`, {
+      encoding: "utf8",
+    });
+    await withSupportForPackages(fileContent);
+    return;
+  }
+
+  // If the import is for a vendored package then run its .before() hook.
+  const vendoredPackage = vendoredPackages[name];
+  await vendoredPackage?.before();
+  if (vendoredPackage) {
+    return;
+  }
+
+  // If the import is for a module built into Python then do nothing.
+  let pythonModule;
+  try {
+    pythonModule = pyodide.pyimport(name);
+  } catch (_) {}
+  if (pythonModule) {
+    return;
+  }
+
+  // If the import is for a package built into Pyodide then load it.
+  // Built-ins: https://pyodide.org/en/stable/usage/packages-in-pyodide.html
+  await pyodide.loadPackage(name)?.catch(() => {});
+  let pyodidePackage;
+  try {
+    pyodidePackage = pyodide.pyimport(name);
+  } catch (_) {}
+  if (pyodidePackage) {
+    return;
+  }
+
+  // Ensure micropip is loaded which can fetch packages from PyPi.
+  // See: https://pyodide.org/en/stable/usage/loading-packages.html
+  if (!pyodide.micropip) {
+    await pyodide.loadPackage("micropip");
+    pyodide.micropip = pyodide.pyimport("micropip");
+  }
+
+  // If the import is for a PyPi package then load it.
+  // Otherwise, don't error now so that we get an error later from Python.
+  await pyodide.micropip.install(name).catch(() => {});
+};
+
+const vendoredPackages = {
+  turtle: {
+    before: async () => {
+      pyodide.registerJsModule("basthon", fakeBasthonPackage);
+      await pyodide.loadPackage(
+        `${process.env.ASSETS_URL}/packages/turtle-0.0.1-py3-none-any.whl`,
+      );
+    },
+    after: () =>
+      pyodide.runPython(`
+      import turtle
+      import basthon
+
+      svg_dict = turtle.Screen().show_scene()
+      basthon.kernel.display_event({ "display_type": "turtle", "content": svg_dict })
+      turtle.restart()
+    `),
+  },
+  p5: {
+    before: async () => {
+      pyodide.registerJsModule("basthon", fakeBasthonPackage);
+      await pyodide.loadPackage([
+        "setuptools",
+        `${process.env.ASSETS_URL}/packages/p5-0.0.1-py3-none-any.whl`,
+      ]);
+    },
+    after: () => {},
+  },
+  pygal: {
+    before: () => {
+      pyodide.registerJsModule("pygal", { ...pygal });
+      pygal.config.renderChart = (content) =>
+        postMessage({ method: "handleVisual", origin: "pygal", content });
+    },
+    after: () => {},
+  },
+  sense_hat: {
+    before: async () => {
+      pyodide.registerJsModule("_internal_sense_hat", {
+        ..._internal_sense_hat,
+      });
+      await pyodide.loadPackage([
+        "pillow",
+        `${process.env.ASSETS_URL}/packages/sense_hat-0.0.1-py3-none-any.whl`,
+      ]);
+
+      _internal_sense_hat.config.pyodide = pyodide;
+      _internal_sense_hat.config.emit = (type) =>
+        postMessage({ method: "handleSenseHatEvent", type });
+    },
+    after: () => {
+      const {
+        pyodide,
+        emit,
+        sensestick,
+        start_motion_callback,
+        stop_motion_callback,
+        ...config
+      } = _internal_sense_hat.config;
+      postMessage({
+        method: "handleVisual",
+        origin: "sense_hat",
+        content: config,
+      });
+    },
+  },
+};
+
+const fakeBasthonPackage = {
+  kernel: {
+    display_event: (event) => {
+      const origin = event.toJs().get("display_type");
+      const content = event.toJs().get("content");
+
+      postMessage({ method: "handleVisual", origin, content });
+    },
+    locals: () => pyodide.runPython("globals()"),
+  },
+};
+
+const reloadPyodideToClearState = async () => {
+  postMessage({ method: "handleLoading" });
+
+  pyodidePromise = loadPyodide({
+    stdout: (content) =>
+      postMessage({ method: "handleOutput", stream: "stdout", content }),
+    stderr: (content) =>
+      postMessage({ method: "handleOutput", stream: "stderr", content }),
+  });
+
+  pyodide = await pyodidePromise;
+
+  if (supportsAllFeatures) {
+    stdinBuffer =
+      stdinBuffer || new Int32Array(new SharedArrayBuffer(1024 * 1024)); // 1 MiB
+    stdinBuffer[0] = 1; // Store the length of content in the buffer at index 0.
+    pyodide.setStdin({ isatty: true, read: readFromStdin });
+
+    interruptBuffer =
+      interruptBuffer || new Uint8Array(new SharedArrayBuffer(1));
+    pyodide.setInterruptBuffer(interruptBuffer);
+  }
+
+  postMessage({ method: "handleLoaded", stdinBuffer, interruptBuffer });
+};
+
+const readFromStdin = (bufferToWrite) => {
+  const previousLength = stdinBuffer[0];
+  postMessage({ method: "handleInput" });
+
+  while (true) {
+    pyodide.checkInterrupt();
+    const result = Atomics.wait(stdinBuffer, 0, previousLength, 100);
+    if (result === "not-equal") {
+      break;
+    }
+  }
+
+  const currentLength = stdinBuffer[0];
+  if (currentLength === -1) {
+    return 0;
+  } // Signals that stdin was closed.
+
+  const addedBytes = stdinBuffer.slice(previousLength, currentLength);
+  bufferToWrite.set(addedBytes);
+
+  return addedBytes.length;
+};
+
+const parsePythonError = (error) => {
+  const type = error.type;
+  const [trace, info] = error.message.split(`${type}:`).map((s) => s?.trim());
+
+  const lines = trace.split("\n");
+
+  const snippetLine = lines[lines.length - 2]; //    print("hi")invalid
+  const caretLine = lines[lines.length - 1]; //                 ^^^^^^^
+
+  const showsMistake = caretLine.includes("^");
+  const mistake = showsMistake
+    ? [snippetLine.slice(4), caretLine.slice(4)].join("\n")
+    : "";
+
+  const matches = [...trace.matchAll(/File "(.*)", line (\d+)/g)];
+  const match = matches[matches.length - 1];
+
+  const path = match ? match[1] : "";
+  const base = path.split("/").reverse()[0];
+  const file = base === "<exec>" ? "main.py" : base;
+
+  const line = match ? parseInt(match[2], 10) : "";
+
+  return { file, line, mistake, type, info };
+};
+
+reloadPyodideToClearState();
diff --git a/public/_internal_sense_hat.js b/public/_internal_sense_hat.js
new file mode 100644
index 000000000..5a4964822
--- /dev/null
+++ b/public/_internal_sense_hat.js
@@ -0,0 +1,413 @@
+/* global globalThis */
+
+/**
+ * Internal SenseHat Module for reading and writing values from
+ * JavaScript World to the Python World. This modules set ups
+ * the commmunication and allows to read and write pixels.
+ */
+
+let _internal_sense_hat = {};
+
+_internal_sense_hat.config = {
+  pyodide: null,
+  emit: () => {},
+  colour: "#FF00A4",
+  gamma: new Array(32).fill(0),
+  pixels: new Array(64).fill([0, 0, 0]),
+  low_light: false,
+  motion: false,
+  mz_criteria: {
+    duration: null,
+    noInputEvents: true,
+    readColour: false,
+    readHumidity: false,
+    readPressure: false,
+    readTemperature: false,
+    usedLEDs: false,
+  },
+  rtimu: {
+    pressure: [1, 1013 + Math.random() - 0.5],
+    temperature: [1, 13 + Math.random() - 0.5],
+    humidity: [1, 45 + Math.random() - 0.5],
+    gyro: [0, 0, 0] /* all 3 gyro values */,
+    accel: [0, 0, 0] /* all 3 accel values */,
+    compass: [0, 0, 33] /* all compass values */,
+    raw_orientation: [0, 90, 0],
+  },
+  sensestick: {
+    _eventQueue: [],
+    off: () => {},
+    once: () => {},
+  },
+  start_motion_callback: () => {},
+  stop_motion_callback: () => {},
+};
+
+const raisePythonError = (errorType, message) => {
+  if (_internal_sense_hat.config.pyodide) {
+    const escaped = message.replaceAll('"', '\\"');
+    _internal_sense_hat.config.pyodide.runPython(
+      `raise ${errorType}("${escaped}")`,
+    );
+  } else {
+    throw new Error(`${errorType}: ${message}`);
+  }
+};
+
+_internal_sense_hat.toJs = (val) => (val?.toJs ? val.toJs() : val);
+const isIterable = (val) => !!val?.[Symbol.iterator];
+const isInteger = (val) => val === parseInt(val, 10);
+
+const checkNumberAndReturn = (val) => {
+  const parsed = parseFloat(val);
+  // only numbers/floats are okay
+  const isValid = !isNaN(parsed) && isFinite(val);
+  if (isValid) {
+    return {
+      value: parsed,
+      valid: true,
+    };
+  }
+
+  // invalid number, return -1
+  return {
+    value: -1,
+    valid: false,
+  };
+};
+
+const init = () => {
+  _internal_sense_hat.config.emit("init");
+};
+
+// _fb_device specific methods
+const setpixel = (index, value) => {
+  _internal_sense_hat.config.mz_criteria.usedLEDs = true;
+
+  const _index = _internal_sense_hat.toJs(index);
+  const _value = _internal_sense_hat.toJs(value);
+
+  if (!isIterable(_value)) {
+    raisePythonError("ValueError", "'value' should be iterable");
+  }
+
+  for (let val of _value) {
+    if (!isInteger(val)) {
+      raisePythonError("ValueError", "'value' should be iterable of 'int'");
+    }
+  }
+
+  try {
+    _internal_sense_hat.config.pixels[_index] = _value;
+  } catch (e) {
+    raisePythonError("ValueError", e.message);
+  }
+
+  _internal_sense_hat.config.emit("setpixel", _index);
+};
+
+const getpixel = (index) => {
+  const _index = _internal_sense_hat.toJs(index);
+
+  try {
+    return _internal_sense_hat.config.pixels[_index];
+  } catch (e) {
+    raisePythonError("ValueError", e.message);
+  }
+};
+
+const setpixels = (indexes, values) => {
+  const _indexes = _internal_sense_hat.toJs(indexes);
+  const _values = _internal_sense_hat.toJs(values);
+
+  if (_indexes) {
+    _internal_sense_hat.config.mz_criteria.usedLEDs = true;
+  }
+
+  try {
+    _internal_sense_hat.config.pixels = _values;
+  } catch (e) {
+    raisePythonError("ValueError", e.message);
+  }
+
+  _internal_sense_hat.config.emit("setpixels", _indexes);
+};
+
+const getpixels = () => {
+  return _internal_sense_hat.config.pixels;
+};
+
+const getGamma = () => {
+  return _internal_sense_hat.config.gamma;
+};
+
+const setGamma = (gamma) => {
+  // checks are made in fb_device.py
+  _internal_sense_hat.config.gamma = _internal_sense_hat.toJs(gamma);
+  _internal_sense_hat.config.emit("setGamma");
+};
+
+const setLowlight = (value) => {
+  const _value = _internal_sense_hat.toJs(value);
+
+  _internal_sense_hat.config.low_light = _internal_sense_hat.toJs(_value);
+  _internal_sense_hat.config.emit("changeLowlight", _value);
+};
+
+// RTIMU stuff
+
+/**
+ * 260 - 1260 hPa
+ */
+const pressureRead = () => {
+  _internal_sense_hat.config.mz_criteria.readPressure = true;
+  const temperature = temperatureRead(); // does the validation for us
+
+  if (
+    !_internal_sense_hat.config.rtimu.pressure ||
+    _internal_sense_hat.config.rtimu.pressure.length !== 2
+  ) {
+    // something was set wrong
+    return [].concat([0, -1], temperature);
+  }
+
+  // check type of the temperature
+  const { valid, value } = checkNumberAndReturn(
+    _internal_sense_hat.config.rtimu.pressure[1],
+  );
+
+  // invalid value provided
+  if (!valid) {
+    return [].concat([0, -1], temperature);
+  }
+
+  // now do some range checks
+  if (value < 260 || value > 1260) {
+    return [].concat([0, value], temperature);
+  }
+
+  return [].concat([1, value], temperature);
+};
+
+/**
+ * >= 0%
+ */
+const humidityRead = () => {
+  _internal_sense_hat.config.mz_criteria.readHumidity = true;
+  const temperature = temperatureRead(); // does the validation for us
+
+  if (
+    !_internal_sense_hat.config.rtimu.humidity ||
+    _internal_sense_hat.config.rtimu.humidity.length !== 2
+  ) {
+    // something was set wrong
+    return [].concat([0, -1], temperature);
+  }
+
+  // check type of the temperature
+  const { valid, value } = checkNumberAndReturn(
+    _internal_sense_hat.config.rtimu.humidity[1],
+  );
+
+  // invalid value provided
+  if (!valid) {
+    return [].concat([0, -1], temperature);
+  }
+
+  // now do some range checks
+  if (value < 0) {
+    return [].concat([0, value], temperature);
+  }
+
+  return [].concat([1, value], temperature);
+};
+
+/**
+ * Temperature Range: -40 to +120 degrees celsius
+ */
+const temperatureRead = () => {
+  _internal_sense_hat.config.mz_criteria.readTemperature = true;
+
+  if (
+    !_internal_sense_hat.config.rtimu.temperature ||
+    _internal_sense_hat.config.rtimu.temperature.length !== 2
+  ) {
+    // something was set wrong
+    return [0, -1];
+  }
+
+  // check type of the temperature
+  const { valid, value } = checkNumberAndReturn(
+    _internal_sense_hat.config.rtimu.temperature[1],
+  );
+
+  // invalid value provided
+  if (!valid) {
+    return [0, -1];
+  }
+
+  // now do some range checks
+  if (value < -40 || value > 120) {
+    return [0, value];
+  }
+
+  return [1, value];
+};
+
+/**
+ * Colour
+ */
+
+const hex2rgb = (hex) => [
+  ("0x" + hex[1] + hex[2]) | 0,
+  ("0x" + hex[3] + hex[4]) | 0,
+  ("0x" + hex[5] + hex[6]) | 0,
+];
+
+const colourRead = () => {
+  _internal_sense_hat.config.mz_criteria.readColour = true;
+  return hex2rgb(_internal_sense_hat.config.colour);
+};
+
+/**
+ * Motion
+ */
+const motionRead = () => {
+  return _internal_sense_hat.config.motion;
+};
+
+/**
+ * Sets start motion callback
+ */
+const _start_motion = (callback) => {
+  if (callback) {
+    _internal_sense_hat.config.start_motion_callback = callback;
+  }
+};
+
+/**
+ * Sets stop motion callback
+ */
+const _stop_motion = (callback) => {
+  if (callback) {
+    _internal_sense_hat.config.stop_motion_callback = callback;
+  }
+};
+
+const fusionPoseRead = () => {
+  return _internal_sense_hat.config.rtimu.raw_orientation.map(
+    (x) => (x * Math.PI) / 180,
+  );
+};
+
+const accelRead = () => {
+  return _internal_sense_hat.config.rtimu.accel;
+};
+
+const compassRead = () => {
+  return _internal_sense_hat.config.rtimu.compass;
+};
+
+const headingRead = () => {
+  /* Returns tilt-compensated magnetometer heading in radians */
+  /* Note: RTIMULib calculates a moving average. This gives an instant reading */
+
+  // Accelerometer's roll and pitch, used for compensation
+  const x = _internal_sense_hat.config.rtimu.raw_orientation[0]; // roll
+  const y = _internal_sense_hat.config.rtimu.raw_orientation[1]; // pitch
+
+  // Compass raw values in microteslas
+  const mx = _internal_sense_hat.config.rtimu.compass[0];
+  const my = _internal_sense_hat.config.rtimu.compass[1];
+  const mz = _internal_sense_hat.config.rtimu.compass[2];
+
+  // Tilt compensation for Tait-Bryan XYZ convention
+  // Formulas here: https://dev.widemeadows.de/2014/01/24/to-tilt-compensate-or-not-to-tilt-compensate/
+  const phi = x;
+  const theta = y;
+
+  // Remap magnetometer values to the horizontal plane and determine yaw (aka heading)
+  const mag_x =
+    mx * Math.cos(theta) +
+    my * Math.sin(phi) * Math.sin(phi) +
+    mz * Math.cos(phi) * Math.sin(theta);
+  const mag_y = my * Math.cos(phi) - mz * Math.sin(phi);
+  const heading = Math.atan2(-mag_y, mag_x);
+
+  return heading;
+};
+
+const gyroRead = () => {
+  return _internal_sense_hat.config.rtimu.gyro;
+};
+
+/********************************************************/
+/* SenseStick specific functions. Commented out until we have a means of inputting
+/* sense stick events and can be made to work with the web component
+/*
+/*
+ **/
+
+const _wait = (timeout) => {
+  raisePythonError("NotImplementedError", "_wait");
+};
+
+const _waitmotion = (timeout, motion) => {
+  _internal_sense_hat.config.mz_criteria.noInputEvents = false;
+  raisePythonError("NotImplementedError", "_waitmotion");
+};
+
+const _inspectFunction = (func) => {
+  raisePythonError("NotImplementedError", "_inspectFunction");
+};
+
+/**
+ * Removes the event handler for simulating threading
+ */
+const _stop_stick_thread = () => {
+  raisePythonError("NotImplementedError", "_stop_stick_thread");
+};
+
+/**
+ * Adds the event handler for simulating threading for the SenseStick callbacks
+ */
+const _start_stick_thread = (callback) => {
+  raisePythonError("NotImplementedError", "_start_stick_thread");
+};
+
+const _read = () => {
+  raisePythonError("NotImplementedError", "_read");
+};
+
+_internal_sense_hat = {
+  ..._internal_sense_hat,
+  // config,
+  init,
+  setpixel,
+  getpixel,
+  setpixels,
+  getpixels,
+  getGamma,
+  setGamma,
+  setLowlight,
+  pressureRead,
+  humidityRead,
+  temperatureRead,
+  colourRead,
+  motionRead,
+  _start_motion,
+  _stop_motion,
+  fusionPoseRead,
+  accelRead,
+  compassRead,
+  headingRead,
+  gyroRead,
+  _wait,
+  _waitmotion,
+  _inspectFunction,
+  _stop_stick_thread,
+  _start_stick_thread,
+  _read,
+};
+
+globalThis._internal_sense_hat = _internal_sense_hat;
diff --git a/public/pygal.js b/public/pygal.js
new file mode 100644
index 000000000..d923169fd
--- /dev/null
+++ b/public/pygal.js
@@ -0,0 +1,495 @@
+/* global globalThis */
+
+var pygal = {};
+
+pygal.config = {
+  renderChart: (chart) => {
+    throw new Error(
+      "The config.renderChart function has not been set for pygal.",
+    );
+  },
+  availableWidth: 400,
+  availableHeight: 300,
+};
+
+const COLORS = [
+  [255, 89, 149],
+  [182, 227, 84],
+  [254, 237, 108],
+  [140, 237, 255],
+  [158, 111, 254],
+  [137, 156, 161],
+  [248, 248, 242],
+  [191, 70, 70],
+  [81, 96, 131],
+  [249, 38, 114],
+  [130, 180, 20],
+  [253, 151, 31],
+  [86, 194, 214],
+  [128, 131, 132],
+  [140, 84, 254],
+  [70, 84, 87],
+];
+
+const some = (val) => typeof val !== "undefined";
+pygal.toJs = (val) => (val?.toJs ? val.toJs() : val);
+
+class Chart {
+  constructor({
+    title,
+    width,
+    height,
+    range,
+    include_x_axis,
+    x_title,
+    y_title,
+    title_font_size,
+    fill,
+    stroke,
+    x_labels,
+  } = {}) {
+    const options = {};
+    if (some(title)) options.title = pygal.toJs(title);
+    if (some(width)) options.width = pygal.toJs(width);
+    if (some(height)) options.height = pygal.toJs(height);
+    if (some(range))
+      options.range = {
+        min: pygal.toJs(range)[0],
+        max: pygal.toJs(range)[1],
+      };
+    if (some(include_x_axis))
+      options.include_x_axis = pygal.toJs(include_x_axis);
+    if (some(x_title)) options.x_title = pygal.toJs(x_title);
+    if (some(y_title)) options.y_title = pygal.toJs(y_title);
+    if (some(title_font_size))
+      options.title_font_size = pygal.toJs(title_font_size);
+    if (some(fill)) options.fill = pygal.toJs(fill);
+    if (some(stroke)) options.stroke = pygal.toJs(stroke);
+    if (some(x_labels)) options.x_labels = pygal.toJs(x_labels);
+
+    this._options = options;
+    this._data = [];
+  }
+
+  add(label, values) {
+    if (!Array.isArray(pygal.toJs(values))) {
+      values = [values];
+    }
+    const data = [...pygal.toJs(values)].map((v) => v || 0);
+
+    this._data.unshift({
+      name: pygal.toJs(label),
+      color: this.#rgba(COLORS[this._data.length % COLORS.length], 0.75),
+      data: data,
+      marker: {
+        symbol: "circle",
+      },
+      stack: 1,
+    });
+
+    return "";
+  }
+
+  render() {
+    const options = this._options;
+    const title_style = {
+      color: "#FFFFFF",
+    };
+    if (options.title_font_size) {
+      title_style["font-size"] = options.title_font_size + "px";
+    }
+    const yPlotLines = [];
+
+    if (options.range) {
+      yPlotLines.push({
+        value: options.range.min,
+        width: 1,
+        color: "#FFFFFF",
+      });
+    }
+
+    const defaultWidth = pygal.config.availableWidth;
+    const defaultHeight = Math.min(defaultWidth, pygal.config.availableHeight);
+
+    let chart = {
+      chart: {
+        width: options.width || defaultWidth,
+        height: options.height || defaultHeight,
+        backgroundColor: "#000",
+      },
+      credits: {
+        enabled: false,
+      },
+      title: {
+        text: options.title,
+        style: title_style,
+      },
+      xAxis: {
+        title: {
+          text: options.x_title || null,
+          style: title_style,
+          margin: 20,
+        },
+        categories: options.x_labels,
+        labels: {
+          enabled: options.x_labels ? true : false,
+        },
+        tickLength: 0,
+      },
+      yAxis: {
+        startOnTick: false,
+        title: {
+          text: options.y_title || null,
+          style: title_style,
+          margin: 20,
+        },
+        plotLines: yPlotLines,
+        min: options.include_x_axis
+          ? 0
+          : options.range
+          ? options.range.min
+          : null,
+        max: options.range ? options.range.max : null,
+        gridLineDashStyle: "ShortDash",
+        gridLineColor: "#DDD",
+        tickLength: 0,
+      },
+      legend: {
+        itemStyle: {
+          color: "#FFFFFF",
+        },
+        layout: "vertical",
+        align: "left",
+        verticalAlign: "top",
+        y: 50,
+        borderWidth: 0,
+      },
+      labels: {
+        style: {
+          color: "#FFFFFF",
+        },
+      },
+      series: this._data,
+    };
+
+    for (let i = 0; i < chart.series.length; i++) {
+      chart.series[i].legendIndex = chart.series.length - i;
+      chart.series[i].index = chart.series.length - i;
+    }
+
+    if (this.renderer) {
+      chart = this.renderer(options, chart);
+    }
+
+    pygal.config.renderChart(chart);
+
+    return "";
+  }
+
+  get title() {
+    return this._options.title;
+  }
+  get width() {
+    return this._options.width;
+  }
+  get height() {
+    return this._options.height;
+  }
+  get range() {
+    return this._options.range;
+  }
+  get include_x_axis() {
+    return this._options.include_x_axis;
+  }
+  get x_title() {
+    return this._options.x_title;
+  }
+  get y_title() {
+    return this._options.y_title;
+  }
+  get title_font_size() {
+    return this._options.title_font_size;
+  }
+  get fill() {
+    return this._options.fill;
+  }
+  get stroke() {
+    return this._options.stroke;
+  }
+  get x_labels() {
+    return this._options.x_labels;
+  }
+
+  set title(val) {
+    this._options.title = pygal.toJs(val);
+  }
+  set width(val) {
+    this._options.width = pygal.toJs(val);
+  }
+  set height(val) {
+    this._options.height = pygal.toJs(val);
+  }
+  set range(val) {
+    this._options.range = pygal.toJs(val);
+  }
+  set include_x_axis(val) {
+    this._options.include_x_axis = pygal.toJs(val);
+  }
+  set x_title(val) {
+    this._options.x_title = pygal.toJs(val);
+  }
+  set y_title(val) {
+    this._options.y_title = pygal.toJs(val);
+  }
+  set title_font_size(val) {
+    this._options.title_font_size = pygal.toJs(val);
+  }
+  set fill(val) {
+    this._options.fill = pygal.toJs(val);
+  }
+  set stroke(val) {
+    this._options.stroke = pygal.toJs(val);
+  }
+  set x_labels(val) {
+    this._options.x_labels = pygal.toJs(val);
+  }
+
+  #rgba(rgb, a) {
+    return "rgba(" + rgb.join(",") + "," + a + ")";
+  }
+}
+
+// Work around a webpack hot module reloading problem.
+globalThis.$RefreshReg$ = () => {};
+
+class _Line extends Chart {
+  constructor(...args) {
+    super(...args);
+    this.renderer = (options, chart) => {
+      chart.chart.type = pygal.toJs(options.fill) ? "area" : "line";
+      return chart;
+    };
+  }
+}
+const Line = (...args) => new _Line(...args);
+
+class _StackedLine extends Chart {
+  constructor(...args) {
+    super(...args);
+    this.renderer = (options, chart) => {
+      chart.chart.type = pygal.toJs(options.fill) ? "area" : "line";
+      chart.plotOptions = {
+        area: {
+          stacking: "percent",
+        },
+        series: {
+          stacking: "percent",
+        },
+      };
+      return chart;
+    };
+  }
+}
+const StackedLine = (...args) => new _StackedLine(...args);
+
+class _Bar extends Chart {
+  constructor(...args) {
+    super(...args);
+    this.renderer = (options, chart) => {
+      chart.chart.type = "column";
+      return chart;
+    };
+  }
+}
+const Bar = (...args) => new _Bar(...args);
+
+class _StackedBar extends Chart {
+  constructor(...args) {
+    super(...args);
+    this.renderer = (options, chart) => {
+      chart.chart.type = "column";
+      chart.plotOptions = {
+        column: {
+          stacking: "percent",
+        },
+      };
+      return chart;
+    };
+  }
+}
+const StackedBar = (...args) => new _StackedBar(...args);
+
+class _HorizontalBar extends Chart {
+  constructor(...args) {
+    super(...args);
+    this.renderer = (options, chart) => {
+      chart.chart.type = "bar";
+      return chart;
+    };
+  }
+}
+const HorizontalBar = (...args) => new _HorizontalBar(...args);
+
+class _StackedHorizontalBar extends Chart {
+  constructor(...args) {
+    super(...args);
+    this.renderer = (options, chart) => {
+      chart.chart.type = "bar";
+      chart.plotOptions = {
+        bar: {
+          stacking: "percent",
+        },
+      };
+      return chart;
+    };
+  }
+}
+const StackedHorizontalBar = (...args) => new _StackedHorizontalBar(...args);
+
+class _XY extends Chart {
+  constructor(...args) {
+    super(...args);
+    this.renderer = (options, chart) => {
+      if (pygal.toJs(options.stroke) === false) {
+        chart.chart.type = "scatter";
+      } else {
+        chart.chart.type = pygal.toJs(options.fill) ? "area" : "line";
+      }
+      chart.xAxis.labels.enabled = true;
+
+      return chart;
+    };
+  }
+}
+const XY = (...args) => new _XY(...args);
+
+class _Radar extends Chart {
+  constructor(...args) {
+    super(...args);
+    this.renderer = (options, chart) => {
+      chart.chart.polar = true;
+      chart.chart.type = "line";
+      chart.xAxis = {
+        categories: pygal.toJs(options.x_labels),
+        tickmarkPlacement: "on",
+        lineWidth: 0,
+      };
+      chart.yAxis = {
+        gridLineInterpolation: "polygon",
+        lineWidth: 0,
+        min: 0,
+        gridLineDashStyle: "ShortDash",
+        gridLineColor: "#DDD",
+      };
+      for (let i = 0; i < chart.series.length; i++) {
+        chart.series[i].pointPlacement = "on";
+      }
+
+      return chart;
+    };
+  }
+}
+const Radar = (...args) => new _Radar(...args);
+
+class _Pie extends Chart {
+  constructor(...args) {
+    super(...args);
+    this.renderer = (options, chart) => {
+      chart.chart.type = "pie";
+      const slices = [];
+      const breakdown = [];
+      let useBreakdown = false;
+      for (let i = 0; i < chart.series.length; i++) {
+        const slice = chart.series[i];
+        if (slice.data.length === 1) {
+          slices.unshift({
+            name: slice.name,
+            color: slice.color,
+            borderColor: slice.color,
+            legendIndex: slice.legendIndex,
+            y: slice.data[0],
+          });
+          breakdown.unshift({
+            name: slice.name,
+            color: slice.color,
+            borderColor: slice.color,
+            y: slice.data[0],
+          });
+        } else {
+          useBreakdown = true;
+          let sum = 0;
+          let maxDecimal = 0;
+          for (let j = 0; j < slice.data.length; j++) {
+            const parts = slice.data[j].toString().split(".");
+            maxDecimal = Math.max(maxDecimal, parts[1] ? parts[1].length : 0);
+            sum += slice.data[j];
+            breakdown.unshift({
+              name: slice.name,
+              color: "rgba(0,0,0,0)",
+              borderColor: slice.color,
+              y: slice.data[j],
+            });
+          }
+          slices.unshift({
+            name: slice.name,
+            color: slice.color,
+            borderColor: slice.color,
+            legendIndex: slice.legendIndex,
+            y: parseFloat(sum.toFixed(maxDecimal)),
+          });
+        }
+      }
+      chart.tooltip = {
+        formatter: function () {
+          return this.key + ": " + this.y;
+        },
+      };
+      chart.plotOptions = {
+        pie: {
+          allowPointSelect: !useBreakdown,
+          cursor: useBreakdown ? null : "pointer",
+          shadow: false,
+          center: ["50%", "50%"],
+          dataLabels: {
+            enabled: false,
+          },
+        },
+      };
+      chart.series = [
+        {
+          name: " ",
+          data: slices,
+          showInLegend: true,
+        },
+      ];
+      if (useBreakdown) {
+        chart.series.push({
+          name: " ",
+          data: breakdown,
+          innerSize: "90%",
+          showInLegend: false,
+        });
+      }
+      return chart;
+    };
+  }
+}
+const Pie = (...args) => new _Pie(...args);
+
+pygal = {
+  ...pygal,
+  Chart,
+  COLORS,
+  some,
+  Line,
+  StackedLine,
+  Bar,
+  StackedBar,
+  HorizontalBar,
+  StackedHorizontalBar,
+  XY,
+  Radar,
+  Pie,
+};
+
+globalThis.pygal = pygal;
diff --git a/public/packages/p5-0.0.1-py3-none-any.whl b/public/pyodide/packages/p5-0.0.1-py3-none-any.whl
similarity index 100%
rename from public/packages/p5-0.0.1-py3-none-any.whl
rename to public/pyodide/packages/p5-0.0.1-py3-none-any.whl
diff --git a/public/packages/sense_hat-0.0.1-py3-none-any.whl b/public/pyodide/packages/sense_hat-0.0.1-py3-none-any.whl
similarity index 100%
rename from public/packages/sense_hat-0.0.1-py3-none-any.whl
rename to public/pyodide/packages/sense_hat-0.0.1-py3-none-any.whl
diff --git a/public/packages/turtle-0.0.1-py3-none-any.whl b/public/pyodide/packages/turtle-0.0.1-py3-none-any.whl
similarity index 100%
rename from public/packages/turtle-0.0.1-py3-none-any.whl
rename to public/pyodide/packages/turtle-0.0.1-py3-none-any.whl
diff --git a/src/assets/stylesheets/ErrorMessage.scss b/src/assets/stylesheets/ErrorMessage.scss
index 0fc0f8ca6..fbbf14acb 100644
--- a/src/assets/stylesheets/ErrorMessage.scss
+++ b/src/assets/stylesheets/ErrorMessage.scss
@@ -5,6 +5,7 @@
   color: #7e0305;
   background-color: #fde2e1;
   padding: $space-0-75 $space-1-25;
+  overflow-y: auto;
 
   &__content {
     padding: 0;
diff --git a/src/components/Editor/Output/Output.jsx b/src/components/Editor/Output/Output.jsx
index 2647359e6..60c882815 100644
--- a/src/components/Editor/Output/Output.jsx
+++ b/src/components/Editor/Output/Output.jsx
@@ -9,16 +9,12 @@ const Output = () => {
   const isEmbedded = useSelector((state) => state.editor.isEmbedded);
   const searchParams = new URLSearchParams(window.location.search);
   const isBrowserPreview = searchParams.get("browserPreview") === "true";
-  const usePyodide = searchParams.get("pyodide") === "true";
 
   return (
     <>
       <ExternalFiles />
       <div className="proj-runner-container">
-        <RunnerFactory
-          projectType={project.project_type}
-          usePyodide={usePyodide}
-        />
+        <RunnerFactory projectType={project.project_type} />
         {isEmbedded && !isBrowserPreview ? <RunBar embedded /> : null}
       </div>
     </>
diff --git a/src/components/Editor/Runners/PyodideRunner/PyodideRunner.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
similarity index 74%
rename from src/components/Editor/Runners/PyodideRunner/PyodideRunner.jsx
rename to src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
index 7a7a9906e..edc45441b 100644
--- a/src/components/Editor/Runners/PyodideRunner/PyodideRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
@@ -1,7 +1,7 @@
 /* eslint import/no-webpack-loader-syntax: off */
 /* eslint-disable react-hooks/exhaustive-deps */
 
-import "../../../../assets/stylesheets/PythonRunner.scss";
+import "../../../../../assets/stylesheets/PythonRunner.scss";
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
@@ -9,22 +9,56 @@ import {
   setError,
   codeRunHandled,
   loadingRunner,
-} from "../../../../redux/EditorSlice";
+} from "../../../../../redux/EditorSlice";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import { useMediaQuery } from "react-responsive";
-import { MOBILE_MEDIA_QUERY } from "../../../../utils/mediaQueryBreakpoints";
-import ErrorMessage from "../../ErrorMessage/ErrorMessage";
-import { createError } from "../../../../utils/apiCallHandler";
+import { MOBILE_MEDIA_QUERY } from "../../../../../utils/mediaQueryBreakpoints";
+import ErrorMessage from "../../../ErrorMessage/ErrorMessage";
+import { createError } from "../../../../../utils/apiCallHandler";
 import VisualOutputPane from "./VisualOutputPane";
-import OutputViewToggle from "../PythonRunner/OutputViewToggle";
-import { SettingsContext } from "../../../../utils/settings";
-import RunnerControls from "../../../RunButton/RunnerControls";
-
-const PyodideRunner = () => {
-  const pyodideWorker = useMemo(
-    () => new Worker("./PyodideWorker.js", { type: "module" }),
-    [],
-  );
+import OutputViewToggle from "../OutputViewToggle";
+import { SettingsContext } from "../../../../../utils/settings";
+import RunnerControls from "../../../../RunButton/RunnerControls";
+// import PyodideWorker from "worker-loader!./PyodideWorker.js";
+// import PyodideWorker from "worker-plugin/loader!?esModule./PyodideWorkerObj.js";
+// import PyodideWorker from "worker-plugin/loader!./PyodideWorker.js"; // outputs a string like 0.web-component.worker.js
+// import serviceWorker from "worker-loader!../../../../utils/PyodideServiceWorker.js";
+// import serviceWorker from "../../../../utils/PyodideServiceWorker.js";
+
+// import fileContent from "./PyodideWorkerObj.js";
+// import fileContent from "./PyodideWorker.js";
+
+// const blob = new Blob([fileContent], { type: "application/javascript" }); // Create a blob from the imported file
+// const url = URL.createObjectURL(blob); // Create a blob URL
+
+const getWorkerURL = (url) => {
+  const content = `importScripts("${url}");`;
+  const blob = new Blob([content], { type: "application/javascript" });
+  return URL.createObjectURL(blob);
+};
+
+const workerUrl = getWorkerURL(`${process.env.PUBLIC_URL}/PyodideWorker.js`);
+// const serviceWorkerUrl = getWorkerURL(
+//   `${process.env.PUBLIC_URL}/PyodideServiceWorker.js`,
+// );
+
+const PyodideRunner = ({ active }) => {
+  // const pyodideWorker = useMemo(
+  //   () =>
+  //     // new Worker(`${process.env.PUBLIC_URL}/PyodideWorker.js`, {
+  //     // new Worker(new URL("./PyodideWorker.js", import.meta.url), {
+  //     new Worker(`./PyodideWorker.js`, {
+  //       type: "module",
+  //       // credentials: "omit", // or "same-origin" if your server requires cookies or HTTP authentication
+  //     }),
+  //   [],
+  // );
+  // const pyodideWorker = useMemo(() => new PyodideWorker(), []);
+  // const pyodideWorker = useMemo(() => new Worker(PyodideWorker), []);
+  // const pyodideWorker = useMemo(() => PyodideWorker, []);
+  // const pyodideWorker = useMemo(() => new Worker(url, { type: "module" }), []);
+  const pyodideWorker = useMemo(() => new Worker(workerUrl), []);
+  // const pyodideWorker = useMemo(() => new Worker(PyodideWorker()), []);
   const interruptBuffer = useRef();
   const stdinBuffer = useRef();
   const stdinClosed = useRef();
@@ -47,6 +81,32 @@ const PyodideRunner = () => {
   const showVisualTab = queryParams.get("show_visual_tab") === "true";
   const [hasVisual, setHasVisual] = useState(showVisualTab || senseHatAlways);
   const [visuals, setVisuals] = useState([]);
+  const [showRunner, setShowRunner] = useState(active);
+
+  // const getBlobURL = (code, type) => {
+  //   const blob = new Blob([code], { type });
+  //   return URL.createObjectURL(blob);
+  // };
+
+  useEffect(() => {
+    console.log("trying registering service worker");
+    if ("serviceWorker" in navigator) {
+      console.log("registering service worker");
+      navigator.serviceWorker
+        // .register("./PyodideServiceWorker.js")
+        // .register(`${process.env.PUBLIC_URL}/PyodideServiceWorker.js`)
+        .register(`${window.location.origin}/PyodideServiceWorker.js`)
+        // .register(serviceWorker)
+        // .register(getBlobURL(serviceWorker, "application/javascript"))
+        // .register(serviceWorkerUrl)
+        .then((registration) => {
+          if (!registration.active || !navigator.serviceWorker.controller) {
+            console.log("registered");
+            window.location.reload();
+          }
+        });
+    }
+  }, []);
 
   useEffect(() => {
     pyodideWorker.onmessage = ({ data }) => {
@@ -79,13 +139,20 @@ const PyodideRunner = () => {
   }, []);
 
   useEffect(() => {
-    if (codeRunTriggered) {
+    if (codeRunTriggered && active) {
+      console.log("running with pyodide");
       handleRun();
     }
   }, [codeRunTriggered]);
 
   useEffect(() => {
-    if (codeRunStopped) {
+    if (codeRunTriggered) {
+      setShowRunner(active);
+    }
+  }, [codeRunTriggered]);
+
+  useEffect(() => {
+    if (codeRunStopped && active) {
       handleStop();
     }
   }, [codeRunStopped]);
@@ -116,7 +183,7 @@ const PyodideRunner = () => {
     const { content, ctrlD } = await getInputContent(element);
 
     const encoder = new TextEncoder();
-    const bytes = encoder.encode(content + "\r\n");
+    const bytes = encoder.encode(content + "\n");
 
     const previousLength = stdinBuffer.current[0];
     stdinBuffer.current.set(bytes, previousLength);
@@ -278,7 +345,12 @@ const PyodideRunner = () => {
   };
 
   return (
-    <div className={`pythonrunner-container`}>
+    <div
+      className={`pythonrunner-container pyodiderunner${
+        active ? " pyodiderunner--active" : ""
+      }`}
+      style={{ display: showRunner ? "flex" : "none" }}
+    >
       {isSplitView ? (
         <>
           {hasVisual && (
diff --git a/src/components/Editor/Runners/PyodideRunner/PyodideRunner.test.js b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
similarity index 82%
rename from src/components/Editor/Runners/PyodideRunner/PyodideRunner.test.js
rename to src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
index 9b215b0c0..ebdc761ba 100644
--- a/src/components/Editor/Runners/PyodideRunner/PyodideRunner.test.js
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
@@ -4,7 +4,7 @@ import configureStore from "redux-mock-store";
 import PyodideRunner from "./PyodideRunner";
 import { Provider } from "react-redux";
 import PyodideWorker, { postMessage } from "./PyodideWorker.mock.js";
-import { setError } from "../../../../redux/EditorSlice.js";
+import { setError } from "../../../../../redux/EditorSlice.js";
 
 jest.mock("fs");
 
@@ -25,12 +25,12 @@ const initialState = {
   auth: {},
 };
 
-describe("When first loaded", () => {
+describe("When active and first loaded", () => {
   beforeEach(() => {
     const store = mockStore(initialState);
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
   });
@@ -38,6 +38,12 @@ describe("When first loaded", () => {
   test("it renders successfully", () => {
     expect(screen.queryByText("output.textOutput")).toBeInTheDocument();
   });
+
+  test("it has style display: flex", () => {
+    expect(document.querySelector(".pyodiderunner")).toHaveStyle(
+      "display: flex",
+    );
+  });
 });
 
 describe("When a code run has been triggered", () => {
@@ -55,7 +61,7 @@ describe("When a code run has been triggered", () => {
     });
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
   });
@@ -94,7 +100,7 @@ describe("When the code has been stopped", () => {
     });
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
   });
@@ -112,7 +118,7 @@ describe("When loading pyodide", () => {
     store = mockStore(initialState);
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
 
@@ -131,7 +137,7 @@ describe("When pyodide has loaded", () => {
     store = mockStore(initialState);
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
 
@@ -151,7 +157,7 @@ describe("When input is required", () => {
     store = mockStore(initialState);
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
 
@@ -192,7 +198,7 @@ describe("When output is received", () => {
     store = mockStore(initialState);
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
 
@@ -215,7 +221,7 @@ describe("When visual output is received", () => {
     store = mockStore(initialState);
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
 
@@ -247,7 +253,7 @@ describe("When an error is received", () => {
     store = mockStore(initialState);
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
 
@@ -279,7 +285,7 @@ describe("When the code run is interrupted", () => {
     store = mockStore(initialState);
     render(
       <Provider store={store}>
-        <PyodideRunner />,
+        <PyodideRunner active={true} />,
       </Provider>,
     );
 
@@ -302,3 +308,38 @@ describe("When the code run is interrupted", () => {
     );
   });
 });
+
+describe("When not active and first loaded", () => {
+  beforeEach(() => {
+    const store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+        <PyodideRunner active={false} />,
+      </Provider>,
+    );
+  });
+
+  test("it renders with display: none", () => {
+    expect(document.querySelector(".pyodiderunner")).toHaveStyle(
+      "display: none",
+    );
+  });
+});
+
+describe("When not active and code run triggered", () => {
+  beforeEach(() => {
+    const store = mockStore({
+      ...initialState,
+      editor: { ...initialState.editor, codeRunTriggered: true },
+    });
+    render(
+      <Provider store={store}>
+        <PyodideRunner active={false} />,
+      </Provider>,
+    );
+  });
+
+  test("it does not send a message to the worker to run the python code", () => {
+    expect(postMessage).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/components/Editor/Runners/PyodideRunner/PyodideWorker.js b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.js
similarity index 99%
rename from src/components/Editor/Runners/PyodideRunner/PyodideWorker.js
rename to src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.js
index 2aefb8cee..a358ec7b3 100644
--- a/src/components/Editor/Runners/PyodideRunner/PyodideWorker.js
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.js
@@ -183,8 +183,9 @@ const vendoredPackages = {
   pygal: {
     before: () => {
       pyodide.registerJsModule("pygal", { ...pygal });
-      pygal.config.renderChart = (content) =>
+      pygal.config.renderChart = (content) => {
         postMessage({ method: "handleVisual", origin: "pygal", content });
+      };
     },
     after: () => {},
   },
diff --git a/src/components/Editor/Runners/PyodideRunner/PyodideWorker.mock.js b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.mock.js
similarity index 100%
rename from src/components/Editor/Runners/PyodideRunner/PyodideWorker.mock.js
rename to src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.mock.js
diff --git a/src/components/Editor/Runners/PyodideRunner/PyodideWorker.test.js b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.test.js
similarity index 96%
rename from src/components/Editor/Runners/PyodideRunner/PyodideWorker.test.js
rename to src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.test.js
index 56be04eed..6ef5737fb 100644
--- a/src/components/Editor/Runners/PyodideRunner/PyodideWorker.test.js
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.test.js
@@ -1,4 +1,7 @@
 import { waitFor } from "@testing-library/react";
+const { TextEncoder } = require("util");
+
+global.TextEncoder = TextEncoder;
 
 class MockPythonArray extends Array {
   toJs() {
@@ -42,7 +45,9 @@ describe("PyodideWorker", () => {
       setStdin: jest.fn(),
     };
     global.loadPyodide = jest.fn().mockResolvedValue(pyodide);
-    worker = require("./PyodideWorker.js", { type: "module" });
+    worker = require("../../../../../public/PyodideWorker.js", {
+      type: "module",
+    });
   });
 
   test("it imports the pyodide script", () => {
diff --git a/src/components/Editor/Runners/PyodideRunner/VisualOutputPane.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/VisualOutputPane.jsx
similarity index 86%
rename from src/components/Editor/Runners/PyodideRunner/VisualOutputPane.jsx
rename to src/components/Editor/Runners/PythonRunner/PyodideRunner/VisualOutputPane.jsx
index 7f05887b7..10b5295c0 100644
--- a/src/components/Editor/Runners/PyodideRunner/VisualOutputPane.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/VisualOutputPane.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
-import AstroPiModel from "../../../AstroPiModel/AstroPiModel";
+import AstroPiModel from "../../../../AstroPiModel/AstroPiModel";
 import Highcharts from "highcharts";
 
 const VisualOutputPane = ({ visuals, setVisuals }) => {
@@ -44,8 +44,16 @@ const showVisual = (visual, output) => {
             },
           },
         },
+        tooltip: {
+          ...visual.content.tooltip,
+          formatter:
+            visual.content.chart.type === "pie"
+              ? function () {
+                  return this.key + ": " + this.y;
+                }
+              : null,
+        },
       };
-
       Highcharts.chart(output.current, chartContent);
       break;
     case "turtle":
diff --git a/src/components/Editor/Runners/PyodideRunner/VisualOutputPane.test.js b/src/components/Editor/Runners/PythonRunner/PyodideRunner/VisualOutputPane.test.js
similarity index 100%
rename from src/components/Editor/Runners/PyodideRunner/VisualOutputPane.test.js
rename to src/components/Editor/Runners/PythonRunner/PyodideRunner/VisualOutputPane.test.js
diff --git a/src/components/Editor/Runners/PyodideRunner/_internal_sense_hat.js b/src/components/Editor/Runners/PythonRunner/PyodideRunner/_internal_sense_hat.js
similarity index 100%
rename from src/components/Editor/Runners/PyodideRunner/_internal_sense_hat.js
rename to src/components/Editor/Runners/PythonRunner/PyodideRunner/_internal_sense_hat.js
diff --git a/src/components/Editor/Runners/PyodideRunner/pygal.js b/src/components/Editor/Runners/PythonRunner/PyodideRunner/pygal.js
similarity index 98%
rename from src/components/Editor/Runners/PyodideRunner/pygal.js
rename to src/components/Editor/Runners/PythonRunner/PyodideRunner/pygal.js
index 63cd94247..c1f095def 100644
--- a/src/components/Editor/Runners/PyodideRunner/pygal.js
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/pygal.js
@@ -437,9 +437,7 @@ class _Pie extends Chart {
         }
       }
       chart.tooltip = {
-        formatter: function () {
-          return this.key + ": " + this.y;
-        },
+        //  A patch for the tooltip formatter function has been added in VisualOutputPane.jsx because functions cannot be passed through using postMessage.
       };
       chart.plotOptions = {
         pie: {
diff --git a/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx b/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx
index f271560e7..bd23cbeec 100644
--- a/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx
@@ -1,462 +1,76 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import "../../../../assets/stylesheets/PythonRunner.scss";
-import React, { useContext, useEffect, useRef, useState } from "react";
-import { useSelector, useDispatch } from "react-redux";
+import React, { useEffect, useState } from "react";
+
+import PyodideRunner from "./PyodideRunner/PyodideRunner";
+import SkulptRunner from "./SkulptRunner/SkulptRunner";
+import { useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
-import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
-import Sk from "skulpt";
-import { useMediaQuery } from "react-responsive";
-import {
-  setError,
-  codeRunHandled,
-  stopDraw,
-  setSenseHatEnabled,
-  triggerDraw,
-} from "../../../../redux/EditorSlice";
-import ErrorMessage from "../../ErrorMessage/ErrorMessage";
-import { createError } from "../../../../utils/apiCallHandler";
-import store from "../../../../app/store";
-import VisualOutputPane from "./VisualOutputPane";
-import OutputViewToggle from "./OutputViewToggle";
-import { SettingsContext } from "../../../../utils/settings";
-import RunnerControls from "../../../RunButton/RunnerControls";
-import { MOBILE_MEDIA_QUERY } from "../../../../utils/mediaQueryBreakpoints";
 
-const externalLibraries = {
-  "./pygal/__init__.js": {
-    path: `${process.env.ASSETS_URL}/shims/pygal/pygal.js`,
-    dependencies: [
-      "https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.2/highcharts.js",
-      "https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.2/js/highcharts-more.js",
-    ],
-  },
-  "./py5/__init__.js": {
-    path: `${process.env.ASSETS_URL}/shims/processing/py5/py5-shim.js`,
-    dependencies: [`${process.env.ASSETS_URL}/libraries/processing/p5/p5.js`],
-  },
-  "./py5_imported/__init__.js": {
-    path: `${process.env.ASSETS_URL}/shims/processing/py5_imported_mode/py5_imported.js`,
-  },
-  "./py5_imported_mode.py": {
-    path: `${process.env.ASSETS_URL}/shims/processing/py5_imported_mode/py5_imported_mode.py`,
-  },
-  "./p5/__init__.js": {
-    path: `${process.env.ASSETS_URL}/shims/processing/p5/p5-shim.js`,
-    dependencies: [`${process.env.ASSETS_URL}/libraries/processing/p5/p5.js`],
-  },
-  "./_internal_sense_hat/__init__.js": {
-    path: `${process.env.ASSETS_URL}/shims/sense_hat/_internal_sense_hat.js`,
-  },
-  "./sense_hat.py": {
-    path: `${process.env.ASSETS_URL}/shims/sense_hat/sense_hat_blob.py`,
-  },
-};
+const SKULPT_ONLY_MODULES = [
+  "p5",
+  "py5",
+  "py5_imported",
+  "sense_hat",
+  "turtle",
+];
 
 const PythonRunner = () => {
-  const projectCode = useSelector((state) => state.editor.project.components);
-  const projectIdentifier = useSelector(
-    (state) => state.editor.project.identifier,
-  );
-  const user = useSelector((state) => state.auth.user);
-  const isSplitView = useSelector((state) => state.editor.isSplitView);
-  const isEmbedded = useSelector((state) => state.editor.isEmbedded);
+  const project = useSelector((state) => state.editor.project);
   const codeRunTriggered = useSelector(
     (state) => state.editor.codeRunTriggered,
   );
-  const codeRunStopped = useSelector((state) => state.editor.codeRunStopped);
-  const drawTriggered = useSelector((state) => state.editor.drawTriggered);
   const senseHatAlwaysEnabled = useSelector(
     (state) => state.editor.senseHatAlwaysEnabled,
   );
-  const output = useRef();
-  const dispatch = useDispatch();
+  const [usePyodide, setUsePyodide] = useState(true);
   const { t } = useTranslation();
-  const settings = useContext(SettingsContext);
-  const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
-
-  const queryParams = new URLSearchParams(window.location.search);
-  const [hasVisualOutput, setHasVisualOutput] = useState(
-    queryParams.get("show_visual_tab") === "true" || senseHatAlwaysEnabled,
-  );
-
-  const getInput = () => {
-    const pageInput = document.getElementById("input");
-    const webComponentInput = document.querySelector("editor-wc")
-      ? document.querySelector("editor-wc").shadowRoot.getElementById("input")
-      : null;
-    return pageInput || webComponentInput;
-  };
-
-  useEffect(() => {
-    if (codeRunTriggered) {
-      runCode();
-    }
-  }, [codeRunTriggered]);
-
-  useEffect(() => {
-    if (codeRunStopped && getInput()) {
-      const input = getInput();
-      input.removeAttribute("id");
-      input.removeAttribute("contentEditable");
-      dispatch(setError(t("output.errors.interrupted")));
-      dispatch(codeRunHandled());
-    }
-  }, [codeRunStopped]);
 
   useEffect(() => {
-    if (!codeRunTriggered && !drawTriggered) {
-      if (getInput()) {
-        const input = getInput();
-        input.removeAttribute("id");
-        input.removeAttribute("contentEditable");
-      }
-    }
-  }, [drawTriggered, codeRunTriggered]);
-
-  const visualLibraries = [
-    "./pygal/__init__.js",
-    "./py5/__init__.js",
-    "./py5_imported/__init__.js",
-    "./p5/__init__.js",
-    "./_internal_sense_hat/__init__.js",
-    "src/builtin/turtle/__init__.js",
-  ];
-
-  const outf = (text) => {
-    if (text !== "") {
-      const node = output.current;
-      const div = document.createElement("span");
-      div.classList.add("pythonrunner-console-output-line");
-      div.innerHTML = new Option(text).innerHTML;
-      node.appendChild(div);
-      node.scrollTop = node.scrollHeight;
-    }
-  };
-
-  const builtinRead = (library) => {
-    if (library === "./_internal_sense_hat/__init__.js") {
-      dispatch(setSenseHatEnabled(true));
-    }
-
-    if (library === "./p5/__init__.js" || library === "./py5/__init__.js") {
-      dispatch(triggerDraw());
-    }
-
-    // TODO: Handle pre-importing py5_imported when refactored py5 shim imported
-
-    if (visualLibraries.includes(library)) {
-      setHasVisualOutput(true);
-    }
-
-    let localProjectFiles = projectCode
-      .filter((component) => component.name !== "main")
-      .map((component) => `./${component.name}.py`);
-
-    if (localProjectFiles.includes(library)) {
-      let filename = library.slice(2, -3);
-      let component = projectCode.find((x) => x.name === filename);
-      if (component) {
-        return component.content;
-      }
-    }
-
-    if (
-      Sk.builtinFiles !== undefined &&
-      Sk.builtinFiles["files"][library] !== undefined
-    ) {
-      return Sk.builtinFiles["files"][library];
-    }
-
-    if (externalLibraries[library]) {
-      var externalLibraryInfo = externalLibraries[library];
-
-      return (
-        externalLibraries[library].code ||
-        Sk.misceval.promiseToSuspension(
-          fetch(externalLibraryInfo.path)
-            .then((response) => response.text())
-            .then((code) => {
-              if (!code) {
-                throw new Sk.builtin.ImportError(
-                  "Failed to load remote module",
-                );
-              }
-              externalLibraries[library].code = code;
-              var promise;
-
-              function mapUrlToPromise(path) {
-                // If the script is already in the DOM don't add it again.
-                const existingScriptElement = document.querySelector(
-                  `script[src="${path}"]`,
-                );
-                if (!existingScriptElement) {
-                  return new Promise(function (resolve, _reject) {
-                    let scriptElement = document.createElement("script");
-                    scriptElement.type = "text/javascript";
-                    scriptElement.src = path;
-                    scriptElement.async = true;
-                    scriptElement.onload = function () {
-                      resolve(true);
-                    };
-
-                    document.body.appendChild(scriptElement);
-                  });
-                }
-              }
-              if (externalLibraryInfo.loadDepsSynchronously) {
-                promise = (externalLibraryInfo.dependencies || []).reduce(
-                  (p, url) => {
-                    return p.then(() => mapUrlToPromise(url));
-                  },
-                  Promise.resolve(),
-                ); // initial
-              } else {
-                promise = Promise.all(
-                  (externalLibraryInfo.dependencies || []).map(mapUrlToPromise),
-                );
-              }
-
-              return promise
-                .then(function () {
-                  return code;
-                })
-                .catch(function () {
-                  throw new Sk.builtin.ImportError(
-                    "Failed to load dependencies required",
-                  );
-                });
-            }),
-        )
+    const getImports = (code) => {
+      const codeWithoutMultilineStrings = code.replace(
+        /'''[\s\S]*?'''|"""[\s\S]*?"""/gm,
+        "",
       );
-    }
-
-    throw new Error("File not found: '" + library + "'");
-  };
-
-  const inputSpan = () => {
-    const span = document.createElement("span");
-    span.setAttribute("id", "input");
-    span.setAttribute("spellCheck", "false");
-    span.setAttribute("class", "pythonrunner-input");
-    span.setAttribute("contentEditable", "true");
-    return span;
-  };
-
-  const inf = function () {
-    if (Sk.sense_hat) {
-      Sk.sense_hat.mz_criteria.noInputEvents = false;
-    }
-    const outputPane = output.current;
-    outputPane.appendChild(inputSpan());
-
-    const input = getInput();
-    input.focus();
-
-    return new Promise(function (resolve, reject) {
-      input.addEventListener("keydown", function removeInput(e) {
-        if (e.key === "Enter") {
-          input.removeEventListener(e.type, removeInput);
-          // resolve the promise with the value of the input field
-          const answer = input.innerText;
-          input.removeAttribute("id");
-          input.removeAttribute("contentEditable");
-          input.innerText = answer + "\n";
-
-          document.addEventListener("keyup", function storeInput(e) {
-            if (e.key === "Enter") {
-              document.removeEventListener(e.type, storeInput);
-              resolve(answer);
-            }
-          });
-        }
-      });
-    });
-  };
-
-  const handleError = (err) => {
-    let errorMessage;
-    if (err.message === t("output.errors.interrupted")) {
-      errorMessage = err.message;
-    } else {
-      const errorDetails = (err.tp$str && err.tp$str().v)
-        .replace(/\[(.*?)\]/, "")
-        .replace(/\.$/, "");
-      const errorType = err.tp$name || err.constructor.name;
-      const lineNumber = err.traceback[0].lineno;
-      const fileName = err.traceback[0].filename.replace(/^\.\//, "");
-
-      let userId;
-      if (user?.profile) {
-        userId = user.profile?.user;
-      }
-
-      errorMessage = `${errorType}: ${errorDetails} on line ${lineNumber} of ${fileName}`;
-      createError(projectIdentifier, userId, {
-        errorType,
-        errorMessage,
-      });
-    }
-
-    dispatch(setError(errorMessage));
-    dispatch(stopDraw());
-    if (getInput()) {
-      const input = getInput();
-      input.removeAttribute("id");
-      input.removeAttribute("contentEditable");
-    }
-  };
-
-  const runCode = () => {
-    // clear previous output
-    dispatch(setError(""));
-    output.current.innerHTML = "";
-    dispatch(setSenseHatEnabled(false));
-
-    var prog = projectCode[0].content;
-
-    if (prog.includes(`# ${t("input.comment.py5")}`)) {
-      prog = prog.replace(
-        `# ${t("input.comment.py5")}`,
-        "from py5_imported_mode import *",
-      );
-
-      if (!prog.match(/(\nrun_sketch)/)) {
-        prog = prog.concat("\nrun_sketch()");
+      const importRegex =
+        /(?<=^\s*)(from\s+([a-zA-Z0-9_.]+)(\s+import\s+([a-zA-Z0-9_.]+))?)|(?<=^\s*)(import\s+([a-zA-Z0-9_.]+))/gm;
+      const matches = codeWithoutMultilineStrings.match(importRegex);
+      const imports = matches
+        ? matches.map(
+            (match) =>
+              match
+                .split(/from|import/)
+                .filter(Boolean)
+                .map((s) => s.trim())[0],
+          )
+        : [];
+      if (code.includes(`# ${t("input.comment.py5")}`)) {
+        imports.push("py5_imported");
       }
-    }
-
-    Sk.configure({
-      inputfun: inf,
-      output: outf,
-      read: builtinRead,
-      debugging: true,
-      inputTakesPrompt: true,
-      uncaughtException: handleError,
-    });
-
-    var myPromise = Sk.misceval
-      .asyncToPromise(() => Sk.importMainWithBody("main", false, prog, true), {
-        "*": () => {
-          if (store.getState().editor.codeRunStopped) {
-            throw new Error(t("output.errors.interrupted"));
+      return imports;
+    };
+
+    project.components.forEach((component) => {
+      if (component.extension === "py" && !codeRunTriggered) {
+        try {
+          const imports = getImports(component.content);
+          const hasSkulptOnlyModules = imports.some((name) =>
+            SKULPT_ONLY_MODULES.includes(name),
+          );
+          if (hasSkulptOnlyModules || senseHatAlwaysEnabled) {
+            setUsePyodide(false);
+          } else {
+            setUsePyodide(true);
           }
-        },
-      })
-      .catch((err) => {
-        handleError(err);
-      })
-      .finally(() => {
-        dispatch(codeRunHandled());
-      });
-    myPromise.then(function (_mod) {});
-  };
-
-  function shiftFocusToInput(e) {
-    if (document.getSelection().toString().length > 0) {
-      return;
-    }
-
-    const inputBox = getInput();
-    if (inputBox && e.target !== inputBox) {
-      const input = getInput();
-      const selection = window.getSelection();
-      selection.removeAllRanges();
-
-      if (input.innerText && input.innerText.length > 0) {
-        const range = document.createRange();
-        range.setStart(input, 1);
-        range.collapse(true);
-        selection.addRange(range);
+        } catch (error) {
+          console.error("Error occurred while getting imports:", error);
+        }
       }
-      input.focus();
-    }
-  }
-
+    });
+  }, [project, codeRunTriggered, senseHatAlwaysEnabled, t]);
   return (
-    <div className={`pythonrunner-container`}>
-      {isSplitView ? (
-        <>
-          {hasVisualOutput ? (
-            <div className="output-panel output-panel--visual">
-              <Tabs forceRenderTabPanel={true}>
-                <div className="react-tabs__tab-container">
-                  <TabList>
-                    <Tab key={0}>
-                      <span className="react-tabs__tab-text">
-                        {t("output.visualOutput")}
-                      </span>
-                    </Tab>
-                  </TabList>
-                  {!isEmbedded && hasVisualOutput ? <OutputViewToggle /> : null}
-                  {!isEmbedded && isMobile ? <RunnerControls skinny /> : null}
-                </div>
-                <TabPanel key={0}>
-                  <VisualOutputPane />
-                </TabPanel>
-              </Tabs>
-            </div>
-          ) : null}
-          <div className="output-panel output-panel--text">
-            <Tabs forceRenderTabPanel={true}>
-              <div className="react-tabs__tab-container">
-                <TabList>
-                  <Tab key={0}>
-                    <span className="react-tabs__tab-text">
-                      {t("output.textOutput")}
-                    </span>
-                  </Tab>
-                </TabList>
-                {!hasVisualOutput && !isEmbedded && isMobile ? (
-                  <RunnerControls skinny />
-                ) : null}
-              </div>
-              <ErrorMessage />
-              <TabPanel key={0}>
-                <pre
-                  className={`pythonrunner-console pythonrunner-console--${settings.fontSize}`}
-                  onClick={shiftFocusToInput}
-                  ref={output}
-                ></pre>
-              </TabPanel>
-            </Tabs>
-          </div>
-        </>
-      ) : (
-        <Tabs forceRenderTabPanel={true} defaultIndex={hasVisualOutput ? 0 : 1}>
-          <div className="react-tabs__tab-container">
-            <TabList>
-              {hasVisualOutput ? (
-                <Tab key={0}>
-                  <span className="react-tabs__tab-text">
-                    {t("output.visualOutput")}
-                  </span>
-                </Tab>
-              ) : null}
-              <Tab key={1}>
-                <span className="react-tabs__tab-text">
-                  {t("output.textOutput")}
-                </span>
-              </Tab>
-            </TabList>
-            {!isEmbedded && hasVisualOutput ? <OutputViewToggle /> : null}
-            {!isEmbedded && isMobile ? <RunnerControls skinny /> : null}
-          </div>
-          <ErrorMessage />
-          {hasVisualOutput ? (
-            <TabPanel key={0}>
-              <VisualOutputPane />
-            </TabPanel>
-          ) : null}
-          <TabPanel key={1}>
-            <pre
-              className={`pythonrunner-console pythonrunner-console--${settings.fontSize}`}
-              onClick={shiftFocusToInput}
-              ref={output}
-            ></pre>
-          </TabPanel>
-        </Tabs>
-      )}
-    </div>
+    <>
+      <PyodideRunner active={usePyodide} />
+      <SkulptRunner active={!usePyodide} />
+    </>
   );
 };
 
diff --git a/src/components/Editor/Runners/PythonRunner/PythonRunner.test.js b/src/components/Editor/Runners/PythonRunner/PythonRunner.test.js
index d2a091193..4a68c2e3d 100644
--- a/src/components/Editor/Runners/PythonRunner/PythonRunner.test.js
+++ b/src/components/Editor/Runners/PythonRunner/PythonRunner.test.js
@@ -1,922 +1,127 @@
-import React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { render } from "@testing-library/react";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
-
 import PythonRunner from "./PythonRunner";
-import {
-  codeRunHandled,
-  setError,
-  triggerDraw,
-} from "../../../../redux/EditorSlice";
-import { SettingsContext } from "../../../../utils/settings";
-import { matchMedia, setMedia } from "mock-match-media";
-import { MOBILE_BREAKPOINT } from "../../../../utils/mediaQueryBreakpoints";
-
-let mockMediaQuery = (query) => {
-  return matchMedia(query).matches;
-};
 
-jest.mock("react-responsive", () => ({
-  ...jest.requireActual("react-responsive"),
-  useMediaQuery: ({ query }) => mockMediaQuery(query),
-}));
-
-const user = {
-  access_token: "39a09671-be55-4847-baf5-8919a0c24a25",
-  profile: {
-    user: "b48e70e2-d9ed-4a59-aee5-fc7cf09dbfaf",
+const middlewares = [];
+const mockStore = configureStore(middlewares);
+const initialState = {
+  editor: {
+    project: {
+      components: [
+        {
+          name: "main",
+          extension: "py",
+          content: "",
+        },
+      ],
+      image_list: [],
+    },
   },
+  auth: {},
 };
 
-describe("Testing basic input span functionality", () => {
-  let input;
-  let store;
-
-  beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            {
-              content: "input()",
-            },
-          ],
-          image_list: [],
-        },
-        codeRunTriggered: true,
-      },
-      auth: {
-        user,
-      },
-    };
-    store = mockStore(initialState);
-    render(
-      <Provider store={store}>
-        <PythonRunner />
-      </Provider>,
-    );
-    input = document.getElementById("input");
-  });
-
-  test("Input function in code makes editable input box appear", () => {
-    expect(input).toHaveAttribute("contentEditable", "true");
-  });
-
-  test("Input box has focus when it appears", () => {
-    expect(input).toHaveFocus();
-  });
-
-  test("Clicking output pane transfers focus to input", () => {
-    const outputPane = document.getElementsByClassName(
-      "pythonrunner-console",
-    )[0];
-    fireEvent.click(outputPane);
-    expect(input).toHaveFocus();
-  });
-
-  test("Pressing enter stops the input box being editable", () => {
-    const inputText = "hello world";
-    input.innerText = inputText;
-    fireEvent.keyDown(input, { key: "Enter", code: "Enter", charCode: 13 });
-
-    expect(input).not.toHaveAttribute("contentEditable", "true");
-    expect(input.innerText).toBe(inputText + "\n");
-  });
-});
-
-test("Input box not there when input function not called", () => {
-  const middlewares = [];
-  const mockStore = configureStore(middlewares);
-  const initialState = {
-    editor: {
-      project: {
-        components: [
-          {
-            content: "print('Hello')",
-          },
-        ],
-        image_list: [],
-      },
-      codeRunTriggered: true,
-    },
-    auth: {
-      user,
-    },
-  };
-  const store = mockStore(initialState);
+const renderRunnerWithCode = ({
+  code = "",
+  codeRunTriggered = false,
+  senseHatAlwaysEnabled = false,
+}) => {
+  let state = initialState;
+  state.editor.project.components[0].content = code;
+  state.editor.codeRunTriggered = codeRunTriggered;
+  state.editor.senseHatAlwaysEnabled = senseHatAlwaysEnabled;
+  const store = mockStore(state);
   render(
     <Provider store={store}>
       <PythonRunner />
     </Provider>,
   );
-  expect(document.getElementById("input")).toBeNull();
-});
-
-describe("Testing stopping the code run with input", () => {
-  let store;
-  beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            {
-              content: "input()",
-            },
-          ],
-          image_list: [],
-        },
-        codeRunTriggered: true,
-        codeRunStopped: true,
-      },
-      auth: {
-        user,
-      },
-    };
-    store = mockStore(initialState);
-    render(
-      <Provider store={store}>
-        <PythonRunner />
-      </Provider>,
-    );
-  });
-
-  test("Disables input span", () => {
-    expect(document.getElementById("input")).toBeNull();
-  });
-
-  test("Sets interruption error", () => {
-    expect(store.getActions()).toEqual(
-      expect.arrayContaining([setError("output.errors.interrupted")]),
-    );
-  });
-
-  test("Handles code run", () => {
-    expect(store.getActions()).toEqual(
-      expect.arrayContaining([codeRunHandled()]),
-    );
-  });
-});
-
-describe("When in split view, no visual libraries used and code run", () => {
-  let store;
-  let queryByText;
-
-  beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            {
-              content: "print('hello world')",
-            },
-          ],
-          image_list: [],
-        },
-        codeRunTriggered: true,
-        isSplitView: true,
-      },
-      auth: {
-        user,
-      },
-    };
-    store = mockStore(initialState);
-    ({ queryByText } = render(
-      <Provider store={store}>
-        <PythonRunner />
-      </Provider>,
-    ));
-  });
-
-  test("Output view toggle not shown", () => {
-    expect(
-      screen.queryByText("outputViewToggle.buttonTabLabel"),
-    ).not.toBeInTheDocument();
-  });
-
-  test("Visual tab is not shown", () => {
-    const visualTab = queryByText("output.visualOutput");
-    expect(visualTab).not.toBeInTheDocument();
-  });
-});
-
-describe("When in split view, py5 imported and code run", () => {
-  let store;
-  let queryByText;
-
-  beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            {
-              content: "import py5",
-            },
-          ],
-          image_list: [],
-        },
-        codeRunTriggered: true,
-        isSplitView: true,
-      },
-      auth: {
-        user,
-      },
-    };
-    store = mockStore(initialState);
-    ({ queryByText } = render(
-      <Provider store={store}>
-        <PythonRunner />
-      </Provider>,
-    ));
-  });
-
-  test("Output view toggle is shown", () => {
-    expect(
-      screen.queryByText("outputViewToggle.buttonTabLabel"),
-    ).toBeInTheDocument();
-  });
-
-  test("Visual tab is shown", () => {
-    const visualTab = queryByText("output.visualOutput");
-    expect(visualTab).toBeInTheDocument();
-  });
-
-  test("Draw is triggered", () => {
-    expect(store.getActions()).toEqual(expect.arrayContaining([triggerDraw()]));
-  });
-});
-
-describe("When in split view, py5_imported imported and code run", () => {
-  let store;
-  let queryByText;
-  beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            {
-              content: "import py5_imported",
-            },
-          ],
-          image_list: [],
-        },
-        codeRunTriggered: true,
-        isSplitView: true,
-      },
-      auth: {
-        user,
-      },
-    };
-    store = mockStore(initialState);
-    ({ queryByText } = render(
-      <Provider store={store}>
-        <PythonRunner />
-      </Provider>,
-    ));
-  });
-
-  test("Output view toggle is shown", () => {
-    expect(
-      screen.queryByText("outputViewToggle.buttonTabLabel"),
-    ).toBeInTheDocument();
-  });
-
-  test("Visual tab is shown", async () => {
-    const visualTab = queryByText("output.visualOutput");
-    expect(visualTab).toBeInTheDocument();
-  });
-});
-
-describe("When in split view, pygal imported and code run", () => {
-  let store;
-  let queryByText;
-  beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            {
-              content: "import pygal",
-            },
-          ],
-          image_list: [],
-        },
-        codeRunTriggered: true,
-        isSplitView: true,
-      },
-      auth: {
-        user,
-      },
-    };
-    store = mockStore(initialState);
-    ({ queryByText } = render(
-      <Provider store={store}>
-        <PythonRunner />
-      </Provider>,
-    ));
-  });
-
-  test("Output view toggle is shown", () => {
-    expect(
-      screen.queryByText("outputViewToggle.buttonTabLabel"),
-    ).toBeInTheDocument();
-  });
-
-  test("Visual tab is shown", () => {
-    const visualTab = queryByText("output.visualOutput");
-    expect(visualTab).toBeInTheDocument();
-  });
-});
-
-describe("When in split view, turtle imported and code run", () => {
-  let store;
-  let queryByText;
-  beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            {
-              content: "import turtle",
-            },
-          ],
-          image_list: [],
-        },
-        codeRunTriggered: true,
-        isSplitView: true,
-      },
-      auth: {
-        user,
-      },
-    };
-    store = mockStore(initialState);
-    ({ queryByText } = render(
-      <Provider store={store}>
-        <PythonRunner />
-      </Provider>,
-    ));
-  });
-
-  test("Output view toggle is shown", () => {
-    expect(
-      screen.queryByText("outputViewToggle.buttonTabLabel"),
-    ).toBeInTheDocument();
-  });
-
-  test("Visual tab is shown", () => {
-    const visualTab = queryByText("output.visualOutput");
-    expect(visualTab).toBeInTheDocument();
-  });
-});
-
-describe("When in split view, sense_hat imported and code run", () => {
-  let store;
-  let queryByText;
-  beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            {
-              content: "import _internal_sense_hat",
-            },
-          ],
-          image_list: [],
-        },
-        codeRunTriggered: true,
-        isSplitView: true,
-      },
-      auth: {
-        user,
-      },
-    };
-    store = mockStore(initialState);
-    ({ queryByText } = render(
-      <Provider store={store}>
-        <PythonRunner />
-      </Provider>,
-    ));
-  });
-
-  test("Output view toggle is shown", () => {
-    expect(
-      screen.queryByText("outputViewToggle.buttonTabLabel"),
-    ).toBeInTheDocument();
-  });
-
-  test("Visual tab is shown", async () => {
-    const visualTab = queryByText("output.visualOutput");
-    expect(visualTab).toBeInTheDocument();
-  });
-});
-
-describe("When in tabbed view, no visual libraries used and code run", () => {
-  let store;
-  let queryByText;
-
-  beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            {
-              content: "print('hello world')",
-            },
-          ],
-          image_list: [],
-        },
-        codeRunTriggered: true,
-        isSplitView: false,
-      },
-      auth: {
-        user,
-      },
-    };
-    store = mockStore(initialState);
-    ({ queryByText } = render(
-      <Provider store={store}>
-        <PythonRunner />
-      </Provider>,
-    ));
-  });
-
-  test("Output view toggle not shown", () => {
-    expect(
-      screen.queryByText("outputViewToggle.buttonSplitLabel"),
-    ).not.toBeInTheDocument();
-  });
-
-  test("Visual tab is not shown", () => {
-    const visualTab = queryByText("output.visualOutput");
-    expect(visualTab).not.toBeInTheDocument();
-  });
-});
-
-describe("When in tabbed view, py5 imported and code run", () => {
-  let store;
-  let queryByText;
-
-  beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            {
-              content: "import py5",
-            },
-          ],
-          image_list: [],
-        },
-        codeRunTriggered: true,
-        isSplitView: false,
-      },
-      auth: {
-        user,
-      },
-    };
-    store = mockStore(initialState);
-    ({ queryByText } = render(
-      <Provider store={store}>
-        <PythonRunner />
-      </Provider>,
-    ));
-  });
-
-  test("Output view toggle not shown", () => {
-    expect(
-      screen.queryByText("outputViewToggle.buttonSplitLabel"),
-    ).toBeInTheDocument();
-  });
-
-  test("Visual tab is not hidden", () => {
-    const visualTab = queryByText("output.visualOutput");
-    expect(visualTab).toBeInTheDocument();
-  });
-
-  test("Draw is triggered", () => {
-    expect(store.getActions()).toEqual(expect.arrayContaining([triggerDraw()]));
-  });
-});
-
-describe("When in tabbed view, py5_imported imported and code run", () => {
-  let store;
-  let queryByText;
-  beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            {
-              content: "import py5_imported",
-            },
-          ],
-          image_list: [],
-        },
-        codeRunTriggered: true,
-        isSplitView: false,
-      },
-      auth: {
-        user,
-      },
-    };
-    store = mockStore(initialState);
-    ({ queryByText } = render(
-      <Provider store={store}>
-        <PythonRunner />
-      </Provider>,
-    ));
-  });
-
-  test("Output view toggle not shown", () => {
-    expect(
-      screen.queryByText("outputViewToggle.buttonSplitLabel"),
-    ).toBeInTheDocument();
-  });
-
-  test("Visual tab is not hidden", async () => {
-    const visualTab = queryByText("output.visualOutput");
-    expect(visualTab).toBeInTheDocument();
-  });
-});
-
-describe("When in tabbed view, pygal imported and code run", () => {
-  let store;
-  let queryByText;
-  beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            {
-              content: "import pygal",
-            },
-          ],
-          image_list: [],
-        },
-        codeRunTriggered: true,
-        isSplitView: false,
-      },
-      auth: {
-        user,
-      },
-    };
-    store = mockStore(initialState);
-    ({ queryByText } = render(
-      <Provider store={store}>
-        <PythonRunner />
-      </Provider>,
-    ));
-  });
-
-  test("Output view toggle not shown", () => {
-    expect(
-      screen.queryByText("outputViewToggle.buttonSplitLabel"),
-    ).toBeInTheDocument();
-  });
+};
 
-  test("Visual tab is not hidden", () => {
-    const visualTab = queryByText("output.visualOutput");
-    expect(visualTab).toBeInTheDocument();
-  });
+test("Renders with Pyodide runner initially", () => {
+  renderRunnerWithCode({});
+  expect(
+    document.querySelector(".skulptrunner--active"),
+  ).not.toBeInTheDocument();
+  expect(document.querySelector(".pyodiderunner--active")).toBeInTheDocument();
 });
 
-describe("When in tabbed view, turtle imported and code run", () => {
-  let store;
-  let queryByText;
-  beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            {
-              content: "import turtle",
-            },
-          ],
-          image_list: [],
-        },
-        codeRunTriggered: true,
-        isSplitView: false,
-      },
-      auth: {
-        user,
-      },
-    };
-    store = mockStore(initialState);
-    ({ queryByText } = render(
-      <Provider store={store}>
-        <PythonRunner />
-      </Provider>,
-    ));
-  });
-
-  test("Output view toggle not shown", () => {
-    expect(
-      screen.queryByText("outputViewToggle.buttonSplitLabel"),
-    ).toBeInTheDocument();
-  });
-
-  test("Visual tab is not hidden", () => {
-    const visualTab = queryByText("output.visualOutput");
-    expect(visualTab).toBeInTheDocument();
-  });
+test("Uses pyodide when no skulpt-only modules are imported", () => {
+  renderRunnerWithCode({ code: "import math" });
+  expect(
+    document.querySelector(".skulptrunner--active"),
+  ).not.toBeInTheDocument();
+  expect(document.querySelector(".pyodiderunner--active")).toBeInTheDocument();
 });
 
-describe("When in tabbed view, sense_hat imported and code run", () => {
-  let store;
-  let queryByText;
-  beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            {
-              content: "import _internal_sense_hat",
-            },
-          ],
-          image_list: [],
-        },
-        codeRunTriggered: true,
-        isSplitView: false,
-      },
-      auth: {
-        user,
-      },
-    };
-    store = mockStore(initialState);
-    ({ queryByText } = render(
-      <Provider store={store}>
-        <PythonRunner />
-      </Provider>,
-    ));
-  });
-
-  test("Output view toggle not shown", () => {
-    expect(
-      screen.queryByText("outputViewToggle.buttonSplitLabel"),
-    ).toBeInTheDocument();
-  });
-
-  test("Visual tab is not hidden", async () => {
-    const visualTab = queryByText("output.visualOutput");
-    expect(visualTab).toBeInTheDocument();
-  });
+test("Uses skulpt when skulpt-only modules are imported", () => {
+  renderRunnerWithCode({ code: "import p5" });
+  expect(
+    document.querySelector(".pyodiderunner--active"),
+  ).not.toBeInTheDocument();
+  expect(document.querySelector(".skulptrunner--active")).toBeInTheDocument();
 });
 
-test("When embedded in split view with visual output does not render output view toggle", () => {
-  const middlewares = [];
-  const mockStore = configureStore(middlewares);
-  const initialState = {
-    editor: {
-      project: {
-        components: [
-          {
-            content: "import p5",
-          },
-        ],
-        image_list: [],
-      },
-      codeRunTriggered: true,
-      isSplitView: true,
-      isEmbedded: true,
-    },
-    auth: {
-      user,
-    },
-  };
-  const store = mockStore(initialState);
-  render(
-    <Provider store={store}>
-      <PythonRunner />
-    </Provider>,
-  );
-  expect(screen.queryByRole("button")).not.toBeInTheDocument();
+test("Uses skulpt when senseHatAlwaysEnabled is true", () => {
+  renderRunnerWithCode({ code: "import math", senseHatAlwaysEnabled: true });
+  expect(
+    document.querySelector(".pyodiderunner--active"),
+  ).not.toBeInTheDocument();
+  expect(document.querySelector(".skulptrunner--active")).toBeInTheDocument();
 });
 
-test("When embedded in split view with no visual output does not render output view toggle", () => {
-  const middlewares = [];
-  const mockStore = configureStore(middlewares);
-  const initialState = {
-    editor: {
-      project: {},
-      senseHatAlwaysEnabled: false,
-      isSplitView: true,
-      isEmbedded: true,
-    },
-    auth: {
-      user,
-    },
-  };
-  const store = mockStore(initialState);
-  render(
-    <Provider store={store}>
-      <PythonRunner />
-    </Provider>,
-  );
-  expect(screen.queryByRole("button")).not.toBeInTheDocument();
+test("Switches runners if the import has a from clause", () => {
+  renderRunnerWithCode({ code: "from p5 import *" });
+  expect(document.querySelector(".skulptrunner--active")).toBeInTheDocument();
+  expect(
+    document.querySelector(".pyodiderunner--active"),
+  ).not.toBeInTheDocument();
 });
 
-test("When embedded in tabbed view does not render output view toggle", () => {
-  const middlewares = [];
-  const mockStore = configureStore(middlewares);
-  const initialState = {
-    editor: {
-      project: {},
-      isSplitView: false,
-      isEmbedded: true,
-    },
-    auth: {
-      user,
-    },
-  };
-  const store = mockStore(initialState);
-  render(
-    <Provider store={store}>
-      <PythonRunner />
-    </Provider>,
-  );
-  expect(screen.queryByRole("button")).not.toBeInTheDocument();
+test("Switches runners if the import is indented", () => {
+  renderRunnerWithCode({ code: "    import p5" });
+  expect(document.querySelector(".skulptrunner--active")).toBeInTheDocument();
+  expect(
+    document.querySelector(".pyodiderunner--active"),
+  ).not.toBeInTheDocument();
 });
 
-test("Tabbed view has text and visual tabs with same parent element", () => {
-  const middlewares = [];
-  const mockStore = configureStore(middlewares);
-  const initialState = {
-    editor: {
-      project: {},
-      senseHatAlwaysEnabled: true,
-      isSplitView: false,
-    },
-    auth: {
-      user,
-    },
-  };
-  const store = mockStore(initialState);
-  render(
-    <Provider store={store}>
-      <PythonRunner />
-    </Provider>,
-  );
+test("Uses skulpt if the py5 magic comment is used", () => {
+  renderRunnerWithCode({ code: "# input.comment.py5" });
+  expect(document.querySelector(".skulptrunner--active")).toBeInTheDocument();
   expect(
-    screen.getByText("output.visualOutput").parentElement.parentElement,
-  ).toEqual(screen.getByText("output.textOutput").parentElement.parentElement);
+    document.querySelector(".pyodiderunner--active"),
+  ).not.toBeInTheDocument();
 });
 
-test("Split view has text and visual tabs with different parent elements", () => {
-  const middlewares = [];
-  const mockStore = configureStore(middlewares);
-  const initialState = {
-    editor: {
-      project: {},
-      senseHatAlwaysEnabled: true,
-      isSplitView: true,
-    },
-    auth: {
-      user,
-    },
-  };
-  const store = mockStore(initialState);
-  render(
-    <Provider store={store}>
-      <PythonRunner />
-    </Provider>,
-  );
-  expect(screen.getByText("output.visualOutput").parentElement).not.toEqual(
-    screen.getByText("output.textOutput").parentElement,
-  );
+test("Does not switch runners while the code is running", () => {
+  renderRunnerWithCode({ code: "import p5", codeRunTriggered: true });
+  expect(document.querySelector(".pyodiderunner--active")).toBeInTheDocument();
+  expect(
+    document.querySelector(".skulptrunner--active"),
+  ).not.toBeInTheDocument();
 });
 
-describe("When font size is set", () => {
-  let runnerContainer;
-
-  beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {},
-      },
-      auth: {
-        user,
-      },
-    };
-    const store = mockStore(initialState);
-    runnerContainer = render(
-      <Provider store={store}>
-        <SettingsContext.Provider
-          value={{ theme: "dark", fontSize: "myFontSize" }}
-        >
-          <PythonRunner />
-        </SettingsContext.Provider>
-      </Provider>,
-    );
-  });
-
-  test("Font size class is set correctly", () => {
-    const runnerConsole = runnerContainer.container.querySelector(
-      ".pythonrunner-console",
-    );
-    expect(runnerConsole).toHaveClass("pythonrunner-console--myFontSize");
-  });
+test("Does not switch runners if the import is in a comment", () => {
+  renderRunnerWithCode({ code: "# import p5" });
+  expect(document.querySelector(".pyodiderunner--active")).toBeInTheDocument();
+  expect(
+    document.querySelector(".skulptrunner--active"),
+  ).not.toBeInTheDocument();
 });
 
-describe("When on desktop", () => {
-  beforeEach(() => {
-    setMedia({
-      width: "1000px",
-    });
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            {
-              content: "print('Hello')",
-            },
-          ],
-          image_list: [],
-        },
-      },
-      auth: {
-        user,
-      },
-    };
-    const store = mockStore(initialState);
-    render(
-      <Provider store={store}>
-        <PythonRunner />
-      </Provider>,
-    );
-  });
-
-  test("There is no run button", () => {
-    expect(screen.queryByText("runButton.run")).not.toBeInTheDocument();
-  });
+test("Does not switch runners if the import is in a string", () => {
+  renderRunnerWithCode({ code: 'print("import p5")' });
+  expect(document.querySelector(".pyodiderunner--active")).toBeInTheDocument();
+  expect(
+    document.querySelector(".skulptrunner--active"),
+  ).not.toBeInTheDocument();
 });
 
-describe("When on mobile and not embedded", () => {
-  beforeEach(() => {
-    setMedia({
-      width: MOBILE_BREAKPOINT,
-    });
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            {
-              content: "print('Hello')",
-            },
-          ],
-          image_list: [],
-        },
-        isEmbedded: false,
-      },
-      auth: {
-        user,
-      },
-    };
-    const store = mockStore(initialState);
-    render(
-      <Provider store={store}>
-        <PythonRunner />
-      </Provider>,
-    );
-  });
-
-  test("Has a run button in the tab bar", () => {
-    const runButton =
-      screen.getByText("runButton.run").parentElement.parentElement;
-    const runButtonContainer = runButton.parentElement.parentElement;
-    expect(runButtonContainer).toHaveClass("react-tabs__tab-container");
-  });
+test("Does not switch runners if the import is in a multiline string", () => {
+  renderRunnerWithCode({ code: '"""\nimport p5\n"""' });
+  expect(document.querySelector(".pyodiderunner--active")).toBeInTheDocument();
+  expect(
+    document.querySelector(".skulptrunner--active"),
+  ).not.toBeInTheDocument();
 });
diff --git a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
new file mode 100644
index 000000000..9e1ac2d4c
--- /dev/null
+++ b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
@@ -0,0 +1,479 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import "../../../../../assets/stylesheets/PythonRunner.scss";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { useTranslation } from "react-i18next";
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+import Sk from "skulpt";
+import { useMediaQuery } from "react-responsive";
+import {
+  setError,
+  codeRunHandled,
+  stopDraw,
+  setSenseHatEnabled,
+  triggerDraw,
+} from "../../../../../redux/EditorSlice";
+import ErrorMessage from "../../../ErrorMessage/ErrorMessage";
+import { createError } from "../../../../../utils/apiCallHandler";
+import store from "../../../../../app/store";
+import VisualOutputPane from "../VisualOutputPane";
+import OutputViewToggle from "../OutputViewToggle";
+import { SettingsContext } from "../../../../../utils/settings";
+import RunnerControls from "../../../../RunButton/RunnerControls";
+import { MOBILE_MEDIA_QUERY } from "../../../../../utils/mediaQueryBreakpoints";
+
+const externalLibraries = {
+  "./pygal/__init__.js": {
+    path: `${process.env.ASSETS_URL}/shims/pygal/pygal.js`,
+    dependencies: [
+      "https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.2/highcharts.js",
+      "https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.2/js/highcharts-more.js",
+    ],
+  },
+  "./py5/__init__.js": {
+    path: `${process.env.ASSETS_URL}/shims/processing/py5/py5-shim.js`,
+    dependencies: [`${process.env.ASSETS_URL}/libraries/processing/p5/p5.js`],
+  },
+  "./py5_imported/__init__.js": {
+    path: `${process.env.ASSETS_URL}/shims/processing/py5_imported_mode/py5_imported.js`,
+  },
+  "./py5_imported_mode.py": {
+    path: `${process.env.ASSETS_URL}/shims/processing/py5_imported_mode/py5_imported_mode.py`,
+  },
+  "./p5/__init__.js": {
+    path: `${process.env.ASSETS_URL}/shims/processing/p5/p5-shim.js`,
+    dependencies: [`${process.env.ASSETS_URL}/libraries/processing/p5/p5.js`],
+  },
+  "./_internal_sense_hat/__init__.js": {
+    path: `${process.env.ASSETS_URL}/shims/sense_hat/_internal_sense_hat.js`,
+  },
+  "./sense_hat.py": {
+    path: `${process.env.ASSETS_URL}/shims/sense_hat/sense_hat_blob.py`,
+  },
+};
+
+const SkulptRunner = ({ active }) => {
+  const projectCode = useSelector((state) => state.editor.project.components);
+  const projectIdentifier = useSelector(
+    (state) => state.editor.project.identifier,
+  );
+  const user = useSelector((state) => state.auth.user);
+  const isSplitView = useSelector((state) => state.editor.isSplitView);
+  const isEmbedded = useSelector((state) => state.editor.isEmbedded);
+  const codeRunTriggered = useSelector(
+    (state) => state.editor.codeRunTriggered,
+  );
+  const codeRunStopped = useSelector((state) => state.editor.codeRunStopped);
+  const drawTriggered = useSelector((state) => state.editor.drawTriggered);
+  const output = useRef();
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+  const settings = useContext(SettingsContext);
+  const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
+
+  const [hasVisualOutput, setHasVisualOutput] = useState(true);
+
+  const [showRunner, setShowRunner] = useState(active);
+
+  const getInput = () => {
+    const pageInput = document.getElementById("input");
+    const webComponentInput = document.querySelector("editor-wc")
+      ? document.querySelector("editor-wc").shadowRoot.getElementById("input")
+      : null;
+    return pageInput || webComponentInput;
+  };
+
+  useEffect(() => {
+    if (codeRunTriggered && active && showRunner) {
+      console.log("running with skulpt");
+      runCode();
+    }
+  }, [codeRunTriggered, showRunner]);
+
+  useEffect(() => {
+    if (codeRunTriggered) {
+      setShowRunner(active);
+    }
+  }, [codeRunTriggered]);
+
+  useEffect(() => {
+    if (codeRunStopped && active && getInput()) {
+      const input = getInput();
+      input.removeAttribute("id");
+      input.removeAttribute("contentEditable");
+      dispatch(setError(t("output.errors.interrupted")));
+      dispatch(codeRunHandled());
+    }
+  }, [codeRunStopped]);
+
+  useEffect(() => {
+    if (!codeRunTriggered && !drawTriggered && active) {
+      if (getInput()) {
+        const input = getInput();
+        input.removeAttribute("id");
+        input.removeAttribute("contentEditable");
+      }
+    }
+  }, [drawTriggered, codeRunTriggered]);
+
+  const visualLibraries = [
+    "./pygal/__init__.js",
+    "./py5/__init__.js",
+    "./py5_imported/__init__.js",
+    "./p5/__init__.js",
+    "./_internal_sense_hat/__init__.js",
+    "src/builtin/turtle/__init__.js",
+  ];
+
+  const outf = (text) => {
+    if (text !== "") {
+      const node = output.current;
+      const div = document.createElement("span");
+      div.classList.add("pythonrunner-console-output-line");
+      div.innerHTML = new Option(text).innerHTML;
+      node.appendChild(div);
+      node.scrollTop = node.scrollHeight;
+    }
+  };
+
+  const builtinRead = (library) => {
+    if (library === "./_internal_sense_hat/__init__.js") {
+      dispatch(setSenseHatEnabled(true));
+    }
+
+    if (library === "./p5/__init__.js" || library === "./py5/__init__.js") {
+      dispatch(triggerDraw());
+    }
+
+    // TODO: Handle pre-importing py5_imported when refactored py5 shim imported
+
+    if (visualLibraries.includes(library)) {
+      setHasVisualOutput(true);
+    }
+
+    let localProjectFiles = projectCode
+      .filter((component) => component.name !== "main")
+      .map((component) => `./${component.name}.py`);
+
+    if (localProjectFiles.includes(library)) {
+      let filename = library.slice(2, -3);
+      let component = projectCode.find((x) => x.name === filename);
+      if (component) {
+        return component.content;
+      }
+    }
+
+    if (
+      Sk.builtinFiles !== undefined &&
+      Sk.builtinFiles["files"][library] !== undefined
+    ) {
+      return Sk.builtinFiles["files"][library];
+    }
+
+    if (externalLibraries[library]) {
+      var externalLibraryInfo = externalLibraries[library];
+
+      return (
+        externalLibraries[library].code ||
+        Sk.misceval.promiseToSuspension(
+          fetch(externalLibraryInfo.path)
+            .then((response) => response.text())
+            .then((code) => {
+              if (!code) {
+                throw new Sk.builtin.ImportError(
+                  "Failed to load remote module",
+                );
+              }
+              externalLibraries[library].code = code;
+              var promise;
+
+              function mapUrlToPromise(path) {
+                // If the script is already in the DOM don't add it again.
+                const existingScriptElement = document.querySelector(
+                  `script[src="${path}"]`,
+                );
+                if (!existingScriptElement) {
+                  return new Promise(function (resolve, _reject) {
+                    let scriptElement = document.createElement("script");
+                    scriptElement.type = "text/javascript";
+                    scriptElement.src = path;
+                    scriptElement.async = true;
+                    scriptElement.onload = function () {
+                      resolve(true);
+                    };
+
+                    document.body.appendChild(scriptElement);
+                  });
+                }
+              }
+              if (externalLibraryInfo.loadDepsSynchronously) {
+                promise = (externalLibraryInfo.dependencies || []).reduce(
+                  (p, url) => {
+                    return p.then(() => mapUrlToPromise(url));
+                  },
+                  Promise.resolve(),
+                ); // initial
+              } else {
+                promise = Promise.all(
+                  (externalLibraryInfo.dependencies || []).map(mapUrlToPromise),
+                );
+              }
+
+              return promise
+                .then(function () {
+                  return code;
+                })
+                .catch(function () {
+                  throw new Sk.builtin.ImportError(
+                    "Failed to load dependencies required",
+                  );
+                });
+            }),
+        )
+      );
+    }
+
+    throw new Error("File not found: '" + library + "'");
+  };
+
+  const inputSpan = () => {
+    const span = document.createElement("span");
+    span.setAttribute("id", "input");
+    span.setAttribute("spellCheck", "false");
+    span.setAttribute("class", "pythonrunner-input");
+    span.setAttribute("contentEditable", "true");
+    return span;
+  };
+
+  const inf = function () {
+    if (Sk.sense_hat) {
+      Sk.sense_hat.mz_criteria.noInputEvents = false;
+    }
+    const outputPane = output.current;
+    outputPane.appendChild(inputSpan());
+
+    const input = getInput();
+    input.focus();
+
+    return new Promise(function (resolve, reject) {
+      input.addEventListener("keydown", function removeInput(e) {
+        if (e.key === "Enter") {
+          input.removeEventListener(e.type, removeInput);
+          // resolve the promise with the value of the input field
+          const answer = input.innerText;
+          input.removeAttribute("id");
+          input.removeAttribute("contentEditable");
+          input.innerText = answer + "\n";
+
+          document.addEventListener("keyup", function storeInput(e) {
+            if (e.key === "Enter") {
+              document.removeEventListener(e.type, storeInput);
+              resolve(answer);
+            }
+          });
+        }
+      });
+    });
+  };
+
+  const handleError = (err) => {
+    let errorMessage;
+    let explanation;
+    if (err.message === t("output.errors.interrupted")) {
+      errorMessage = err.message;
+    } else {
+      const errorDetails = (err.tp$str && err.tp$str().v)
+        .replace(/\[(.*?)\]/, "")
+        .replace(/\.$/, "");
+      const errorType = err.tp$name || err.constructor.name;
+      const lineNumber = err.traceback[0].lineno;
+      const fileName = err.traceback[0].filename.replace(/^\.\//, "");
+
+      if (errorType === "ImportError") {
+        const moduleName = errorDetails.replace(/No module named /, "");
+        explanation = `You should check your code for typos. If you are using p5, py5, sense_hat or turtle, ${moduleName} might not work.`;
+      }
+
+      let userId;
+      if (user?.profile) {
+        userId = user.profile?.user;
+      }
+
+      errorMessage = `${errorType}: ${errorDetails} on line ${lineNumber} of ${fileName}${
+        explanation ? `. ${explanation}` : ""
+      }`;
+      createError(projectIdentifier, userId, {
+        errorType,
+        errorMessage,
+      });
+    }
+
+    dispatch(setError(errorMessage));
+    dispatch(stopDraw());
+    if (getInput()) {
+      const input = getInput();
+      input.removeAttribute("id");
+      input.removeAttribute("contentEditable");
+    }
+  };
+
+  const runCode = () => {
+    // clear previous output
+    dispatch(setError(""));
+    output.current.innerHTML = "";
+    dispatch(setSenseHatEnabled(false));
+
+    var prog = projectCode[0].content;
+
+    if (prog.includes(`# ${t("input.comment.py5")}`)) {
+      prog = prog.replace(
+        `# ${t("input.comment.py5")}`,
+        "from py5_imported_mode import *",
+      );
+
+      if (!prog.match(/(\nrun_sketch)/)) {
+        prog = prog.concat("\nrun_sketch()");
+      }
+    }
+
+    Sk.configure({
+      inputfun: inf,
+      output: outf,
+      read: builtinRead,
+      debugging: true,
+      inputTakesPrompt: true,
+      uncaughtException: handleError,
+    });
+
+    var myPromise = Sk.misceval
+      .asyncToPromise(() => Sk.importMainWithBody("main", false, prog, true), {
+        "*": () => {
+          if (store.getState().editor.codeRunStopped) {
+            throw new Error(t("output.errors.interrupted"));
+          }
+        },
+      })
+      .catch((err) => {
+        handleError(err);
+      })
+      .finally(() => {
+        dispatch(codeRunHandled());
+      });
+    myPromise.then(function (_mod) {});
+  };
+
+  function shiftFocusToInput(e) {
+    if (document.getSelection().toString().length > 0) {
+      return;
+    }
+
+    const inputBox = getInput();
+    if (inputBox && e.target !== inputBox) {
+      const input = getInput();
+      const selection = window.getSelection();
+      selection.removeAllRanges();
+
+      if (input.innerText && input.innerText.length > 0) {
+        const range = document.createRange();
+        range.setStart(input, 1);
+        range.collapse(true);
+        selection.addRange(range);
+      }
+      input.focus();
+    }
+  }
+
+  return (
+    <div
+      className={`pythonrunner-container skulptrunner${
+        active ? " skulptrunner--active" : ""
+      }`}
+      style={{ display: showRunner ? "flex" : "none" }}
+    >
+      {isSplitView ? (
+        <>
+          {hasVisualOutput ? (
+            <div className="output-panel output-panel--visual">
+              <Tabs forceRenderTabPanel={true}>
+                <div className="react-tabs__tab-container">
+                  <TabList>
+                    <Tab key={0}>
+                      <span className="react-tabs__tab-text">
+                        {t("output.visualOutput")}
+                      </span>
+                    </Tab>
+                  </TabList>
+                  {!isEmbedded && hasVisualOutput ? <OutputViewToggle /> : null}
+                  {!isEmbedded && isMobile ? <RunnerControls skinny /> : null}
+                </div>
+                <TabPanel key={0}>
+                  <VisualOutputPane />
+                </TabPanel>
+              </Tabs>
+            </div>
+          ) : null}
+          <div className="output-panel output-panel--text">
+            <Tabs forceRenderTabPanel={true}>
+              <div className="react-tabs__tab-container">
+                <TabList>
+                  <Tab key={0}>
+                    <span className="react-tabs__tab-text">
+                      {t("output.textOutput")}
+                    </span>
+                  </Tab>
+                </TabList>
+                {!hasVisualOutput && !isEmbedded && isMobile ? (
+                  <RunnerControls skinny />
+                ) : null}
+              </div>
+              <ErrorMessage />
+              <TabPanel key={0}>
+                <pre
+                  className={`pythonrunner-console pythonrunner-console--${settings.fontSize}`}
+                  onClick={shiftFocusToInput}
+                  ref={output}
+                ></pre>
+              </TabPanel>
+            </Tabs>
+          </div>
+        </>
+      ) : (
+        <Tabs forceRenderTabPanel={true} defaultIndex={hasVisualOutput ? 0 : 1}>
+          <div className="react-tabs__tab-container">
+            <TabList>
+              {hasVisualOutput ? (
+                <Tab key={0}>
+                  <span className="react-tabs__tab-text">
+                    {t("output.visualOutput")}
+                  </span>
+                </Tab>
+              ) : null}
+              <Tab key={1}>
+                <span className="react-tabs__tab-text">
+                  {t("output.textOutput")}
+                </span>
+              </Tab>
+            </TabList>
+            {!isEmbedded && hasVisualOutput ? <OutputViewToggle /> : null}
+            {!isEmbedded && isMobile ? <RunnerControls skinny /> : null}
+          </div>
+          <ErrorMessage />
+          {hasVisualOutput ? (
+            <TabPanel key={0}>
+              <VisualOutputPane />
+            </TabPanel>
+          ) : null}
+          <TabPanel key={1}>
+            <pre
+              className={`pythonrunner-console pythonrunner-console--${settings.fontSize}`}
+              onClick={shiftFocusToInput}
+              ref={output}
+            ></pre>
+          </TabPanel>
+        </Tabs>
+      )}
+    </div>
+  );
+};
+
+export default SkulptRunner;
diff --git a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.test.js b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.test.js
new file mode 100644
index 000000000..aa24cb75d
--- /dev/null
+++ b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.test.js
@@ -0,0 +1,944 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
+import Sk from "skulpt";
+
+import SkulptRunner from "./SkulptRunner";
+import {
+  codeRunHandled,
+  setError,
+  triggerDraw,
+} from "../../../../../redux/EditorSlice";
+import { SettingsContext } from "../../../../../utils/settings";
+import { matchMedia, setMedia } from "mock-match-media";
+import { MOBILE_BREAKPOINT } from "../../../../../utils/mediaQueryBreakpoints";
+
+let mockMediaQuery = (query) => {
+  return matchMedia(query).matches;
+};
+
+jest.mock("react-responsive", () => ({
+  ...jest.requireActual("react-responsive"),
+  useMediaQuery: ({ query }) => mockMediaQuery(query),
+}));
+
+const user = {
+  access_token: "39a09671-be55-4847-baf5-8919a0c24a25",
+  profile: {
+    user: "b48e70e2-d9ed-4a59-aee5-fc7cf09dbfaf",
+  },
+};
+
+describe("Testing basic input span functionality", () => {
+  let input;
+  let store;
+
+  beforeEach(() => {
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          components: [
+            {
+              content: "input()",
+            },
+          ],
+          image_list: [],
+        },
+        codeRunTriggered: true,
+      },
+      auth: {
+        user,
+      },
+    };
+    store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+        <SkulptRunner active={true} />
+      </Provider>,
+    );
+    input = document.getElementById("input");
+  });
+
+  test("Input function in code makes editable input box appear", () => {
+    expect(input).toHaveAttribute("contentEditable", "true");
+  });
+
+  test("Input box has focus when it appears", () => {
+    expect(input).toHaveFocus();
+  });
+
+  test("Clicking output pane transfers focus to input", () => {
+    const outputPane = document.getElementsByClassName(
+      "pythonrunner-console",
+    )[0];
+    fireEvent.click(outputPane);
+    expect(input).toHaveFocus();
+  });
+
+  test("Pressing enter stops the input box being editable", () => {
+    const inputText = "hello world";
+    input.innerText = inputText;
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter", charCode: 13 });
+
+    expect(input).not.toHaveAttribute("contentEditable", "true");
+    expect(input.innerText).toBe(inputText + "\n");
+  });
+});
+
+test("Input box not there when input function not called", () => {
+  const middlewares = [];
+  const mockStore = configureStore(middlewares);
+  const initialState = {
+    editor: {
+      project: {
+        components: [
+          {
+            content: "print('Hello')",
+          },
+        ],
+        image_list: [],
+      },
+      codeRunTriggered: true,
+    },
+    auth: {
+      user,
+    },
+  };
+  const store = mockStore(initialState);
+  render(
+    <Provider store={store}>
+      <SkulptRunner active={true} />
+    </Provider>,
+  );
+  expect(document.getElementById("input")).toBeNull();
+});
+
+describe("Testing stopping the code run with input", () => {
+  let store;
+  beforeEach(() => {
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          components: [
+            {
+              content: "input()",
+            },
+          ],
+          image_list: [],
+        },
+        codeRunStopped: true,
+      },
+      auth: {
+        user,
+      },
+    };
+    store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+        <SkulptRunner active={true} />
+        <span id="input"></span>
+      </Provider>,
+    );
+  });
+
+  test("Disables input span", () => {
+    expect(document.getElementById("input")).toBeNull();
+  });
+
+  test("Sets interruption error", () => {
+    expect(store.getActions()).toEqual(
+      expect.arrayContaining([setError("output.errors.interrupted")]),
+    );
+  });
+
+  test("Handles code run", () => {
+    expect(store.getActions()).toEqual(
+      expect.arrayContaining([codeRunHandled()]),
+    );
+  });
+});
+
+describe("When in split view, py5 imported and code run", () => {
+  let store;
+  let queryByText;
+
+  beforeEach(() => {
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          components: [
+            {
+              content: "import py5",
+            },
+          ],
+          image_list: [],
+        },
+        codeRunTriggered: true,
+        isSplitView: true,
+      },
+      auth: {
+        user,
+      },
+    };
+    store = mockStore(initialState);
+    ({ queryByText } = render(
+      <Provider store={store}>
+        <SkulptRunner active={true} />
+      </Provider>,
+    ));
+  });
+
+  test("Output view toggle is shown", () => {
+    expect(
+      screen.queryByText("outputViewToggle.buttonTabLabel"),
+    ).toBeInTheDocument();
+  });
+
+  test("Visual tab is shown", () => {
+    const visualTab = queryByText("output.visualOutput");
+    expect(visualTab).toBeInTheDocument();
+  });
+
+  test("Draw is triggered", () => {
+    expect(store.getActions()).toEqual(expect.arrayContaining([triggerDraw()]));
+  });
+});
+
+describe("When in split view, py5_imported imported and code run", () => {
+  let store;
+  let queryByText;
+  beforeEach(() => {
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          components: [
+            {
+              content: "import py5_imported",
+            },
+          ],
+          image_list: [],
+        },
+        codeRunTriggered: true,
+        isSplitView: true,
+      },
+      auth: {
+        user,
+      },
+    };
+    store = mockStore(initialState);
+    ({ queryByText } = render(
+      <Provider store={store}>
+        <SkulptRunner active={true} />
+      </Provider>,
+    ));
+  });
+
+  test("Output view toggle is shown", () => {
+    expect(
+      screen.queryByText("outputViewToggle.buttonTabLabel"),
+    ).toBeInTheDocument();
+  });
+
+  test("Visual tab is shown", async () => {
+    const visualTab = queryByText("output.visualOutput");
+    expect(visualTab).toBeInTheDocument();
+  });
+});
+
+describe("When in split view, pygal imported and code run", () => {
+  let store;
+  let queryByText;
+  beforeEach(() => {
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          components: [
+            {
+              content: "import pygal",
+            },
+          ],
+          image_list: [],
+        },
+        codeRunTriggered: true,
+        isSplitView: true,
+      },
+      auth: {
+        user,
+      },
+    };
+    store = mockStore(initialState);
+    ({ queryByText } = render(
+      <Provider store={store}>
+        <SkulptRunner active={true} />
+      </Provider>,
+    ));
+  });
+
+  test("Output view toggle is shown", () => {
+    expect(
+      screen.queryByText("outputViewToggle.buttonTabLabel"),
+    ).toBeInTheDocument();
+  });
+
+  test("Visual tab is shown", () => {
+    const visualTab = queryByText("output.visualOutput");
+    expect(visualTab).toBeInTheDocument();
+  });
+});
+
+describe("When in split view, turtle imported and code run", () => {
+  let store;
+  let queryByText;
+  beforeEach(() => {
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          components: [
+            {
+              content: "import turtle",
+            },
+          ],
+          image_list: [],
+        },
+        codeRunTriggered: true,
+        isSplitView: true,
+      },
+      auth: {
+        user,
+      },
+    };
+    store = mockStore(initialState);
+    ({ queryByText } = render(
+      <Provider store={store}>
+        <SkulptRunner active={true} />
+      </Provider>,
+    ));
+  });
+
+  test("Output view toggle is shown", () => {
+    expect(
+      screen.queryByText("outputViewToggle.buttonTabLabel"),
+    ).toBeInTheDocument();
+  });
+
+  test("Visual tab is shown", () => {
+    const visualTab = queryByText("output.visualOutput");
+    expect(visualTab).toBeInTheDocument();
+  });
+});
+
+describe("When in split view, sense_hat imported and code run", () => {
+  let store;
+  let queryByText;
+  beforeEach(() => {
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          components: [
+            {
+              content: "import _internal_sense_hat",
+            },
+          ],
+          image_list: [],
+        },
+        codeRunTriggered: true,
+        isSplitView: true,
+      },
+      auth: {
+        user,
+      },
+    };
+    store = mockStore(initialState);
+    ({ queryByText } = render(
+      <Provider store={store}>
+        <SkulptRunner active={true} />
+      </Provider>,
+    ));
+  });
+
+  test("Output view toggle is shown", () => {
+    expect(
+      screen.queryByText("outputViewToggle.buttonTabLabel"),
+    ).toBeInTheDocument();
+  });
+
+  test("Visual tab is shown", async () => {
+    const visualTab = queryByText("output.visualOutput");
+    expect(visualTab).toBeInTheDocument();
+  });
+});
+
+describe("When in tabbed view, py5 imported and code run", () => {
+  let store;
+  let queryByText;
+
+  beforeEach(() => {
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          components: [
+            {
+              content: "import py5",
+            },
+          ],
+          image_list: [],
+        },
+        codeRunTriggered: true,
+        isSplitView: false,
+      },
+      auth: {
+        user,
+      },
+    };
+    store = mockStore(initialState);
+    ({ queryByText } = render(
+      <Provider store={store}>
+        <SkulptRunner active={true} />
+      </Provider>,
+    ));
+  });
+
+  test("Output view toggle not shown", () => {
+    expect(
+      screen.queryByText("outputViewToggle.buttonSplitLabel"),
+    ).toBeInTheDocument();
+  });
+
+  test("Visual tab is not hidden", () => {
+    const visualTab = queryByText("output.visualOutput");
+    expect(visualTab).toBeInTheDocument();
+  });
+
+  test("Draw is triggered", () => {
+    expect(store.getActions()).toEqual(expect.arrayContaining([triggerDraw()]));
+  });
+});
+
+describe("When in tabbed view, py5_imported imported and code run", () => {
+  let store;
+  let queryByText;
+  beforeEach(() => {
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          components: [
+            {
+              content: "import py5_imported",
+            },
+          ],
+          image_list: [],
+        },
+        codeRunTriggered: true,
+        isSplitView: false,
+      },
+      auth: {
+        user,
+      },
+    };
+    store = mockStore(initialState);
+    ({ queryByText } = render(
+      <Provider store={store}>
+        <SkulptRunner active={true} />
+      </Provider>,
+    ));
+  });
+
+  test("Output view toggle not shown", () => {
+    expect(
+      screen.queryByText("outputViewToggle.buttonSplitLabel"),
+    ).toBeInTheDocument();
+  });
+
+  test("Visual tab is not hidden", async () => {
+    const visualTab = queryByText("output.visualOutput");
+    expect(visualTab).toBeInTheDocument();
+  });
+});
+
+describe("When in tabbed view, pygal imported and code run", () => {
+  let store;
+  let queryByText;
+  beforeEach(() => {
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          components: [
+            {
+              content: "import pygal",
+            },
+          ],
+          image_list: [],
+        },
+        codeRunTriggered: true,
+        isSplitView: false,
+      },
+      auth: {
+        user,
+      },
+    };
+    store = mockStore(initialState);
+    ({ queryByText } = render(
+      <Provider store={store}>
+        <SkulptRunner active={true} />
+      </Provider>,
+    ));
+  });
+
+  test("Output view toggle not shown", () => {
+    expect(
+      screen.queryByText("outputViewToggle.buttonSplitLabel"),
+    ).toBeInTheDocument();
+  });
+
+  test("Visual tab is not hidden", () => {
+    const visualTab = queryByText("output.visualOutput");
+    expect(visualTab).toBeInTheDocument();
+  });
+});
+
+describe("When in tabbed view, turtle imported and code run", () => {
+  let store;
+  let queryByText;
+  beforeEach(() => {
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          components: [
+            {
+              content: "import turtle",
+            },
+          ],
+          image_list: [],
+        },
+        codeRunTriggered: true,
+        isSplitView: false,
+      },
+      auth: {
+        user,
+      },
+    };
+    store = mockStore(initialState);
+    ({ queryByText } = render(
+      <Provider store={store}>
+        <SkulptRunner active={true} />
+      </Provider>,
+    ));
+  });
+
+  test("Output view toggle not shown", () => {
+    expect(
+      screen.queryByText("outputViewToggle.buttonSplitLabel"),
+    ).toBeInTheDocument();
+  });
+
+  test("Visual tab is not hidden", () => {
+    const visualTab = queryByText("output.visualOutput");
+    expect(visualTab).toBeInTheDocument();
+  });
+});
+
+describe("When in tabbed view, sense_hat imported and code run", () => {
+  let store;
+  let queryByText;
+  beforeEach(() => {
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          components: [
+            {
+              content: "import _internal_sense_hat",
+            },
+          ],
+          image_list: [],
+        },
+        codeRunTriggered: true,
+        isSplitView: false,
+      },
+      auth: {
+        user,
+      },
+    };
+    store = mockStore(initialState);
+    ({ queryByText } = render(
+      <Provider store={store}>
+        <SkulptRunner active={true} />
+      </Provider>,
+    ));
+  });
+
+  test("Output view toggle not shown", () => {
+    expect(
+      screen.queryByText("outputViewToggle.buttonSplitLabel"),
+    ).toBeInTheDocument();
+  });
+
+  test("Visual tab is not hidden", async () => {
+    const visualTab = queryByText("output.visualOutput");
+    expect(visualTab).toBeInTheDocument();
+  });
+});
+
+test("When embedded in split view with visual output does not render output view toggle", () => {
+  const middlewares = [];
+  const mockStore = configureStore(middlewares);
+  const initialState = {
+    editor: {
+      project: {
+        components: [
+          {
+            content: "import p5",
+          },
+        ],
+        image_list: [],
+      },
+      codeRunTriggered: true,
+      isSplitView: true,
+      isEmbedded: true,
+    },
+    auth: {
+      user,
+    },
+  };
+  const store = mockStore(initialState);
+  render(
+    <Provider store={store}>
+      <SkulptRunner active={true} />
+    </Provider>,
+  );
+  expect(screen.queryByRole("button")).not.toBeInTheDocument();
+});
+
+test("When embedded in split view with no visual output does not render output view toggle", () => {
+  const middlewares = [];
+  const mockStore = configureStore(middlewares);
+  const initialState = {
+    editor: {
+      project: {},
+      senseHatAlwaysEnabled: false,
+      isSplitView: true,
+      isEmbedded: true,
+    },
+    auth: {
+      user,
+    },
+  };
+  const store = mockStore(initialState);
+  render(
+    <Provider store={store}>
+      <SkulptRunner active={true} />
+    </Provider>,
+  );
+  expect(screen.queryByRole("button")).not.toBeInTheDocument();
+});
+
+test("When embedded in tabbed view does not render output view toggle", () => {
+  const middlewares = [];
+  const mockStore = configureStore(middlewares);
+  const initialState = {
+    editor: {
+      project: {},
+      isSplitView: false,
+      isEmbedded: true,
+    },
+    auth: {
+      user,
+    },
+  };
+  const store = mockStore(initialState);
+  render(
+    <Provider store={store}>
+      <SkulptRunner active={true} />
+    </Provider>,
+  );
+  expect(screen.queryByRole("button")).not.toBeInTheDocument();
+});
+
+test("Tabbed view has text and visual tabs with same parent element", () => {
+  const middlewares = [];
+  const mockStore = configureStore(middlewares);
+  const initialState = {
+    editor: {
+      project: {},
+      senseHatAlwaysEnabled: true,
+      isSplitView: false,
+    },
+    auth: {
+      user,
+    },
+  };
+  const store = mockStore(initialState);
+  render(
+    <Provider store={store}>
+      <SkulptRunner active={true} />
+    </Provider>,
+  );
+  expect(
+    screen.getByText("output.visualOutput").parentElement.parentElement,
+  ).toEqual(screen.getByText("output.textOutput").parentElement.parentElement);
+});
+
+test("Split view has text and visual tabs with different parent elements", () => {
+  const middlewares = [];
+  const mockStore = configureStore(middlewares);
+  const initialState = {
+    editor: {
+      project: {},
+      senseHatAlwaysEnabled: true,
+      isSplitView: true,
+    },
+    auth: {
+      user,
+    },
+  };
+  const store = mockStore(initialState);
+  render(
+    <Provider store={store}>
+      <SkulptRunner active={true} />
+    </Provider>,
+  );
+  expect(screen.getByText("output.visualOutput").parentElement).not.toEqual(
+    screen.getByText("output.textOutput").parentElement,
+  );
+});
+
+describe("When font size is set", () => {
+  let runnerContainer;
+
+  beforeEach(() => {
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {},
+      },
+      auth: {
+        user,
+      },
+    };
+    const store = mockStore(initialState);
+    runnerContainer = render(
+      <Provider store={store}>
+        <SettingsContext.Provider
+          value={{ theme: "dark", fontSize: "myFontSize" }}
+        >
+          <SkulptRunner active={true} />
+        </SettingsContext.Provider>
+      </Provider>,
+    );
+  });
+
+  test("Font size class is set correctly", () => {
+    const runnerConsole = runnerContainer.container.querySelector(
+      ".pythonrunner-console",
+    );
+    expect(runnerConsole).toHaveClass("pythonrunner-console--myFontSize");
+  });
+});
+
+describe("When on desktop", () => {
+  beforeEach(() => {
+    setMedia({
+      width: "1000px",
+    });
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          components: [
+            {
+              content: "print('Hello')",
+            },
+          ],
+          image_list: [],
+        },
+      },
+      auth: {
+        user,
+      },
+    };
+    const store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+        <SkulptRunner active={true} />
+      </Provider>,
+    );
+  });
+
+  test("There is no run button", () => {
+    expect(screen.queryByText("runButton.run")).not.toBeInTheDocument();
+  });
+});
+
+describe("When on mobile and not embedded", () => {
+  beforeEach(() => {
+    setMedia({
+      width: MOBILE_BREAKPOINT,
+    });
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          components: [
+            {
+              content: "print('Hello')",
+            },
+          ],
+          image_list: [],
+        },
+        isEmbedded: false,
+      },
+      auth: {
+        user,
+      },
+    };
+    const store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+        <SkulptRunner active={true} />
+      </Provider>,
+    );
+  });
+
+  test("Has a run button in the tab bar", () => {
+    const runButton =
+      screen.getByText("runButton.run").parentElement.parentElement;
+    const runButtonContainer = runButton.parentElement.parentElement;
+    expect(runButtonContainer).toHaveClass("react-tabs__tab-container");
+  });
+});
+
+describe("When active and first loaded", () => {
+  beforeEach(() => {
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          components: [
+            {
+              content: "print('Hello')",
+            },
+          ],
+          image_list: [],
+        },
+        isEmbedded: false,
+      },
+      auth: {
+        user,
+      },
+    };
+    const store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+        <SkulptRunner active={true} />,
+      </Provider>,
+    );
+  });
+
+  test("it renders successfully", () => {
+    expect(screen.queryByText("output.textOutput")).toBeInTheDocument();
+  });
+
+  test("it has style display: flex", () => {
+    expect(document.querySelector(".skulptrunner")).toHaveStyle(
+      "display: flex",
+    );
+  });
+});
+
+describe("When not active", () => {
+  beforeEach(() => {
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          components: [
+            {
+              content: "print('Hello')",
+            },
+          ],
+          image_list: [],
+        },
+        isEmbedded: false,
+      },
+      auth: {
+        user,
+      },
+    };
+    const store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+        <SkulptRunner active={false} />,
+      </Provider>,
+    );
+  });
+
+  test("it has style display: none", () => {
+    expect(document.querySelector(".skulptrunner")).toHaveStyle(
+      "display: none",
+    );
+  });
+});
+
+describe("When not active and a code run has been triggered", () => {
+  beforeEach(() => {
+    Sk.misceval.asyncToPromise = jest.fn();
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          components: [
+            {
+              content: "print('Hello')",
+            },
+          ],
+          image_list: [],
+        },
+        isEmbedded: false,
+        codeRunTriggered: true,
+      },
+      auth: {
+        user,
+      },
+    };
+    const store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+        <SkulptRunner active={false} />,
+      </Provider>,
+    );
+  });
+
+  test("it does not run the code", () => {
+    expect(Sk.misceval.asyncToPromise).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/components/Editor/Runners/RunnerFactory.jsx b/src/components/Editor/Runners/RunnerFactory.jsx
index beed3b28b..3090868ff 100644
--- a/src/components/Editor/Runners/RunnerFactory.jsx
+++ b/src/components/Editor/Runners/RunnerFactory.jsx
@@ -1,16 +1,14 @@
 import React from "react";
-import PyodideRunner from "./PyodideRunner/PyodideRunner";
-import PythonRunner from "./PythonRunner/PythonRunner";
+import PyodideRunner from "./PythonRunner/PyodideRunner/PyodideRunner";
+// import PythonRunner from "./PythonRunner/SkulptRunner/SkulptRunner";
 import HtmlRunner from "./HtmlRunner/HtmlRunner";
 
-const RunnerFactory = ({ projectType, usePyodide }) => {
+const RunnerFactory = ({ projectType }) => {
   const Runner = () => {
     if (projectType === "html") {
       return HtmlRunner;
-    } else if (usePyodide) {
-      return PyodideRunner;
     } else {
-      return PythonRunner;
+      return PyodideRunner;
     }
   };
 
diff --git a/src/components/EmbeddedViewer/__snapshots__/EmbeddedViewer.test.js.snap b/src/components/EmbeddedViewer/__snapshots__/EmbeddedViewer.test.js.snap
index 143f17570..06602addc 100644
--- a/src/components/EmbeddedViewer/__snapshots__/EmbeddedViewer.test.js.snap
+++ b/src/components/EmbeddedViewer/__snapshots__/EmbeddedViewer.test.js.snap
@@ -13,7 +13,8 @@ exports[`Renders without crashing 1`] = `
       class="proj-runner-container"
     >
       <div
-        class="pythonrunner-container"
+        class="pythonrunner-container pyodiderunner pyodiderunner--active"
+        style="display: flex;"
       >
         <div
           class="react-tabs"
@@ -56,6 +57,107 @@ exports[`Renders without crashing 1`] = `
           </div>
         </div>
       </div>
+      <div
+        class="pythonrunner-container skulptrunner"
+        style="display: none;"
+      >
+        <div
+          class="react-tabs"
+          data-rttabs="true"
+        >
+          <div
+            class="react-tabs__tab-container"
+          >
+            <ul
+              class="react-tabs__tab-list"
+              role="tablist"
+            >
+              <li
+                aria-controls="react-tabs-3"
+                aria-disabled="false"
+                aria-selected="true"
+                class="react-tabs__tab react-tabs__tab--selected"
+                data-rttab="true"
+                id="react-tabs-2"
+                role="tab"
+                tabindex="0"
+              >
+                <span
+                  class="react-tabs__tab-text"
+                >
+                  output.visualOutput
+                </span>
+              </li>
+              <li
+                aria-controls="react-tabs-5"
+                aria-disabled="false"
+                aria-selected="false"
+                class="react-tabs__tab"
+                data-rttab="true"
+                id="react-tabs-4"
+                role="tab"
+              >
+                <span
+                  class="react-tabs__tab-text"
+                >
+                  output.textOutput
+                </span>
+              </li>
+            </ul>
+            <div
+              class="output-view-toggle"
+            >
+              <button
+                aria-label="outputViewToggle.buttonSplitLabel"
+                class="btn btn--tertiary output-view-toggle__button"
+                title="outputViewToggle.buttonSplitTitle"
+              >
+                <span>
+                  outputViewToggle.buttonSplitLabel
+                </span>
+                <svg
+                  data-file-name="SvgSplit_view"
+                />
+              </button>
+            </div>
+          </div>
+          <div
+            aria-labelledby="react-tabs-2"
+            class="react-tabs__tab-panel react-tabs__tab-panel--selected"
+            id="react-tabs-3"
+            role="tabpanel"
+          >
+            <div
+              class="visual-output"
+            >
+              <div
+                id="p5Sketch"
+              />
+              <div
+                id="pygalOutput"
+              />
+              <div
+                class="pythonrunner-canvas-container"
+              >
+                <div
+                  class="pythonrunner-graphic"
+                  id="outputCanvas"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            aria-labelledby="react-tabs-4"
+            class="react-tabs__tab-panel"
+            id="react-tabs-5"
+            role="tabpanel"
+          >
+            <pre
+              class="pythonrunner-console pythonrunner-console--small"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </DocumentFragment>
diff --git a/src/components/Mobile/MobileProject/MobileProject.test.js b/src/components/Mobile/MobileProject/MobileProject.test.js
index d3b773846..ddea521bf 100644
--- a/src/components/Mobile/MobileProject/MobileProject.test.js
+++ b/src/components/Mobile/MobileProject/MobileProject.test.js
@@ -30,6 +30,7 @@ describe("When code is not running", () => {
               content: "print('hello')",
             },
           ],
+          image_list: [],
           user_id: user.profile.user,
         },
         codeRunTriggered: false,
@@ -67,6 +68,7 @@ describe("When code is running", () => {
               content: "print('hello')",
             },
           ],
+          image_list: [],
           user_id: user.profile.user,
         },
         codeRunTriggered: true,
@@ -98,7 +100,14 @@ describe("When withSidebar is true", () => {
     const initialState = {
       editor: {
         project: {
-          components: [],
+          components: [
+            {
+              name: "main",
+              extension: "py",
+              content: "print('hello')",
+            },
+          ],
+          image_list: [],
         },
         openFiles: [],
         focussedFileIndices: [],
@@ -129,7 +138,14 @@ describe("When sidebar is open", () => {
     const initialState = {
       editor: {
         project: {
-          components: [],
+          components: [
+            {
+              name: "main",
+              extension: "py",
+              content: "print('hello')",
+            },
+          ],
+          image_list: [],
         },
         openFiles: [],
         focussedFileIndices: [],
@@ -156,7 +172,14 @@ describe("When withSidebar is false", () => {
     const initialState = {
       editor: {
         project: {
-          components: [],
+          components: [
+            {
+              name: "main",
+              extension: "py",
+              content: "print('hello')",
+            },
+          ],
+          image_list: [],
         },
         openFiles: [],
         focussedFileIndices: [],
diff --git a/src/components/WebComponentProject/WebComponentProject.test.js b/src/components/WebComponentProject/WebComponentProject.test.js
index 1be21e4b2..ccb5eb053 100644
--- a/src/components/WebComponentProject/WebComponentProject.test.js
+++ b/src/components/WebComponentProject/WebComponentProject.test.js
@@ -30,6 +30,7 @@ describe("When state set", () => {
           components: [
             { name: "main", extension: "py", content: "print('hello')" },
           ],
+          image_list: [],
         },
         openFiles: [],
         focussedFileIndices: [],
@@ -85,6 +86,7 @@ describe("When code run finishes", () => {
           components: [
             { name: "main", extension: "py", content: "print('hello')" },
           ],
+          image_list: [],
         },
         openFiles: [],
         focussedFileIndices: [],
@@ -115,7 +117,10 @@ describe("When withSidebar is true", () => {
     const initialState = {
       editor: {
         project: {
-          components: [],
+          components: [
+            { name: "main", extension: "py", content: "print('hello')" },
+          ],
+          image_list: [],
         },
         openFiles: [],
         focussedFileIndices: [],
@@ -148,7 +153,10 @@ describe("When withProjectbar is true", () => {
     const initialState = {
       editor: {
         project: {
-          components: [],
+          components: [
+            { name: "main", extension: "py", content: "print('hello')" },
+          ],
+          image_list: [],
         },
         openFiles: [],
         focussedFileIndices: [],
diff --git a/src/utils/PyodideServiceWorker.js b/src/utils/PyodideServiceWorker.js
new file mode 100644
index 000000000..0a74a9a03
--- /dev/null
+++ b/src/utils/PyodideServiceWorker.js
@@ -0,0 +1,38 @@
+self.addEventListener("install", () => {
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener("fetch", (event) => {
+  if (
+    event.request.cache === "only-if-cached" &&
+    event.request.mode !== "same-origin"
+  ) {
+    return;
+  }
+
+  console.log(event.request);
+
+  if (!event.request.url.includes("pyodide")) {
+    event.respondWith(
+      fetch(event.request)
+        .then((response) => {
+          console.log(`Intercepted: ${event.request.url}`);
+
+          const body = response.body;
+          const status = response.status;
+          const headers = new Headers(response.headers);
+          const statusText = response.statusText;
+
+          headers.set("Cross-Origin-Embedder-Policy", "require-corp");
+          headers.set("Cross-Origin-Opener-Policy", "same-origin");
+
+          return new Response(body, { status, statusText, headers });
+        })
+        .catch(console.error),
+    );
+  }
+});
diff --git a/src/utils/setupTests.js b/src/utils/setupTests.js
index 47c421347..d5c955c03 100644
--- a/src/utils/setupTests.js
+++ b/src/utils/setupTests.js
@@ -3,7 +3,7 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import "@testing-library/jest-dom";
-import PyodideWorker from "../components/Editor/Runners/PyodideRunner/PyodideWorker.mock.js";
+import PyodideWorker from "../components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.mock.js";
 
 /* global globalThis */
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
diff --git a/webpack.component.config.js b/webpack.component.config.js
index ae3de16e0..914664c4d 100644
--- a/webpack.component.config.js
+++ b/webpack.component.config.js
@@ -1,6 +1,7 @@
 const path = require("path");
 const Dotenv = require("dotenv-webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
+const WorkerPlugin = require("worker-plugin");
 
 module.exports = {
   entry: path.resolve(__dirname, "./src/web-component.js"),
@@ -82,6 +83,7 @@ module.exports = {
     },
   },
   plugins: [
+    new WorkerPlugin(),
     new Dotenv({
       path: "./.env.webcomponent",
       systemvars: true,