diff --git a/kolibri/plugins/perseus_viewer/assets/src/views/PerseusRendererIndex.vue b/kolibri/plugins/perseus_viewer/assets/src/views/PerseusRendererIndex.vue
index 58760f0a4c3..1d9e954ed1e 100644
--- a/kolibri/plugins/perseus_viewer/assets/src/views/PerseusRendererIndex.vue
+++ b/kolibri/plugins/perseus_viewer/assets/src/views/PerseusRendererIndex.vue
@@ -87,8 +87,8 @@
 <script>
 
   import invert from 'lodash/invert';
-  import JSZip from 'jszip';
-  import client from 'kolibri.client';
+  import ZipFile from 'kolibri-zip';
+  import { Mapper, defaultFilePathMappers } from 'kolibri-zip/src/fileUtils';
   import urls from 'kolibri.urls';
   import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { isTouchDevice } from 'kolibri.utils.browserInfo';
@@ -124,6 +124,67 @@
 
   const blobImageRegex = /blob:[^)^"]+/g;
 
+  Khan.imageUrls = {};
+
+  function getImagePaths(itemResponse) {
+    const graphieMatches = {};
+    const imageMatches = {};
+    const matches = Array.from(itemResponse.matchAll(allImageRegex));
+
+    for (let i = 0; i < matches.length; i++) {
+      const match = matches[i];
+      if (match[1]) {
+        // We have a match for the optional web+graphie matching group
+        graphieMatches[match[3]] = true;
+      } else {
+        imageMatches[match[3]] = true;
+      }
+    }
+    const graphieImages = Object.keys(graphieMatches);
+    const images = Object.keys(imageMatches);
+    const svgAndJson = graphieImages.reduce(
+      (acc, image) => [...acc, `${image}.svg`, `${image}-data.json`],
+      []
+    );
+    return images.concat(svgAndJson);
+  }
+
+  function replaceImageUrls(itemResponse, packageFiles) {
+    Object.assign(Khan.imageUrls, packageFiles);
+    // If the file is not present in the zip file, then fill in a missing image
+    // file for images, and an empty dummy json file for json
+    return itemResponse.replace(allImageRegex, (match, g1, g2, image) => {
+      if (g1) {
+        // Replace any placeholder values for image URLs with the
+        // `web+graphie:` prefix separately from any others,
+        // as they are parsed slightly differently to standard image
+        // urls (Perseus adds the protocol in place of `web+graphie:`).
+        if (!Khan.imageUrls[image]) {
+          Khan.imageUrls[image] = 'data:application/json,';
+        }
+        return `web+graphie:${image}`;
+      } else {
+        // Replace any placeholder values for image URLs with
+        // the base URL for the perseus file we are reading from
+        return packageFiles[image] || imageMissing;
+      }
+    });
+  }
+
+  class JSONMapper extends Mapper {
+    getPaths() {
+      return getImagePaths(this.file.toString());
+    }
+    replacePaths(packageFiles) {
+      return replaceImageUrls(this.file.toString(), packageFiles);
+    }
+  }
+
+  const filePathMappers = {
+    ...defaultFilePathMappers,
+    json: JSONMapper,
+  };
+
   export default {
     name: 'PerseusRendererIndex',
     setup() {
@@ -209,15 +270,14 @@
     },
 
     beforeDestroy() {
-      this.clearItemRenderer();
       this.$emit('stopTracking');
+      this.clearItemRenderer();
+      if (this.perseusFile) {
+        this.perseusFile.close();
+      }
     },
     created() {
       this.perseusFile = null;
-      this.imageUrls = {};
-      // Make a global reference for this object
-      // for access inside perseus.
-      Khan.imageUrls = this.imageUrls;
       const initPromise = mathJaxPromise.then(() =>
         perseus.init({ skipMathJax: true, loadExtraWidgets: true })
       );
@@ -313,12 +373,7 @@
         } catch (e) {
           logging.debug('Error during unmounting of item renderer', e);
         }
-        for (const key in this.imageUrls) {
-          if (this.imageUrls[key].indexOf('blob:') === 0) {
-            URL.revokeObjectURL(this.imageUrls[key]);
-          }
-          delete this.imageUrls[key];
-        }
+        Khan.imageUrls = {};
       },
       /*
        * Special method to extract the current state of a Perseus Sorter widget
@@ -355,7 +410,7 @@
         return this.restoreImageUrls({ hints, question });
       },
       restoreSerializedState(answerState) {
-        answerState = this.replaceImageUrls(JSON.stringify(answerState));
+        answerState = JSON.parse(replaceImageUrls(JSON.stringify(answerState)));
         this.itemRenderer.restoreSerializedState(answerState);
         this.itemRenderer.getWidgetIds().forEach(id => {
           if (sorterWidgetRegex.test(id)) {
@@ -432,109 +487,21 @@
         // dismiss the error message when user click anywhere inside the perseus element.
         this.message = null;
       },
-      loadPerseusFile() {
-        if (this.defaultFile && this.defaultFile.storage_url) {
-          this.loading = true;
-          if (!this.perseusFile || this.perseusFileUrl !== this.defaultFile.storage_url) {
-            return client({
-              method: 'get',
-              url: this.defaultFile.storage_url,
-              responseType: 'arraybuffer',
-            })
-              .then(response => {
-                return JSZip.loadAsync(response.data);
-              })
-              .then(perseusFile => {
-                this.perseusFile = perseusFile;
-                this.perseusFileUrl = this.defaultFile.storage_url;
-              })
-              .catch(err => {
-                logging.error('Error loading Perseus file', err);
-                this.reportLoadingError(err);
-                return Promise.reject(err);
-              });
-          } else {
-            return Promise.resolve();
-          }
-        }
-      },
       loadItemData() {
         // Only try to do this if itemId is defined.
         if (this.itemId && this.defaultFile && this.defaultFile.storage_url) {
           this.loading = true;
-          this.loadPerseusFile()
-            .then(() => {
-              const itemDataFile = this.perseusFile.file(`${this.itemId}.json`);
-              if (itemDataFile) {
-                return itemDataFile.async('string');
-              }
-              return Promise.reject(`item data for ${this.itemId} not found`);
-            })
-            .then(itemResponse => {
-              const graphieMatches = {};
-              const imageMatches = {};
-              const matches = Array.from(itemResponse.matchAll(allImageRegex));
-
-              for (let i = 0; i < matches.length; i++) {
-                const match = matches[i];
-                if (match[1]) {
-                  // We have a match for the optional web+graphie matching group
-                  graphieMatches[match[3]] = true;
-                } else {
-                  imageMatches[match[3]] = true;
-                }
-              }
-
-              const graphieImages = Object.keys(graphieMatches);
-              const images = Object.keys(imageMatches);
-
-              const processFile = file => {
-                if (!this.imageUrls[file]) {
-                  const fileData = this.perseusFile.file(file);
-                  const ext = file.split('.').slice(-1)[0];
-                  if (fileData) {
-                    return fileData.async('arraybuffer').then(buffer => {
-                      let type;
-                      if (ext === 'json') {
-                        type = 'application/json';
-                      } else if (ext === 'svg') {
-                        type = 'image/svg+xml';
-                      } else {
-                        type = `image/${ext}`;
-                      }
-                      const blob = new Blob([buffer], { type });
-                      this.imageUrls[file] = URL.createObjectURL(blob);
-                    });
-                  } else {
-                    // If the file is not present in the zip file, then fill in a missing image
-                    // file for images, and an empty dummy json file for json
-                    let url;
-                    if (ext === 'json') {
-                      url = 'data:application/json,';
-                    } else {
-                      url = imageMissing;
-                    }
-                    this.imageUrls[file] = url;
-                  }
-                }
-                return Promise.resolve();
-              };
-
-              const promises = images.map(processFile).concat(
-                graphieImages.map(image => {
-                  const svgFile = `${image}.svg`;
-                  const jsonFile = `${image}-data.json`;
-                  return Promise.all([processFile(svgFile), processFile(jsonFile)]);
-                })
-              );
-
-              return Promise.all(promises)
-                .catch(() => {
-                  return Promise.reject('error loading assessment item images');
-                })
-                .then(() => {
-                  this.setItemData(this.replaceImageUrls(itemResponse));
-                });
+          if (!this.perseusFile || this.perseusFileUrl !== this.defaultFile.storage_url) {
+            this.perseusFile = new ZipFile(this.defaultFile.storage_url, {
+              filePathMappers,
+            });
+            this.perseusFileUrl = this.defaultFile.storage_url;
+          }
+          this.perseusFile
+            .file(`${this.itemId}.json`)
+            .then(itemFile => {
+              const itemResponse = itemFile.toString();
+              this.setItemData(JSON.parse(itemResponse));
             })
             .catch(reason => {
               logging.debug('There was an error loading the assessment item data: ', reason);
@@ -543,25 +510,8 @@
             });
         }
       },
-      replaceImageUrls(itemResponse) {
-        return JSON.parse(
-          itemResponse.replace(allImageRegex, (match, g1, g2, image) => {
-            if (g1) {
-              // Replace any placeholder values for image URLs with the
-              // `web+graphie:` prefix separately from any others,
-              // as they are parsed slightly differently to standard image
-              // urls (Perseus adds the protocol in place of `web+graphie:`).
-              return `web+graphie:${image}`;
-            } else {
-              // Replace any placeholder values for image URLs with
-              // the base URL for the perseus file we are reading from
-              return this.imageUrls[image] || imageMissing;
-            }
-          })
-        );
-      },
       restoreImageUrls(itemResponse) {
-        const lookup = invert(this.imageUrls);
+        const lookup = invert(Khan.imageUrls);
         return JSON.parse(
           JSON.stringify(itemResponse).replace(blobImageRegex, match => {
             // Make sure to add our prefix back in
diff --git a/kolibri/plugins/perseus_viewer/package.json b/kolibri/plugins/perseus_viewer/package.json
index aa86ad4b797..cd7f1f7af94 100644
--- a/kolibri/plugins/perseus_viewer/package.json
+++ b/kolibri/plugins/perseus_viewer/package.json
@@ -14,7 +14,6 @@
     "fractional": "^1.0.0",
     "immutable": "^3.8.1",
     "jquery": "2.2.4",
-    "jszip": "^3.10.1",
     "kmath": "^0.0.1",
     "qtip2": "2.2.0",
     "raphael": "^2.2.7",
diff --git a/packages/hashi/package.json b/packages/hashi/package.json
index e8087be3124..93383a55d63 100644
--- a/packages/hashi/package.json
+++ b/packages/hashi/package.json
@@ -8,7 +8,6 @@
     "build": "yarn run build-base --mode=production",
     "dev": "yarn run build-base --mode=development --watch",
     "compat": "eslint -c ./compat.js ./src/*.js",
-    "mimetypes": "node ./generateH5PMimeTypeDB.js",
     "build-h5p": "node ./downloadH5PVendor.js && webpack --config ./webpack.config.h5p.js --mode=production"
   },
   "author": "Learning Equality",
@@ -17,14 +16,12 @@
     "eslint-plugin-compat": "^4.2.0",
     "html-webpack-plugin": "5.5.3",
     "jquery": "3.5.1",
-    "mime-db": "^1.52.0",
     "mutationobserver-shim": "^0.3.7",
     "purgecss": "^5.0.0"
   },
   "dependencies": {
     "core-js": "3.33",
     "dayjs": "^1.11.10",
-    "fflate": "^0.8.1",
     "iri": "^1.3.1",
     "is-language-code": "^3.1.0",
     "iso8601-duration": "^2.1.1",
diff --git a/packages/hashi/src/H5P/H5PRunner.js b/packages/hashi/src/H5P/H5PRunner.js
index 43d554ac27d..0f905429f57 100644
--- a/packages/hashi/src/H5P/H5PRunner.js
+++ b/packages/hashi/src/H5P/H5PRunner.js
@@ -5,38 +5,12 @@ import set from 'lodash/set';
 import debounce from 'lodash/debounce';
 import unset from 'lodash/unset';
 import Toposort from 'toposort-class';
-import { unzip, strFromU8 } from 'fflate';
+import ZipFile from 'kolibri-zip';
 import filenameObj from '../../h5p_build.json';
-import mimetypes from '../mimetypes.json';
 import { XAPIVerbMap } from '../xAPI/xAPIVocabulary';
-import loadBinary from './loadBinary';
 
 const H5PFilename = filenameObj.filename;
 
-class Zip {
-  constructor(file) {
-    this.zipfile = file;
-  }
-
-  _getFiles(filter) {
-    return new Promise((resolve, reject) => {
-      unzip(this.zipfile, { filter }, (err, unzipped) => {
-        if (err) {
-          reject(err);
-        }
-        resolve(Object.entries(unzipped).map(([name, obj]) => ({ name, obj })));
-      });
-    });
-  }
-
-  file(filename) {
-    return this._getFiles(file => file.name === filename).then(files => files[0]);
-  }
-  files(path) {
-    return this._getFiles(file => file.name.startsWith(path));
-  }
-}
-
 const CONTENT_ID = '1234567890';
 
 // Verbs that we simply will not report on.
@@ -69,48 +43,6 @@ function contentIdentifier(contentId) {
   return `cid-${contentId}`;
 }
 
-/*
- * Create a blob and URL for a uint8array
- * set the mimetype and return the URL
- */
-function createBlobUrl(uint8array, fileName) {
-  let type = '';
-  const fileNameExt = fileName.split('.').slice(-1)[0];
-  if (fileNameExt) {
-    const ext = fileNameExt.toLowerCase();
-    type = mimetypes[ext];
-  }
-  const blob = new Blob([uint8array.buffer], { type });
-  return URL.createObjectURL(blob);
-}
-
-// Looks for any URLs referenced inside url()
-const cssPathRegex = /(url\(['"]?)([^"')]+)?(['"]?\))/g;
-
-export function replacePaths(dep, packageFiles) {
-  return packageFiles[dep].replace(cssPathRegex, function(match, p1, p2, p3) {
-    try {
-      // Construct a URL with a dummy base so that we can concatenate the
-      // dependency URL with the URL relative to the dependency
-      // and then read the pathname to get the new path.
-      // Take substring to remove the leading slash to match the reference file paths
-      // in packageFiles.
-      const path = new URL(p2, new URL(dep, 'http://b.b/')).pathname.substring(1);
-      // Look to see if there is a URL in our packageFiles mapping that
-      // that has this as the source path.
-      const newUrl = packageFiles[path];
-      if (newUrl) {
-        // If so, replace the instance with the new URL.
-        return `${p1}${newUrl}${p3}`;
-      }
-    } catch (e) {
-      console.debug('Error during URL handling', e); // eslint-disable-line no-console
-    }
-    // Otherwise just return the match so that it is unchanged.
-    return match;
-  });
-}
-
 const metadataKeys = [
   'title',
   'a11yTitle',
@@ -205,45 +137,41 @@ export default class H5PRunner {
     // and for logging xAPI statements about the content.
     this.contentNamespace = CONTENT_ID;
     const start = performance.now();
-    // First load the full H5P file as binary so we can read it using JSZip
-    loadBinary(this.filepath)
-      .then(file => {
-        // Store the zip locally for later reference
-        this.zip = new Zip(file);
-        // Recurse all the package dependencies
-        return this.recurseDependencies('h5p.json', true);
-      })
-      .then(() => {
-        // Once we have found all the dependencies, we call this
-        // to sort the dependencies by their dependencies to make an
-        // ordered list, with every package being loaded only once its
-        // dependencies have been loaded.
-        this.setDependencies();
-        return this.processFiles().then(() => {
-          console.debug(`H5P file processed in ${performance.now() - start} ms`);
-          this.metadata = pick(this.rootConfig, metadataKeys);
-          // Do any URL substitition on CSS dependencies
-          // and turn them into Blob URLs.
-          // Also order the dendencies according to our sorted
-          // dependency tree.
-          this.processCssDependencies();
-          this.processJsDependencies();
-          // If the iframe has already loaded, start H5P
-          // Sometimes this check can catch the iframe before it has started
-          // to load H5P, when it is still blank, but loaded.
-          // So we also check that H5P is defined on the contentWindow to be sure
-          // that the ready state applies to the loading of the H5P html file.
-          if (
-            this.iframe.contentDocument &&
-            this.iframe.contentDocument.readyState === 'complete' &&
-            this.iframe.contentWindow.H5P
-          ) {
-            return this.initH5P();
-          }
-          // Otherwise wait for the load event.
-          this.iframe.addEventListener('load', () => this.initH5P());
-        });
+    // First load the full H5P file
+    // Store the zip locally for later reference
+    this.zip = new ZipFile(this.filepath);
+    // Recurse all the package dependencies
+    return this.recurseDependencies('h5p.json', true).then(() => {
+      // Once we have found all the dependencies, we call this
+      // to sort the dependencies by their dependencies to make an
+      // ordered list, with every package being loaded only once its
+      // dependencies have been loaded.
+      this.setDependencies();
+      return this.processFiles().then(() => {
+        console.debug(`H5P file processed in ${performance.now() - start} ms`);
+        this.metadata = pick(this.rootConfig, metadataKeys);
+        // Do any URL substitition on CSS dependencies
+        // and turn them into Blob URLs.
+        // Also order the dendencies according to our sorted
+        // dependency tree.
+        this.processCssDependencies();
+        this.processJsDependencies();
+        // If the iframe has already loaded, start H5P
+        // Sometimes this check can catch the iframe before it has started
+        // to load H5P, when it is still blank, but loaded.
+        // So we also check that H5P is defined on the contentWindow to be sure
+        // that the ready state applies to the loading of the H5P html file.
+        if (
+          this.iframe.contentDocument &&
+          this.iframe.contentDocument.readyState === 'complete' &&
+          this.iframe.contentWindow.H5P
+        ) {
+          return this.initH5P();
+        }
+        // Otherwise wait for the load event.
+        this.iframe.addEventListener('load', () => this.initH5P());
       });
+    });
   }
 
   stateUpdated() {
@@ -547,7 +475,7 @@ export default class H5PRunner {
       if (!file) {
         return;
       }
-      const json = JSON.parse(strFromU8(file.obj));
+      const json = JSON.parse(file.toString());
       const preloadedDependencies = json['preloadedDependencies'] || [];
       // Make a copy so that we are not modifying the same object
       visitedPaths = {
@@ -625,9 +553,7 @@ export default class H5PRunner {
   processCssDependencies() {
     const concatenatedCSS = this.sortedDependencies.reduce((wholeCSS, dependency) => {
       return (this.cssDependencies[dependency] || []).reduce((allCss, cssDep) => {
-        const css = replacePaths(cssDep, this.packageFiles[dependency]);
-        // We have completed the path substition, so concatenate the CSS.
-        return `${allCss}${css}\n\n`;
+        return `${allCss}${this.packageFiles[dependency][cssDep]}\n\n`;
       }, wholeCSS);
     }, '');
     this.cssURL = URL.createObjectURL(new Blob([concatenatedCSS], { type: 'text/css' }));
@@ -643,10 +569,10 @@ export default class H5PRunner {
     if (fileName === 'content.json') {
       // Store this special file contents here as raw text
       // as that is how H5P expects it.
-      this.contentJson = strFromU8(file.obj);
+      this.contentJson = file.toString();
     } else {
       // Create blob urls for every item in the content folder
-      this.contentPaths[fileName] = createBlobUrl(file.obj, fileName);
+      this.contentPaths[fileName] = file.toUrl();
     }
   }
 
@@ -676,10 +602,10 @@ export default class H5PRunner {
       // If it's a CSS file load as a string from the zipfile for later
       // replacement of URLs.
       // For JS or CSS, we load as string to concatenate and later turn into a single file.
-      this.packageFiles[packagePath][fileName] = strFromU8(file.obj);
+      this.packageFiles[packagePath][fileName] = file.toString();
     } else {
       // Otherwise just create a blob URL for this file and store it in our packageFiles maps.
-      this.packageFiles[packagePath][fileName] = createBlobUrl(file.obj, fileName);
+      this.packageFiles[packagePath][fileName] = file.toUrl();
     }
   }
 
@@ -692,8 +618,6 @@ export default class H5PRunner {
         contentFiles.map(file => this.processContent(file));
       }),
       ...Object.keys(this.packageFiles).map(packagePath => {
-        // JSZip uses regex for path matching, so we first do regex escaping on the packagePath
-        // in order to get an exact match, and not accidentally do a regex match based on the path
         return this.zip.files(packagePath).then(packageFiles => {
           packageFiles.map(file => this.processPackageFile(file, packagePath));
         });
diff --git a/packages/hashi/test/H5P.spec.js b/packages/hashi/test/H5P.spec.js
deleted file mode 100644
index 07f9d9974a9..00000000000
--- a/packages/hashi/test/H5P.spec.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { replacePaths } from '../src/H5P/H5PRunner';
-
-describe('H5P Path replacement', () => {
-  describe('CSS path replacement', () => {
-    it('should replace a simple relative path', () => {
-      const packageFiles = {
-        'package/test.css': 'url("./test.woff")',
-        'package/test.woff': 'different',
-      };
-      expect(replacePaths('package/test.css', packageFiles)).toEqual('url("different")');
-    });
-    it('should replace a more complex relative path', () => {
-      const packageFiles = {
-        'package/css/test.css': 'url("../fonts/test.woff")',
-        'package/fonts/test.woff': 'different',
-      };
-      expect(replacePaths('package/css/test.css', packageFiles)).toEqual('url("different")');
-    });
-    it('should replace paths that use single quotes', () => {
-      const packageFiles = {
-        'package/css/test.css': "url('../fonts/test.woff')",
-        'package/fonts/test.woff': 'different',
-      };
-      expect(replacePaths('package/css/test.css', packageFiles)).toEqual("url('different')");
-    });
-    it('should replace paths that use no quotes', () => {
-      const packageFiles = {
-        'package/css/test.css': 'url(../fonts/test.woff)',
-        'package/fonts/test.woff': 'different',
-      };
-      expect(replacePaths('package/css/test.css', packageFiles)).toEqual('url(different)');
-    });
-    it('should not replace urls that are not a registered path', () => {
-      const packageFiles = {
-        'package/scripts/test.js': 'url(../../../../fonts/test.woff)',
-        'package/audio/test.mp3': 'different',
-      };
-      expect(replacePaths('package/scripts/test.js', packageFiles)).toEqual(
-        'url(../../../../fonts/test.woff)'
-      );
-    });
-    it('should not replace urls that are not a valid path', () => {
-      // This is mostly to make sure the function does not error.
-      const packageFiles = {
-        'package/scripts/test.js': 'url(flob a dob dib dob)',
-        'package/audio/test.mp3': 'different',
-      };
-      expect(replacePaths('package/scripts/test.js', packageFiles)).toEqual(
-        'url(flob a dob dib dob)'
-      );
-    });
-  });
-});
diff --git a/packages/hashi/generateH5PMimeTypeDB.js b/packages/kolibri-zip/generateMimeTypeDB.js
similarity index 92%
rename from packages/hashi/generateH5PMimeTypeDB.js
rename to packages/kolibri-zip/generateMimeTypeDB.js
index f0df1bf56dc..72aa55b537a 100644
--- a/packages/hashi/generateH5PMimeTypeDB.js
+++ b/packages/kolibri-zip/generateMimeTypeDB.js
@@ -45,6 +45,10 @@ const allowedFileExtensions = new Set([
   'md',
   'textile',
   'vtt',
+  // Additional file types for Kolibri
+  'html',
+  'htm',
+  'xhtml',
 ]);
 
 const output = {};
diff --git a/packages/kolibri-zip/package.json b/packages/kolibri-zip/package.json
new file mode 100644
index 00000000000..7645c4739d6
--- /dev/null
+++ b/packages/kolibri-zip/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "kolibri-zip",
+  "version": "0.1.0",
+  "description": "A library for reading and writing zip files",
+  "main": "src/index.js",
+  "scripts": {
+    "mimetypes": "node ./generateMimeTypeDB.js"
+  },
+  "author": "Learning Equality",
+  "license": "MIT",
+  "dependencies": {
+    "fflate": "^0.8.1"
+  },
+  "devDependencies": {
+    "mime-db": "^1.52.0"
+  }
+}
\ No newline at end of file
diff --git a/packages/kolibri-zip/src/fileUtils.js b/packages/kolibri-zip/src/fileUtils.js
new file mode 100644
index 00000000000..f1ff0a0d28d
--- /dev/null
+++ b/packages/kolibri-zip/src/fileUtils.js
@@ -0,0 +1,130 @@
+import flatten from 'lodash/flatten';
+
+export function getAbsoluteFilePath(baseFilePath, relativeFilePath) {
+  // Construct a URL with a dummy base so that we can concatenate the
+  // dependency URL with the URL relative to the dependency
+  // and then read the pathname to get the new path.
+  // Take substring to remove the leading slash to match the reference file paths
+  // in packageFiles.
+  try {
+    return new URL(relativeFilePath, new URL(baseFilePath, 'http://b.b/')).pathname.substring(1);
+  } catch (e) {
+    console.debug('Error during URL handling', e); // eslint-disable-line no-console
+  }
+  return null;
+}
+
+export class Mapper {
+  constructor(file) {
+    this.file = file;
+  }
+
+  getPaths() {
+    throw new Error('Not implemented');
+  }
+
+  replacePaths() {
+    throw new Error('Not implemented');
+  }
+}
+
+// Looks for any URLs referenced inside url()
+// Handle any query parameters separately.
+const cssPathRegex = /(url\(['"]?)([^?"')]+)?(\?[^'"]+)?(['"]?\))/g;
+
+export function getCSSPaths(fileContents) {
+  return Array.from(fileContents.matchAll(cssPathRegex), ([, , p2]) => p2);
+}
+
+export function replaceCSSPaths(fileContents, packageFiles) {
+  return fileContents.replace(cssPathRegex, function(match, p1, p2, p3, p4) {
+    try {
+      // Look to see if there is a URL in our packageFiles mapping that
+      // that has this as the source path.
+      const newUrl = packageFiles[p2];
+      if (newUrl) {
+        // If so, replace the instance with the new URL.
+        return `${p1}${newUrl}${p4}`;
+      }
+    } catch (e) {
+      console.debug('Error during URL handling', e); // eslint-disable-line no-console
+    }
+    // Otherwise just return the match so that it is unchanged.
+    return match;
+  });
+}
+
+class CSSMapper extends Mapper {
+  getPaths() {
+    return getCSSPaths(this.file.toString());
+  }
+
+  replacePaths(packageFiles) {
+    return replaceCSSPaths(this.file.toString(), packageFiles);
+  }
+}
+
+const domParser = new DOMParser();
+
+const domSerializer = new XMLSerializer();
+
+const attributes = ['src', 'href'];
+
+const attributesSelector = attributes.map(attr => `[${attr}]`).join(', ');
+
+const queryParamRegex = /([^?)]+)?(\?.*)/g;
+
+export function getDOMPaths(fileContents, mimeType) {
+  const dom = domParser.parseFromString(fileContents.trim(), mimeType);
+  const elements = dom.querySelectorAll(attributesSelector);
+  return flatten(
+    Array.from(elements).map(element =>
+      attributes
+        .map(a => element.getAttribute(a))
+        .filter(Boolean)
+        .map(url => url.replace(queryParamRegex, '$1'))
+    )
+  );
+}
+
+export function replaceDOMPaths(fileContents, packageFiles, mimeType) {
+  const dom = domParser.parseFromString(fileContents.trim(), mimeType);
+  const elements = Array.from(dom.querySelectorAll(attributesSelector));
+  for (const element of elements) {
+    for (const attr of attributes) {
+      const value = element.getAttribute(attr);
+      if (!value) {
+        continue;
+      }
+      const newUrl = packageFiles[value.replace(queryParamRegex, '$1')];
+      if (newUrl) {
+        element.setAttribute(attr, newUrl);
+      }
+    }
+  }
+  if (mimeType === 'text/html') {
+    // Remove the namespace attribute from the root element
+    // as serializeToString adds it by default and without this
+    // it gets repeated.
+    dom.documentElement.removeAttribute('xmlns');
+  }
+  return domSerializer.serializeToString(dom);
+}
+
+class DOMMapper extends Mapper {
+  getPaths() {
+    return getDOMPaths(this.file.toString(), this.file.mimeType);
+  }
+
+  replacePaths(packageFiles) {
+    return replaceDOMPaths(this.file.toString(), packageFiles, this.file.mimeType);
+  }
+}
+
+export const defaultFilePathMappers = {
+  css: CSSMapper,
+  html: DOMMapper,
+  htm: DOMMapper,
+  xhtml: DOMMapper,
+  xml: DOMMapper,
+};
diff --git a/packages/kolibri-zip/src/index.js b/packages/kolibri-zip/src/index.js
new file mode 100644
index 00000000000..35ae5abec1e
--- /dev/null
+++ b/packages/kolibri-zip/src/index.js
@@ -0,0 +1,143 @@
+import { unzip, strFromU8, strToU8 } from 'fflate';
+import isPlainObject from 'lodash/isPlainObject';
+import loadBinary from './loadBinary';
+import mimetypes from './mimetypes.json';
+import { getAbsoluteFilePath, defaultFilePathMappers } from './fileUtils';
+
+class ExtractedFile {
+  constructor(name, obj) {
+    this.name = name;
+    this.obj = obj;
+    this._url = null;
+  }
+
+  get fileNameExt() {
+    return (this.name.split('.').slice(-1)[0] || '').toLowerCase();
+  }
+
+  get mimeType() {
+    return mimetypes[this.fileNameExt] || '';
+  }
+
+  toString() {
+    return strFromU8(this.obj);
+  }
+
+  toUrl() {
+    if (!this._url) {
+      const blob = new Blob([this.obj.buffer], { type: this.mimeType });
+      this._url = URL.createObjectURL(blob);
+    }
+    return this._url;
+  }
+
+  close() {
+    if (this._url) {
+      URL.revokeObjectURL(this._url);
+    }
+  }
+}
+
+export default class ZipFile {
+  constructor(url, { filePathMappers } = { filePathMappers: defaultFilePathMappers }) {
+    this._loadingError = null;
+    this._extractedFileCache = {};
+    this._fileLoadingPromise = loadBinary(url)
+      .then(data => {
+        this.zipData = new Uint8Array(data);
+      })
+      .catch(err => {
+        this._loadingError = err;
+      });
+    this.filePathMappers = isPlainObject(filePathMappers) ? filePathMappers : {};
+  }
+
+  /*
+   * @param {ExtractedFile} file - The file to carry out replacement of references in
+   * @param {Object} visitedPaths - A map of paths that have already been visited to prevent a loop
+   * @return {Promise[ExtractedFile]} - A promise that resolves to the file with references replaced
+   */
+  _replaceFiles(file, visitedPaths) {
+    const mapperClass = this.filePathMappers[file.fileNameExt];
+    if (!mapperClass) {
+      return Promise.resolve(file);
+    }
+    visitedPaths = { ...visitedPaths };
+    visitedPaths[file.name] = true;
+    const mapper = new mapperClass(file);
+    // Filter out any paths that are in our already visited paths, as that means we are in a
+    // referential loop where one file has pointed us to another, which is now point us back
+    // to the source.
+    // Because we need to modify the file before we generate the URL, we can't resolve this loop.
+    const paths = mapper
+      .getPaths()
+      .filter(path => !visitedPaths[getAbsoluteFilePath(file.name, path)]);
+    const absolutePathsMap = paths.reduce((acc, path) => {
+      acc[getAbsoluteFilePath(file.name, path)] = path;
+      return acc;
+    }, {});
+    return this._getFiles(file => absolutePathsMap[file.name], visitedPaths).then(
+      replacementFiles => {
+        const replacementFileMap = replacementFiles.reduce((acc, replacementFile) => {
+          acc[absolutePathsMap[replacementFile.name]] = replacementFile.toUrl();
+          return acc;
+        }, {});
+        const newFileContents = mapper.replacePaths(replacementFileMap);
+        file.obj = strToU8(newFileContents);
+        return file;
+      }
+    );
+  }
+
+  _getFiles(filterPredicate, visitedPaths = {}) {
+    const filter = file => !this._extractedFileCache[file.name] && filterPredicate(file);
+    return this._fileLoadingPromise.then(() => {
+      return new Promise((resolve, reject) => {
+        unzip(this.zipData, { filter }, (err, unzipped) => {
+          if (err) {
+            reject(err);
+            return;
+          }
+          const alreadyUnzipped = Object.values(this._extractedFileCache).filter(filterPredicate);
+          if (!unzipped && !alreadyUnzipped.length) {
+            reject('No files found');
+            return;
+          }
+          Promise.all(
+            Object.entries(unzipped).map(([name, obj]) => {
+              const extractedFile = new ExtractedFile(name, obj);
+              return this._replaceFiles(extractedFile, visitedPaths).then(extractedFile => {
+                this._extractedFileCache[name] = extractedFile;
+                return extractedFile;
+              });
+            })
+          ).then(extractedFiles => {
+            resolve(extractedFiles.concat(alreadyUnzipped));
+          });
+        });
+      });
+    });
+  }
+
+  file(filename) {
+    if (this._loadingError) {
+      return Promise.reject(this._loadingError);
+    }
+    if (this._extractedFileCache[filename]) {
+      return Promise.resolve(this._extractedFileCache[filename]);
+    }
+    return this._getFiles(file => file.name === filename).then(files => files[0]);
+  }
+  files(path) {
+    if (this._loadingError) {
+      return Promise.reject(this._loadingError);
+    }
+    return this._getFiles(file => file.name.startsWith(path));
+  }
+  close() {
+    for (const file of Object.values(this._extractedFileCache)) {
+      file.close();
+    }
+    this.zipData = null;
+  }
+}
diff --git a/packages/hashi/src/H5P/loadBinary.js b/packages/kolibri-zip/src/loadBinary.js
similarity index 94%
rename from packages/hashi/src/H5P/loadBinary.js
rename to packages/kolibri-zip/src/loadBinary.js
index 9329f17b61f..6d782c2e32f 100644
--- a/packages/hashi/src/H5P/loadBinary.js
+++ b/packages/kolibri-zip/src/loadBinary.js
@@ -20,7 +20,7 @@ export default function(path) {
         if (xhr.readyState === 4) {
           if (xhr.status === 200 || xhr.status === 0) {
             try {
-              resolve(new Uint8Array(xhr.response));
+              resolve(xhr.response);
             } catch (err) {
               reject(new Error(err));
             }
diff --git a/packages/hashi/src/mimetypes.json b/packages/kolibri-zip/src/mimetypes.json
similarity index 50%
rename from packages/hashi/src/mimetypes.json
rename to packages/kolibri-zip/src/mimetypes.json
index 235f72c1c20..6f78731d3c5 100644
--- a/packages/hashi/src/mimetypes.json
+++ b/packages/kolibri-zip/src/mimetypes.json
@@ -1 +1 @@
-{"js":"application/javascript","json":"application/json","doc":"application/msword","pdf":"application/pdf","rtf":"text/rtf","xls":"application/vnd.ms-excel","ppt":"application/vnd.ms-powerpoint","odp":"application/vnd.oasis.opendocument.presentation","ods":"application/vnd.oasis.opendocument.spreadsheet","odt":"application/vnd.oasis.opendocument.text","pptx":"application/vnd.openxmlformats-officedocument.presentationml.presentation","xlsx":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","docx":"application/vnd.openxmlformats-officedocument.wordprocessingml.document","swf":"application/x-shockwave-flash","xml":"text/xml","mp3":"audio/mpeg","m4a":"audio/x-m4a","ogg":"audio/ogg","wav":"audio/x-wav","otf":"font/otf","ttf":"font/ttf","woff":"font/woff","bmp":"image/x-ms-bmp","gif":"image/gif","jpeg":"image/jpeg","jpg":"image/jpeg","png":"image/png","svg":"image/svg+xml","tif":"image/tiff","tiff":"image/tiff","css":"text/css","csv":"text/csv","md":"text/markdown","txt":"text/plain","vtt":"text/vtt","mp4":"video/mp4","webm":"video/webm"}
\ No newline at end of file
+{"js":"application/javascript","json":"application/json","doc":"application/msword","pdf":"application/pdf","rtf":"text/rtf","xls":"application/vnd.ms-excel","ppt":"application/vnd.ms-powerpoint","odp":"application/vnd.oasis.opendocument.presentation","ods":"application/vnd.oasis.opendocument.spreadsheet","odt":"application/vnd.oasis.opendocument.text","pptx":"application/vnd.openxmlformats-officedocument.presentationml.presentation","xlsx":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","docx":"application/vnd.openxmlformats-officedocument.wordprocessingml.document","swf":"application/x-shockwave-flash","xhtml":"application/xhtml+xml","xml":"text/xml","mp3":"audio/mpeg","m4a":"audio/x-m4a","ogg":"audio/ogg","wav":"audio/x-wav","otf":"font/otf","ttf":"font/ttf","woff":"font/woff","bmp":"image/x-ms-bmp","gif":"image/gif","jpeg":"image/jpeg","jpg":"image/jpeg","png":"image/png","svg":"image/svg+xml","tif":"image/tiff","tiff":"image/tiff","css":"text/css","csv":"text/csv","html":"text/html","htm":"text/html","md":"text/markdown","txt":"text/plain","vtt":"text/vtt","mp4":"video/mp4","webm":"video/webm"}
\ No newline at end of file
diff --git a/packages/kolibri-zip/test/fileUtils.spec.js b/packages/kolibri-zip/test/fileUtils.spec.js
new file mode 100644
index 00000000000..a21ed5e75c0
--- /dev/null
+++ b/packages/kolibri-zip/test/fileUtils.spec.js
@@ -0,0 +1,197 @@
+import {
+  getAbsoluteFilePath,
+  getCSSPaths,
+  replaceCSSPaths,
+  getDOMPaths,
+  replaceDOMPaths,
+} from '../src/fileUtils';
+
+describe('File Path replacement', () => {
+  describe('Absolute path resolution', () => {
+    it('should resolve a simple relative path', () => {
+      expect(getAbsoluteFilePath('package/test.css', './test.woff')).toEqual('package/test.woff');
+    });
+    it('should resolve a more complex relative path', () => {
+      expect(getAbsoluteFilePath('package/css/test.css', '../fonts/test.woff')).toEqual(
+        'package/fonts/test.woff'
+      );
+    });
+  });
+  describe('CSS path finding', () => {
+    it('should find a simple relative path', () => {
+      const packageFiles = ['./test.woff'];
+      expect(getCSSPaths('url("./test.woff")')).toEqual(packageFiles);
+    });
+    it('should find a more complex relative path', () => {
+      const packageFiles = ['../fonts/test.woff'];
+      expect(getCSSPaths('url("../fonts/test.woff")')).toEqual(packageFiles);
+    });
+    it('should find a more complex relative path with query parameters', () => {
+      const packageFiles = ['../fonts/test.woff'];
+      expect(getCSSPaths('url("../fonts/test.woff?iefix")')).toEqual(packageFiles);
+    });
+    it('should find paths that use single quotes', () => {
+      const packageFiles = ['../fonts/test.woff'];
+      expect(getCSSPaths("url('../fonts/test.woff')")).toEqual(packageFiles);
+    });
+    it('should find paths that use single quotes with query parameters', () => {
+      const packageFiles = ['../fonts/test.woff'];
+      expect(getCSSPaths("url('../fonts/test.woff?iefix')")).toEqual(packageFiles);
+    });
+    it('should find paths that use no quotes', () => {
+      const packageFiles = ['../fonts/test.woff'];
+      expect(getCSSPaths('url(../fonts/test.woff)')).toEqual(packageFiles);
+    });
+    it('should find paths with no quotes with query parameters', () => {
+      const packageFiles = ['../fonts/test.woff'];
+      expect(getCSSPaths('url(../fonts/test.woff?iefix)')).toEqual(packageFiles);
+    });
+  });
+  describe('CSS path replacement', () => {
+    it('should replace a simple relative path', () => {
+      const packageFiles = {
+        './test.woff': 'different',
+      };
+      expect(replaceCSSPaths('url("./test.woff")', packageFiles)).toEqual('url("different")');
+    });
+    it('should replace a more complex relative path', () => {
+      const packageFiles = {
+        '../fonts/test.woff': 'different',
+      };
+      expect(replaceCSSPaths('url("../fonts/test.woff")', packageFiles)).toEqual(
+        'url("different")'
+      );
+    });
+    it('should replace paths that use single quotes', () => {
+      const packageFiles = {
+        '../fonts/test.woff': 'different',
+      };
+      expect(replaceCSSPaths("url('../fonts/test.woff')", packageFiles)).toEqual(
+        "url('different')"
+      );
+    });
+    it('should replace paths that use no quotes', () => {
+      const packageFiles = {
+        '../fonts/test.woff': 'different',
+      };
+      expect(replaceCSSPaths('url(../fonts/test.woff)', packageFiles)).toEqual('url(different)');
+    });
+    it('should replace paths that use query parameters', () => {
+      const packageFiles = {
+        '../fonts/test.woff': 'different',
+      };
+      expect(replaceCSSPaths('url(../fonts/test.woff?iefix)', packageFiles)).toEqual(
+        'url(different)'
+      );
+    });
+    it('should not replace urls that are not a registered path', () => {
+      const packageFiles = {
+        '../../../../audio/test.mp3': 'different',
+      };
+      expect(replaceCSSPaths('url(../../../../fonts/test.woff)', packageFiles)).toEqual(
+        'url(../../../../fonts/test.woff)'
+      );
+    });
+    it('should not replace urls that are not a valid path', () => {
+      // This is mostly to make sure the function does not error.
+      const packageFiles = {
+        'package/audio/test.mp3': 'different',
+      };
+      expect(replaceCSSPaths('url(flob a dob dib dob)', packageFiles)).toEqual(
+        'url(flob a dob dib dob)'
+      );
+    });
+  });
+  const htmlTemplate = (attr, value) =>
+    `<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body><img ${attr}="${value}" /></body></html>`;
+  describe.each(['href', 'src'])('HTML path finding for %s', attr => {
+    const mimeType = 'text/html';
+    it('should find a simple relative path', () => {
+      const packageFiles = ['./test.png'];
+      expect(getDOMPaths(htmlTemplate(attr, './test.png'), mimeType)).toEqual(packageFiles);
+    });
+    it('should find a more complex relative path', () => {
+      const packageFiles = ['../fonts/test.png'];
+      expect(getDOMPaths(htmlTemplate(attr, '../fonts/test.png'), mimeType)).toEqual(packageFiles);
+    });
+    it('should find a more complex relative path with query parameters', () => {
+      const packageFiles = ['../fonts/test.png'];
+      expect(getDOMPaths(htmlTemplate(attr, '../fonts/test.png?iefix'), mimeType)).toEqual(
+        packageFiles
+      );
+    });
+  });
+  describe.each(['href', 'src'])('HTML path replacement for %s', attr => {
+    const mimeType = 'text/html';
+    it('should replace a simple relative path', () => {
+      const packageFiles = {
+        './test.png': 'different',
+      };
+      expect(replaceDOMPaths(htmlTemplate(attr, './test.png'), packageFiles, mimeType)).toEqual(
+        htmlTemplate(attr, 'different')
+      );
+    });
+    it('should replace a more complex relative path', () => {
+      const packageFiles = {
+        '../fonts/test.png': 'different',
+      };
+      expect(
+        replaceDOMPaths(htmlTemplate(attr, '../fonts/test.png'), packageFiles, mimeType)
+      ).toEqual(htmlTemplate(attr, 'different'));
+    });
+    it('should replace paths with query parameters', () => {
+      const packageFiles = {
+        '../fonts/test.png': 'different',
+      };
+      expect(
+        replaceDOMPaths(htmlTemplate(attr, '../fonts/test.png?iefix'), packageFiles, mimeType)
+      ).toEqual(htmlTemplate(attr, 'different'));
+    });
+  });
+  const xmlTemplate = (attr, value) =>
+    `<tt xmlns="http://www.w3.org/ns/ttml" xml:lang="en"><body><div><img ${attr}="${value}"/></div></body></tt>`;
+  describe.each(['href', 'src'])('XML path finding for %s', attr => {
+    const mimeType = 'text/xml';
+    it('should find a simple relative path', () => {
+      const packageFiles = ['./test.png'];
+      expect(getDOMPaths(xmlTemplate(attr, './test.png'), mimeType)).toEqual(packageFiles);
+    });
+    it('should find a more complex relative path', () => {
+      const packageFiles = ['../fonts/test.png'];
+      expect(getDOMPaths(xmlTemplate(attr, '../fonts/test.png'), mimeType)).toEqual(packageFiles);
+    });
+    it('should find a more complex relative path with query parameters', () => {
+      const packageFiles = ['../fonts/test.png'];
+      expect(getDOMPaths(xmlTemplate(attr, '../fonts/test.png?iefix'), mimeType)).toEqual(
+        packageFiles
+      );
+    });
+  });
+  describe.each(['href', 'src'])('XML path replacement for %s', attr => {
+    const mimeType = 'text/xml';
+    it('should replace a simple relative path', () => {
+      const packageFiles = {
+        './test.png': 'different',
+      };
+      expect(replaceDOMPaths(xmlTemplate(attr, './test.png'), packageFiles, mimeType)).toEqual(
+        xmlTemplate(attr, 'different')
+      );
+    });
+    it('should replace a more complex relative path', () => {
+      const packageFiles = {
+        '../fonts/test.png': 'different',
+      };
+      expect(
+        replaceDOMPaths(xmlTemplate(attr, '../fonts/test.png'), packageFiles, mimeType)
+      ).toEqual(xmlTemplate(attr, 'different'));
+    });
+    it('should replace paths with query parameters', () => {
+      const packageFiles = {
+        '../fonts/test.png': 'different',
+      };
+      expect(
+        replaceDOMPaths(xmlTemplate(attr, '../fonts/test.png?iefix'), packageFiles, mimeType)
+      ).toEqual(xmlTemplate(attr, 'different'));
+    });
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index 83628e74102..49f53fdc2ea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5475,7 +5475,12 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
-fastest-levenshtein@^1.0.12, fastest-levenshtein@^1.0.16:
+fastest-levenshtein@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2"
+  integrity sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==
+
+fastest-levenshtein@^1.0.16:
   version "1.0.16"
   resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5"
   integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
@@ -7576,7 +7581,7 @@ json5@^2.1.2, json5@^2.2.3:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
-jszip@*, jszip@^3.1.5, jszip@^3.10.1:
+jszip@*, jszip@^3.1.5:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.10.1.tgz#34aee70eb18ea1faec2f589208a157d1feb091c2"
   integrity sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==