diff --git a/demo/js/avaliableSkins.ts b/demo/js/avaliableSkins.ts
new file mode 100644
index 00000000..49d02afe
--- /dev/null
+++ b/demo/js/avaliableSkins.ts
@@ -0,0 +1,24 @@
+// @ts-ignore
+import osx from "../../skins/MacOSXAqua1-5.wsz";
+// @ts-ignore
+import topaz from "../../skins/TopazAmp1-2.wsz";
+// @ts-ignore
+import visor from "../../skins/Vizor1-01.wsz";
+// @ts-ignore
+import xmms from "../../skins/XMMS-Turquoise.wsz";
+// @ts-ignore
+import zaxon from "../../skins/ZaxonRemake1-0.wsz";
+// @ts-ignore
+import green from "../../skins/Green-Dimension-V2.wsz";
+// @ts-ignore
+import internetArchive from "../../skins/Internet-Archive.wsz";
+
+export default [
+  { url: green, name: "Green Dimension V2" },
+  { url: internetArchive, name: "Internet Archive" },
+  { url: osx, name: "Mac OSX v1.5 (Aqua)" },
+  { url: topaz, name: "TopazAmp" },
+  { url: visor, name: "Vizor" },
+  { url: xmms, name: "XMMS Turquoise " },
+  { url: zaxon, name: "Zaxon Remake" }
+];
diff --git a/demo/js/index.js b/demo/js/index.js
index 240c00f6..f9eb7c01 100644
--- a/demo/js/index.js
+++ b/demo/js/index.js
@@ -5,14 +5,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import createMiddleware from "raven-for-redux";
 import isButterchurnSupported from "butterchurn/lib/isSupported.min";
-import osx from "../../skins/MacOSXAqua1-5.wsz";
-import topaz from "../../skins/TopazAmp1-2.wsz";
-import visor from "../../skins/Vizor1-01.wsz";
-import xmms from "../../skins/XMMS-Turquoise.wsz";
-import zaxon from "../../skins/ZaxonRemake1-0.wsz";
-import green from "../../skins/Green-Dimension-V2.wsz";
 import base from "../../skins/base-2.91-png.wsz";
-import internetArchive from "../../skins/Internet-Archive.wsz";
 import { WINDOWS } from "../../js/constants";
 import * as Selectors from "../../js/selectors";
 
@@ -35,6 +28,7 @@ import { loadFilesFromReferences } from "../../js/actionCreators";
 import { bindToIndexedDB } from "./indexedDB";
 import { getButterchurnOptions } from "./butterchurnOptions";
 import dropboxFilePicker from "./dropboxFilePicker";
+import availableSkins from "./avaliableSkins";
 
 import {
   skinUrl as configSkinUrl,
@@ -175,15 +169,7 @@ Raven.context(async () => {
   const webamp = new WebampLazy({
     initialSkin,
     initialTracks: screenshot ? null : initialTracks,
-    availableSkins: [
-      { url: green, name: "Green Dimension V2" },
-      { url: internetArchive, name: "Internet Archive" },
-      { url: osx, name: "Mac OSX v1.5 (Aqua)" },
-      { url: topaz, name: "TopazAmp" },
-      { url: visor, name: "Vizor" },
-      { url: xmms, name: "XMMS Turquoise " },
-      { url: zaxon, name: "Zaxon Remake" }
-    ],
+    availableSkins,
     filePickers: [dropboxFilePicker],
     enableHotkeys: true,
     requireJSZip: () =>