diff --git a/README.md b/README.md
index f94f088..084ed32 100644
--- a/README.md
+++ b/README.md
@@ -3,8 +3,17 @@
 This project uses [`openscad-wasm`](https://github.com/openscad/openscad-wasm) under the hood to
 build an editor for OpenSCAD that is capable of loading `.scad` files from other servers.
 
-It is capable of rendering and exporting your creations. There is also a naive implementation of a
-visual customizer.
+## Features
+
+- It is capable of rendering OpenSCAD scripts
+- You can import scripts by URL
+- There are adapters for Printables and Thingiverse. Those platform do not expose the
+  links to their files in a way the user can copy the URL to the files. Instead this
+  application imports it from the model URL (i.e. https://www.thingiverse.com/thing:1234
+  or https://www.printables.com/model/123456-model-name)
+- You can import your own libraries or chose from a list of common libraries
+- You can add your own fonts or choose from a list of common fonts
+- You can export your customized model to STL, OFF, AMF, CSG, DXF and SVG
 
 # Dev
 
diff --git a/package-lock.json b/package-lock.json
index 6d84bad..e396ddf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,10 +14,13 @@
         "@fontsource/roboto": "^5.0.8",
         "@mui/icons-material": "^5.15.6",
         "@mui/material": "^5.15.6",
+        "@mui/x-tree-view": "^6.17.0",
+        "@zip.js/zip.js": "^2.7.33",
         "mui-chips-input": "^2.1.3",
         "notistack": "^3.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-dropzone": "^14.2.3",
         "react-stl-viewer": "^2.5.0"
       },
       "devDependencies": {
@@ -2438,6 +2441,35 @@
         }
       }
     },
+    "node_modules/@mui/x-tree-view": {
+      "version": "6.17.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-6.17.0.tgz",
+      "integrity": "sha512-09dc2D+Rjg2z8KOaxbUXyPi0aw7fm2jurEtV8Xw48xJ00joLWd5QJm1/v4CarEvaiyhTQzHImNqdgeJW8ZQB6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@mui/base": "^5.0.0-beta.20",
+        "@mui/utils": "^5.14.14",
+        "@types/react-transition-group": "^4.4.8",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.8.6",
+        "@mui/system": "^5.8.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3397,6 +3429,16 @@
       "resolved": "https://registry.npmjs.org/@webgpu/glslang/-/glslang-0.0.15.tgz",
       "integrity": "sha512-niT+Prh3Aff8Uf1MVBVUsaNjFj9rJAKDXuoHIKiQbB+6IUP/3J3JIhBNyZ7lDhytvXxw6ppgnwKZdDJ08UMj4Q=="
     },
+    "node_modules/@zip.js/zip.js": {
+      "version": "2.7.33",
+      "resolved": "https://registry.npmjs.org/@zip.js/zip.js/-/zip.js-2.7.33.tgz",
+      "integrity": "sha512-3Ct8eoIkvkflNEyL3wD3GwJ2ORMobGTGO4v9giq6a4vCBcVmk1qFXtfDN2P9hJ9Eibd4zPKMiRCca4lVu+56Ig==",
+      "engines": {
+        "bun": ">=0.7.0",
+        "deno": ">=1.0.0",
+        "node": ">=16.5.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -3702,6 +3744,14 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -6186,6 +6236,17 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -10741,6 +10802,22 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/react-dropzone": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
+      "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
+      "dependencies": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
@@ -11817,8 +11894,7 @@
     "node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "dev": true
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
@@ -14121,6 +14197,20 @@
         "react-is": "^18.2.0"
       }
     },
+    "@mui/x-tree-view": {
+      "version": "6.17.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-6.17.0.tgz",
+      "integrity": "sha512-09dc2D+Rjg2z8KOaxbUXyPi0aw7fm2jurEtV8Xw48xJ00joLWd5QJm1/v4CarEvaiyhTQzHImNqdgeJW8ZQB6g==",
+      "requires": {
+        "@babel/runtime": "^7.23.2",
+        "@mui/base": "^5.0.0-beta.20",
+        "@mui/utils": "^5.14.14",
+        "@types/react-transition-group": "^4.4.8",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -14812,6 +14902,11 @@
       "resolved": "https://registry.npmjs.org/@webgpu/glslang/-/glslang-0.0.15.tgz",
       "integrity": "sha512-niT+Prh3Aff8Uf1MVBVUsaNjFj9rJAKDXuoHIKiQbB+6IUP/3J3JIhBNyZ7lDhytvXxw6ppgnwKZdDJ08UMj4Q=="
     },
+    "@zip.js/zip.js": {
+      "version": "2.7.33",
+      "resolved": "https://registry.npmjs.org/@zip.js/zip.js/-/zip.js-2.7.33.tgz",
+      "integrity": "sha512-3Ct8eoIkvkflNEyL3wD3GwJ2ORMobGTGO4v9giq6a4vCBcVmk1qFXtfDN2P9hJ9Eibd4zPKMiRCca4lVu+56Ig=="
+    },
     "acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -15031,6 +15126,11 @@
       "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
       "dev": true
     },
+    "attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg=="
+    },
     "available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -16890,6 +16990,14 @@
         "flat-cache": "^3.0.4"
       }
     },
+    "file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -20277,6 +20385,16 @@
         }
       }
     },
+    "react-dropzone": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
+      "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
+      "requires": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      }
+    },
     "react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
@@ -21083,8 +21201,7 @@
     "tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "dev": true
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "tunnel-agent": {
       "version": "0.6.0",
diff --git a/package.json b/package.json
index 493d1f7..c146d8d 100644
--- a/package.json
+++ b/package.json
@@ -39,10 +39,13 @@
     "@fontsource/roboto": "^5.0.8",
     "@mui/icons-material": "^5.15.6",
     "@mui/material": "^5.15.6",
+    "@mui/x-tree-view": "^6.17.0",
+    "@zip.js/zip.js": "^2.7.33",
     "mui-chips-input": "^2.1.3",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-stl-viewer": "^2.5.0"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
index a398201..94d9ed5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,11 @@
-import { Box, CircularProgress, Paper, styled } from '@mui/material';
+import { styled } from '@mui/material';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
 import React from 'react';
 
-import Editor from './components/Editor';
 import ErrorBox from './components/ErrorBox';
-import ImportFileSelector from './components/ImportFileSelector';
+import { useFileSystemProvider } from './components/FileSystemProvider';
+import Workspace from './components/Workspace';
 import useImport from './hooks/useImport';
 
 const MyBox = styled(Box)(({ theme }) => ({
@@ -19,9 +21,8 @@ const MyBox = styled(Box)(({ theme }) => ({
 export default function App() {
   const importUrl = getImportUrl();
 
-  const { error, files, isLoading } = useImport(importUrl);
-  const [selectedIndex, setSelectedIndex] = React.useState<number>();
-  let file: string | undefined;
+  const { error, isLoading } = useImport(importUrl);
+  const { files } = useFileSystemProvider();
 
   // Show a loading indicator during the import.
   if (isLoading) {
@@ -49,27 +50,7 @@ export default function App() {
     );
   }
 
-  // If there are multiple files, let the user select the one to import.
-  if (files.length > 1 && selectedIndex === undefined) {
-    return (
-      <MyBox>
-        <Paper sx={{ p: 1 }}>
-          <ImportFileSelector files={files} onSelect={setSelectedIndex} />
-        </Paper>
-      </MyBox>
-    );
-  }
-
-  // If there is only one file, we can directly import it.
-  if (files.length === 1) {
-    file = files[0].url;
-
-    // If the user has selected a file, we can import it.
-  } else if (selectedIndex !== undefined && files.length > selectedIndex) {
-    file = files[selectedIndex].url;
-  }
-
-  return <Editor url={file} initialMode={file ? 'customizer' : undefined} />;
+  return <Workspace />;
 }
 
 function getImportUrl(): string | undefined {
diff --git a/src/components/CodeEditor.tsx b/src/components/CodeEditor.tsx
deleted file mode 100644
index f01dae8..0000000
--- a/src/components/CodeEditor.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-
-interface CodeEditorProps {
-  code: string;
-  disabled?: boolean;
-  onChange: (newCode: string) => void;
-}
-
-export default function CodeEditor({
-  code,
-  disabled,
-  onChange,
-}: CodeEditorProps) {
-  const handleCodeChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    onChange(event.target.value);
-  };
-
-  return (
-    <div style={{ height: '100%', display: 'flex', flexFlow: 'column' }}>
-      <textarea
-        readOnly={disabled}
-        value={code}
-        onChange={handleCodeChange}
-        style={{
-          width: '100%',
-          flexGrow: 1,
-          resize: 'none',
-          padding: 12,
-          backgroundColor: disabled ? '#ccc' : '#fff',
-        }}
-      />
-    </div>
-  );
-}
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
index 376f5c1..0d6a0ad 100644
--- a/src/components/Editor.tsx
+++ b/src/components/Editor.tsx
@@ -1,23 +1,24 @@
-import CodeIcon from '@mui/icons-material/Code';
 import LoopIcon from '@mui/icons-material/Loop';
-import TuneIcon from '@mui/icons-material/Tune';
+import { Box } from '@mui/material';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import React, { useEffect } from 'react';
 
 import executeOpenSCAD from '../lib/openSCAD/execute';
 import parseOpenScadParameters, {
   Parameter,
 } from '../lib/openSCAD/parseParameter';
-import CodeEditor from './CodeEditor';
-import Customizer from './Customizer';
+import { WorkerMessageType } from '../worker/types';
 import { useOpenSCADProvider } from './OpenscadWorkerProvider';
-import Preview from './Preview';
 import SplitButton from './SplitButton';
+import CodeEditor from './Workspace/CodeEditor';
+import Customizer from './Workspace/Customizer';
+import FileSystem from './Workspace/FileSystem';
+import Libraries from './Workspace/Libraries';
+import Preview from './Workspace/Preview';
+import Sidebar from './Workspace/Sidebar';
 
 const loopAnimation = {
   animation: 'spin 2s linear infinite',
@@ -31,7 +32,7 @@ const loopAnimation = {
   },
 };
 
-type EditorMode = 'editor' | 'customizer';
+type EditorMode = 'editor' | 'customizer' | 'file' | 'libraries';
 
 type Props = {
   url?: string;
@@ -75,13 +76,8 @@ export default function Editor({ url, initialMode }: Props) {
     }
   };
 
-  const handleMode = (
-    event: React.MouseEvent<HTMLElement>,
-    newMode: EditorMode | null
-  ) => {
-    if (newMode !== null) {
-      setMode(newMode);
-    }
+  const handleMode = (newMode: EditorMode) => {
+    setMode(newMode);
   };
 
   // Whenever the code changes, attempt to parse the parameters
@@ -123,137 +119,125 @@ export default function Editor({ url, initialMode }: Props) {
   }, [log]);
 
   return (
-    <Grid container sx={{ height: '100%' }}>
-      <Grid
-        item
-        xs={4}
-        sx={{ borderRight: 1, height: '80%', borderColor: '#ccc' }}
-      >
-        <Stack sx={{ height: '100%' }}>
-          {mode === 'customizer' && (
-            <Customizer
-              parameters={parameters}
-              onChange={(p) => setParameters(p)}
-            />
-          )}
-          {mode === 'editor' && (
-            <CodeEditor onChange={(s) => setCode(s)} code={code} />
-          )}
-        </Stack>
-      </Grid>
-      <Grid item xs={8} sx={{ height: '80%', position: 'relative' }}>
-        <ToggleButtonGroup
-          value={mode}
-          orientation="vertical"
-          exclusive
-          onChange={handleMode}
-          aria-label="text alignment"
-          sx={{ position: 'absolute', top: 5, left: 5, zIndex: 999 }}
+    <Box sx={{ display: 'flex', height: '100%' }}>
+      <Box sx={{ height: '100%', borderRight: '1px solid #ccc', p: 1 }}>
+        <Sidebar mode={mode} onChange={handleMode} />
+      </Box>
+      <Grid container sx={{ height: '100%', flexGrow: 1 }}>
+        <Grid
+          item
+          xs={4}
+          sx={{ borderRight: 1, height: '80%', borderColor: '#ccc' }}
         >
-          <ToggleButton value="editor" aria-label="left aligned">
-            <CodeIcon />
-          </ToggleButton>
-          <ToggleButton
-            value="customizer"
-            aria-label="centered"
-            disabled={!parameters || !parameters.length}
-          >
-            <TuneIcon />
-          </ToggleButton>
-        </ToggleButtonGroup>
-        {isRendering && (
-          <div
-            style={{
-              zIndex: 999,
-              position: 'absolute',
-              height: '100%',
-              width: '100%',
-              backgroundColor: 'rgba(255,255,255,0.5)',
-            }}
-          >
+          <Stack sx={{ height: '100%' }}>
+            {mode === 'customizer' && (
+              <Customizer
+                parameters={parameters}
+                onChange={(p) => setParameters(p)}
+              />
+            )}
+            {mode === 'editor' && (
+              <CodeEditor onChange={(s) => setCode(s)} code={code} />
+            )}
+            {mode === 'file' && <FileSystem />}
+            {mode === 'libraries' && <Libraries />}
+          </Stack>
+        </Grid>
+        <Grid item xs={8} sx={{ height: '80%', position: 'relative' }}>
+          {isRendering && (
             <div
               style={{
-                top: '50%',
-                left: '50%',
+                zIndex: 999,
                 position: 'absolute',
-                transform: 'translate(-50%,-50%)',
+                height: '100%',
+                width: '100%',
+                backgroundColor: 'rgba(255,255,255,0.5)',
               }}
             >
-              <CircularProgress />
+              <div
+                style={{
+                  top: '50%',
+                  left: '50%',
+                  position: 'absolute',
+                  transform: 'translate(-50%,-50%)',
+                }}
+              >
+                <CircularProgress />
+              </div>
             </div>
-          </div>
-        )}
-        <Preview />
-      </Grid>
-      <Grid
-        item
-        xs={4}
-        sx={{
-          height: '20%',
-          borderRight: 1,
-          borderTop: 1,
-          borderColor: '#ccc',
-        }}
-      >
-        <Stack direction="row" spacing={2} sx={{ m: 1 }}>
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={handleRender}
-            startIcon={isRendering && <LoopIcon sx={loopAnimation} />}
-          >
-            Render
-          </Button>
-          <SplitButton
-            disabled={isRendering || isExporting || !previewFile}
-            options={[
-              'Export STL',
-              'Export OFF',
-              'Export AMF',
-              // 'Export 3MF', // TODO: 3MF export was not enabled when building the OpenSCAD wasm module
-              'Export CSG',
-              'Export DXF',
-              'Export SVG',
-            ]}
-            startIcon={isExporting && <LoopIcon sx={loopAnimation} />}
-            onSelect={async (selectedLabel: string) => {
-              setIsExporting(true);
-              const fileType = selectedLabel.split(' ')[1].toLowerCase();
-
-              const output = await executeOpenSCAD(
-                WorkerMessageType.EXPORT,
-                code,
-                fileType,
-                parameters
-              );
-
-              const url = URL.createObjectURL(output.output);
-              const link = document.createElement('a');
-
-              link.href = url;
-              link.download = output.output.name;
-              link.click();
-              setIsExporting(false);
-            }}
-          />
-        </Stack>
-      </Grid>
-      <Grid
-        item
-        xs={8}
-        sx={{
-          height: '20%',
-          overflow: 'scroll',
-          fontSize: '0.8em',
-          borderTop: 1,
-          borderColor: '#ccc',
-        }}
-      >
-        <pre style={{ padding: 5, margin: 0 }}>
-          {log?.join('\n')}
-          <span ref={logRef} />
-        </pre>
+          )}
+          <Preview />
+        </Grid>
+        <Grid
+          item
+          xs={4}
+          sx={{
+            height: '20%',
+            borderRight: 1,
+            borderTop: 1,
+            borderColor: '#ccc',
+          }}
+        >
+          <Stack direction="row" spacing={2} sx={{ m: 1 }}>
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={handleRender}
+              startIcon={isRendering && <LoopIcon sx={loopAnimation} />}
+            >
+              Render
+            </Button>
+            <SplitButton
+              disabled={isRendering || isExporting || !previewFile}
+              options={[
+                'Export STL',
+                'Export OFF',
+                'Export AMF',
+                // 'Export 3MF', // TODO: 3MF export was not enabled when building the OpenSCAD wasm module
+                'Export CSG',
+                'Export DXF',
+                'Export SVG',
+              ]}
+              startIcon={isExporting && <LoopIcon sx={loopAnimation} />}
+              onSelect={async (selectedLabel: string) => {
+                setIsExporting(true);
+                const fileType = selectedLabel.split(' ')[1].toLowerCase();
+
+                const output = await executeOpenSCAD(
+                  WorkerMessageType.EXPORT,
+                  code,
+                  fileType,
+                  parameters
+                );
+
+                const url = URL.createObjectURL(output.output);
+                const link = document.createElement('a');
+
+                link.href = url;
+                link.download = output.output.name;
+                link.click();
+                setIsExporting(false);
+              }}
+            />
+          </Stack>
+        </Grid>
+        <Grid
+          item
+          xs={8}
+          sx={{
+            height: '20%',
+            overflow: 'scroll',
+            fontSize: '0.8em',
+            borderTop: 1,
+            borderColor: '#ccc',
+          }}
+        >
+          <pre style={{ padding: 5, margin: 0 }}>
+            {log?.join('\n')}
+            <span ref={logRef} />
+          </pre>
+        </Grid>
       </Grid>
-    </Grid>
+    </Box>
   );
 }
diff --git a/src/components/FileSystemProvider.tsx b/src/components/FileSystemProvider.tsx
new file mode 100644
index 0000000..f485067
--- /dev/null
+++ b/src/components/FileSystemProvider.tsx
@@ -0,0 +1,111 @@
+import React, { createContext, useState } from 'react';
+
+import FileWithPath from '../lib/FileWithPath';
+import executeWorkerJob from '../lib/executeWorkerJob';
+import {
+  FileSystemWorkerMessageData,
+  WorkerMessageType,
+} from '../worker/types';
+
+type ContextType = {
+  files: FileWithPath[];
+  writeFile: (file: FileWithPath) => Promise<void>;
+  writeFiles: (files: FileWithPath[]) => Promise<void>;
+  readFile: (path: string) => Promise<FileWithPath>;
+  unlinkFile: (path: string) => Promise<void>;
+};
+
+// Create a context for the web worker
+const FileSystemContext = createContext<ContextType | undefined>(undefined);
+
+type Props = {
+  children: React.ReactNode;
+};
+
+// Create a provider component
+export default function FileSystemProvider({ children }: Props) {
+  const [files, setFiles] = useState<FileWithPath[]>([]);
+
+  const value = {
+    files,
+    writeFile: async (file: FileWithPath) => {
+      await executeWorkerJob({
+        type: WorkerMessageType.FS_WRITE,
+        data: {
+          path: file.path || file.name,
+          content: file,
+        },
+      });
+
+      setFiles((files) => [...files.filter((f) => f.name !== file.name), file]);
+    },
+
+    writeFiles: async (files2: FileWithPath[]) => {
+      await Promise.all(
+        files2.map((file) => {
+          const p = async () => {
+            return executeWorkerJob({
+              type: WorkerMessageType.FS_WRITE,
+              data: {
+                path: file.path || file.name,
+                content: file,
+              },
+            });
+          };
+          return p();
+        })
+      );
+
+      setFiles((files) => {
+        const filtered = files.filter(
+          (f) => !files2.find((f2) => f2.name === f.name)
+        );
+        return [...filtered, ...files2];
+      });
+    },
+
+    readFile: async (path: string) => {
+      const response = await executeWorkerJob({
+        type: WorkerMessageType.FS_READ,
+        data: {
+          path,
+        },
+      });
+      const data = response.data as FileSystemWorkerMessageData;
+      const name = data.path.split('/').pop();
+
+      return new FileWithPath([data.content], name, {
+        path: data.path,
+      });
+    },
+
+    unlinkFile: async (path: string) => {
+      await executeWorkerJob({
+        type: WorkerMessageType.FS_UNLINK,
+        data: {
+          path,
+        },
+      });
+
+      setFiles((files) => files.filter((f) => f.path !== path));
+    },
+  };
+
+  return (
+    <FileSystemContext.Provider value={value}>
+      {children}
+    </FileSystemContext.Provider>
+  );
+}
+
+export function useFileSystemProvider() {
+  const context = React.useContext(FileSystemContext);
+
+  if (!context) {
+    throw new Error(
+      'useFileSystemProvider must be used within a FileSystemProvider'
+    );
+  }
+
+  return context;
+}
diff --git a/src/components/ImportFileSelector.tsx b/src/components/ImportFileSelector.tsx
deleted file mode 100644
index 8ece54c..0000000
--- a/src/components/ImportFileSelector.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import FileOpenIcon from '@mui/icons-material/FileOpen';
-import Alert from '@mui/material/Alert';
-import AlertTitle from '@mui/material/AlertTitle';
-import Avatar from '@mui/material/Avatar';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
-import ListItemText from '@mui/material/ListItemText';
-import React from 'react';
-
-import { FetchaFile } from '../lib/fetcha';
-
-type Props = {
-  files: FetchaFile[];
-  onSelect: (index: number) => void;
-};
-
-export default function ImportFileSelector({ files, onSelect }: Props) {
-  return (
-    <>
-      <Alert severity="info">
-        <AlertTitle>Multiple files found at the given location</AlertTitle>
-        Please select the one you want to import.
-      </Alert>
-      <List>
-        {files.map((r, idx) => (
-          <ListItem
-            sx={{ cursor: 'pointer' }}
-            key={r.url}
-            onClick={() => {
-              onSelect(idx);
-            }}
-          >
-            <ListItemAvatar>
-              <Avatar>
-                <FileOpenIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={r.name} secondary={r.description} />
-          </ListItem>
-        ))}
-      </List>
-    </>
-  );
-}
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index a83cb93..b890a13 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -45,6 +45,7 @@ export default function Layout({ title, children }: Props) {
       >
         <Toolbar>
           <IconButton
+            id="menu-button"
             size="large"
             edge="start"
             color="inherit"
@@ -60,7 +61,7 @@ export default function Layout({ title, children }: Props) {
             open={open}
             onClose={handleClose}
             MenuListProps={{
-              'aria-labelledby': 'basic-button',
+              'aria-labelledby': 'menu-button',
             }}
           >
             <MenuItem onClick={handleClose} id="import_from_url">
diff --git a/src/components/OpenscadWorkerProvider.tsx b/src/components/OpenscadWorkerProvider.tsx
index b376c90..9bda3f6 100644
--- a/src/components/OpenscadWorkerProvider.tsx
+++ b/src/components/OpenscadWorkerProvider.tsx
@@ -1,23 +1,29 @@
 import React, { createContext, useState } from 'react';
 
 import executeOpenSCAD from '../lib/openSCAD/execute';
+import { Parameter } from '../lib/openSCAD/parseParameter';
 import { OpenSCADWorkerMessageData, WorkerMessageType } from '../worker/types';
 
 // Create a context for the web worker
 const OpenSCADWorkerContext = createContext<{
-  export?: (
+  execExport?: (
     code: string,
     fileType: string,
     params?: OpenSCADWorkerMessageData['params']
   ) => void;
   exportFile?: File | null;
+  isExporting?: boolean;
   log?: string[];
   preview?: (
     code: string,
     params?: OpenSCADWorkerMessageData['params']
   ) => void;
   previewFile?: File | null;
+  isRendering?: boolean;
   reset?: () => void;
+  parameters?: Parameter[];
+  setParameters?: React.Dispatch<React.SetStateAction<Parameter[]>>;
+  resetLog?: () => void;
 }>({
   log: [],
 });
@@ -31,17 +37,24 @@ export default function OpenscadWorkerProvider({ children }: Props) {
   const [log, setLog] = useState<string[]>([]);
   const [previewFile, setPreviewFile] = useState<File | null>(null);
   const [exportFile, setExportFile] = useState<File | null>(null);
+  const [isExporting, setIsExporting] = useState<boolean>(false);
+  const [isRendering, setIsRendering] = useState<boolean>(false);
+  const [parameters, setParameters] = useState<Parameter[]>([]);
 
   const value = {
     log,
     exportFile,
     previewFile,
+    isExporting,
+    isRendering,
 
-    export: async (
+    execExport: async (
       code: string,
       fileType: string,
       params?: OpenSCADWorkerMessageData['params']
     ) => {
+      setIsExporting(true);
+
       const output = await executeOpenSCAD(
         WorkerMessageType.EXPORT,
         code,
@@ -58,12 +71,15 @@ export default function OpenscadWorkerProvider({ children }: Props) {
       if (output.output) {
         setExportFile(output.output);
       }
+      setIsExporting(false);
     },
 
     preview: async (
       code: string,
       params?: OpenSCADWorkerMessageData['params']
     ) => {
+      setIsRendering(true);
+
       const output = await executeOpenSCAD(
         WorkerMessageType.PREVIEW,
         code,
@@ -80,12 +96,23 @@ export default function OpenscadWorkerProvider({ children }: Props) {
       if (output.output) {
         setPreviewFile(output.output);
       }
+      setIsRendering(false);
     },
 
+    parameters,
+    setParameters,
+
     reset: () => {
       setLog([]);
       setPreviewFile(null);
       setExportFile(null);
+      setIsExporting(false);
+      setIsRendering(false);
+      setParameters([]);
+    },
+
+    resetLog: () => {
+      setLog([]);
     },
   };
 
diff --git a/src/components/Preview.tsx b/src/components/Preview.tsx
deleted file mode 100644
index 99ab084..0000000
--- a/src/components/Preview.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useTheme } from '@mui/material';
-import React, { useMemo } from 'react';
-import { StlViewer } from 'react-stl-viewer';
-
-import { useOpenSCADProvider } from './OpenscadWorkerProvider';
-
-export default function Preview() {
-  const { previewFile } = useOpenSCADProvider();
-  const theme = useTheme();
-  const url = useMemo(() => {
-    if (!previewFile) {
-      return null;
-    }
-
-    return URL.createObjectURL(previewFile);
-  }, [previewFile]);
-
-  if (!url) {
-    return null;
-  }
-
-  // TODO: Why doesn't this lead to a rerender/flickering? `style` is recreated each time this component renders
-  const style = {
-    top: 0,
-    left: 0,
-    width: '100%', // TODO make this responsive
-    height: '100%', // TODO make this responsive
-  };
-
-  return (
-    <div style={{ height: '100%' }}>
-      <StlViewer
-        style={style}
-        orbitControls
-        shadows
-        showAxes
-        modelProps={{
-          color: theme.palette.primary.main,
-        }}
-        url={url}
-      />
-    </div>
-  );
-}
diff --git a/src/components/SplitButton.tsx b/src/components/SplitButton.tsx
index d0253d9..5173c8d 100644
--- a/src/components/SplitButton.tsx
+++ b/src/components/SplitButton.tsx
@@ -69,7 +69,7 @@ export default function SplitButton({
           size="small"
           aria-controls={open ? 'split-button-menu' : undefined}
           aria-expanded={open ? 'true' : undefined}
-          aria-label="select merge strategy"
+          aria-label="select export format"
           aria-haspopup="menu"
           onClick={handleToggle}
         >
diff --git a/src/components/Workspace.tsx b/src/components/Workspace.tsx
new file mode 100644
index 0000000..f78cddd
--- /dev/null
+++ b/src/components/Workspace.tsx
@@ -0,0 +1,124 @@
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import React, { useCallback, useEffect } from 'react';
+
+import { Parameter } from '../lib/openSCAD/parseParameter';
+import parseOpenScadParameters from '../lib/openSCAD/parseParameter';
+import { useOpenSCADProvider } from './OpenscadWorkerProvider';
+import Buttons from './Workspace/Buttons';
+import CodeEditor from './Workspace/CodeEditor';
+import Console from './Workspace/Console';
+import Customizer from './Workspace/Customizer';
+import FileSystem from './Workspace/FileSystem';
+import Fonts from './Workspace/Fonts';
+import Libraries from './Workspace/Libraries';
+import Preview from './Workspace/Preview';
+import Sidebar from './Workspace/Sidebar';
+
+export type EditorMode =
+  | 'editor'
+  | 'customizer'
+  | 'file'
+  | 'libraries'
+  | 'fonts';
+
+export default function Workspace() {
+  const { preview, previewFile, isRendering } = useOpenSCADProvider();
+  const [mode, setMode] = React.useState<EditorMode>('editor');
+  const [code, setCode] = React.useState<string>('');
+  const [parameters, setParameters] = React.useState<Parameter[]>([]);
+
+  const handleCodeChange = useCallback(
+    (newCode: string) => {
+      setCode(newCode);
+    },
+    [setCode]
+  );
+
+  // Whenever the code changes, attempt to parse the parameters
+  useEffect(() => {
+    if (!code) {
+      return;
+    }
+
+    const newParams = parseOpenScadParameters(code);
+    // Add old values to new params
+    if (parameters.length) {
+      // REFACTOR: rework to use a map instead of two loops
+      newParams.forEach((newParam) => {
+        const oldParam = parameters.find(
+          (param) => param.name === newParam.name
+        );
+        if (oldParam) {
+          newParam.value = oldParam.value;
+        }
+      });
+    }
+    setParameters(newParams);
+
+    if (mode === 'customizer' && (!newParams || !newParams.length)) {
+      setMode('editor');
+    }
+
+    // Render the preview if we have code and we don't have a previewFile yet
+    if (code?.length && !previewFile && !isRendering) {
+      preview(code, newParams);
+    }
+  }, [code]);
+
+  return (
+    <Box sx={{ display: 'flex', height: '100%' }}>
+      <Box sx={{ height: '100%', borderRight: '1px solid #ccc', p: 1 }}>
+        <Sidebar mode={mode} onChange={(value) => setMode(value)} />
+      </Box>
+      <Grid container sx={{ height: '100%', flexGrow: 1 }}>
+        <Grid
+          item
+          xs={4}
+          sx={{ borderRight: 1, height: '80%', borderColor: '#ccc', pt: 2 }}
+        >
+          {mode === 'customizer' && (
+            <Customizer
+              parameters={parameters}
+              onChange={(p) => setParameters(p)}
+            />
+          )}
+          {mode === 'editor' && (
+            <CodeEditor onChange={handleCodeChange} code={code} />
+          )}
+          {mode === 'file' && <FileSystem />}
+          {mode === 'libraries' && <Libraries />}
+          {mode === 'fonts' && <Fonts />}
+        </Grid>
+        <Grid item xs={8} sx={{ height: '80%', position: 'relative' }}>
+          <Preview />
+        </Grid>
+        <Grid
+          item
+          xs={4}
+          sx={{
+            height: '20%',
+            borderRight: 1,
+            borderTop: 1,
+            borderColor: '#ccc',
+          }}
+        >
+          <Buttons code={code} parameters={parameters} />
+        </Grid>
+        <Grid
+          item
+          xs={8}
+          sx={{
+            height: '20%',
+            overflow: 'scroll',
+            fontSize: '0.8em',
+            borderTop: 1,
+            borderColor: '#ccc',
+          }}
+        >
+          <Console />
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
diff --git a/src/components/Workspace/Buttons.tsx b/src/components/Workspace/Buttons.tsx
new file mode 100644
index 0000000..146b20a
--- /dev/null
+++ b/src/components/Workspace/Buttons.tsx
@@ -0,0 +1,85 @@
+import LoopIcon from '@mui/icons-material/Loop';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import React, { useEffect } from 'react';
+
+import { Parameter } from '../../lib/openSCAD/parseParameter';
+import { useOpenSCADProvider } from '../OpenscadWorkerProvider';
+import SplitButton from '../SplitButton';
+
+const loopAnimation = {
+  animation: 'spin 2s linear infinite',
+  '@keyframes spin': {
+    '0%': {
+      transform: 'rotate(360deg)',
+    },
+    '100%': {
+      transform: 'rotate(0deg)',
+    },
+  },
+};
+
+type Props = {
+  code: string;
+  parameters: Parameter[];
+};
+
+export default function Buttons({ code, parameters }: Props) {
+  const {
+    exportFile,
+    execExport,
+    isExporting,
+    isRendering,
+    previewFile,
+    preview,
+  } = useOpenSCADProvider();
+
+  const handleRender = async () => {
+    preview(code, parameters);
+  };
+
+  useEffect(() => {
+    if (exportFile) {
+      const url = URL.createObjectURL(exportFile);
+      const link = document.createElement('a');
+
+      link.href = url;
+      link.setAttribute('download', exportFile.name);
+      document.body.appendChild(link);
+
+      link.click();
+      document.body.removeChild(link);
+    }
+  }, [exportFile]);
+
+  return (
+    <Stack direction="row" spacing={2} sx={{ m: 1 }}>
+      <Button
+        variant="contained"
+        color="primary"
+        onClick={handleRender}
+        startIcon={isRendering && <LoopIcon sx={loopAnimation} />}
+      >
+        Render
+      </Button>
+      <SplitButton
+        disabled={isRendering || isExporting || !previewFile}
+        options={[
+          'Export STL',
+          'Export OFF',
+          'Export AMF',
+          // 'Export 3MF', // TODO: 3MF export was not enabled when building the OpenSCAD wasm module
+          'Export CSG',
+          'Export DXF',
+          'Export SVG',
+        ]}
+        startIcon={isExporting && <LoopIcon sx={loopAnimation} />}
+        onSelect={async (selectedLabel: string) => {
+          const fileType = selectedLabel.split(' ')[1].toLowerCase();
+
+          execExport(code, fileType, parameters);
+        }}
+      />
+    </Stack>
+  );
+}
diff --git a/src/components/Workspace/CodeEditor.tsx b/src/components/Workspace/CodeEditor.tsx
new file mode 100644
index 0000000..44962e6
--- /dev/null
+++ b/src/components/Workspace/CodeEditor.tsx
@@ -0,0 +1,71 @@
+import { Alert, AlertTitle, SelectChangeEvent } from '@mui/material';
+import React, { useEffect } from 'react';
+
+import { useFileSystemProvider } from '../FileSystemProvider';
+import FileSelector from './FileSystem/FileSelector';
+
+interface CodeEditorProps {
+  code: string;
+  disabled?: boolean;
+  onChange: (newCode: string) => void;
+}
+
+export default function CodeEditor({
+  code,
+  disabled,
+  onChange,
+}: CodeEditorProps) {
+  const handleCodeChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onChange(event.target.value);
+  };
+  const { files } = useFileSystemProvider();
+  const [selectedFile, setSelectedFile] = React.useState<string>();
+
+  // Load the selected file.
+  const handleFileSelect = (event: SelectChangeEvent<string>) => {
+    const file = files.find((f) => f.path === event.target.value);
+
+    if (file) {
+      (async () => {
+        onChange(await file.text());
+        setSelectedFile(file.path);
+      })();
+    }
+  };
+
+  // Load the first .scad file in the list, but only if there is no code yet.
+  useEffect(() => {
+    if (files.length > 0 && !code) {
+      (async () => {
+        const filtered = files.filter((f) => f.name.endsWith('.scad'));
+
+        if (filtered.length) {
+          onChange(await filtered[0].text());
+          setSelectedFile(filtered[0].path);
+        }
+      })();
+    }
+  }, [files, onChange]);
+
+  return (
+    <div style={{ height: '100%', display: 'flex', flexFlow: 'column' }}>
+      <Alert severity="info" sx={{ mb: 1 }}>
+        <AlertTitle>Code Editor</AlertTitle>
+        Edit the code to your liking.
+      </Alert>
+      <FileSelector onChange={handleFileSelect} selectedFile={selectedFile} />
+      <textarea
+        readOnly={disabled}
+        value={code}
+        onChange={handleCodeChange}
+        style={{
+          width: '100%',
+          flexGrow: 1,
+          resize: 'none',
+          padding: 12,
+          backgroundColor: disabled ? '#ccc' : '#fff',
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/components/Workspace/Console.tsx b/src/components/Workspace/Console.tsx
new file mode 100644
index 0000000..c0ca5fd
--- /dev/null
+++ b/src/components/Workspace/Console.tsx
@@ -0,0 +1,31 @@
+import DeleteIcon from '@mui/icons-material/Delete';
+import { Box, IconButton } from '@mui/material';
+import React, { useEffect } from 'react';
+
+import { useOpenSCADProvider } from '../OpenscadWorkerProvider';
+
+export default function Console() {
+  const { log, resetLog } = useOpenSCADProvider();
+  const logRef = React.useRef<HTMLPreElement>(null);
+
+  useEffect(() => {
+    if (logRef.current) {
+      logRef.current.scrollTop = logRef.current.scrollHeight;
+    }
+  }, [log]);
+
+  return (
+    <Box sx={{ position: 'relative' }}>
+      <IconButton
+        onClick={resetLog}
+        sx={{ position: 'static', top: 5, right: 5 }}
+      >
+        <DeleteIcon />
+      </IconButton>
+      <pre style={{ padding: 5, margin: 0 }}>
+        {log?.join('\n')}
+        <span ref={logRef} />
+      </pre>
+    </Box>
+  );
+}
diff --git a/src/components/Customizer.tsx b/src/components/Workspace/Customizer.tsx
similarity index 96%
rename from src/components/Customizer.tsx
rename to src/components/Workspace/Customizer.tsx
index effd153..dc96c73 100644
--- a/src/components/Customizer.tsx
+++ b/src/components/Workspace/Customizer.tsx
@@ -1,4 +1,5 @@
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { Alert, AlertTitle } from '@mui/material';
 import Accordion from '@mui/material/Accordion';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import AccordionSummary from '@mui/material/AccordionSummary';
@@ -10,7 +11,7 @@ import TextField from '@mui/material/TextField';
 import { MuiChipsInput } from 'mui-chips-input';
 import React, { useMemo } from 'react';
 
-import { Parameter } from '../lib/openSCAD/parseParameter';
+import { Parameter } from '../../lib/openSCAD/parseParameter';
 
 type Parameters = Parameter[];
 
@@ -94,6 +95,10 @@ export default function Customizer({ parameters, onChange }: Props) {
 
   return (
     <div style={{ height: '100%', overflow: 'scroll' }}>
+      <Alert severity="info" sx={{ mb: 1 }}>
+        <AlertTitle>Customizer</AlertTitle>
+        Adjust the parameters of your design.
+      </Alert>
       {Object.entries(groups)
         .filter((x) => x[0].toLowerCase() !== 'hidden')
         .map(([groupName, groupParams], idx) => (
diff --git a/src/components/Workspace/FileSystem.tsx b/src/components/Workspace/FileSystem.tsx
new file mode 100644
index 0000000..707fdb6
--- /dev/null
+++ b/src/components/Workspace/FileSystem.tsx
@@ -0,0 +1,193 @@
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import DeleteIcon from '@mui/icons-material/Delete';
+import FolderIcon from '@mui/icons-material/Folder';
+import FileIcon from '@mui/icons-material/InsertDriveFile';
+import { Alert, AlertTitle } from '@mui/material';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import { TreeView } from '@mui/x-tree-view/TreeView';
+import { BlobReader, Uint8ArrayWriter, ZipReader } from '@zip.js/zip.js';
+import { enqueueSnackbar } from 'notistack';
+import * as React from 'react';
+import { useDropzone } from 'react-dropzone';
+
+import FileWithPath from '../../lib/FileWithPath';
+import { useFileSystemProvider } from '../FileSystemProvider';
+import ImportFromUrlDialog from './FileSystem/ImportDialog';
+import StyledTreeItem from './FileSystem/StyledTreeItem';
+
+export default function FileSystem() {
+  const { files, unlinkFile, writeFiles } = useFileSystemProvider();
+  const [open, setOpen] = React.useState(false);
+
+  const handleAcceptedFiles = async (acceptedFiles) => {
+    // Font files should be copied to the fonts folder
+    const handledFiles = (
+      await Promise.all(
+        acceptedFiles.map(async (f) => {
+          if (f.name.match(/\.(woff2?|ttf|otf|eot)$/i)) {
+            f = new FileWithPath([f], f.name, {
+              type: 'font',
+              lastModified: f.lastModified,
+              path: 'libraries/' + f.path,
+            }) as FileWithPath;
+          } else if (f.name.match(/\.(zip)$/i)) {
+            const files = await new ZipReader(new BlobReader(f)).getEntries();
+
+            // Remove directories from the list of files
+            return Promise.all(
+              files
+                .filter((f) => {
+                  return f.directory === false;
+                })
+                .map(async (f) => {
+                  const writer = new Uint8ArrayWriter();
+                  const name = f.filename.split('/').pop();
+
+                  return new FileWithPath([await f.getData(writer)], name, {
+                    lastModified: f.lastModDate.getTime(),
+                    path: 'libraries/' + f.filename,
+                  }) as FileWithPath;
+                })
+            );
+          }
+
+          return f;
+        })
+      )
+    ).reduce((prev, curr) => {
+      if (Array.isArray(curr)) {
+        return prev.concat(curr);
+      }
+
+      prev.push(curr);
+
+      return prev;
+    }, []);
+
+    writeFiles(handledFiles).then(() =>
+      enqueueSnackbar('Files uploaded', { variant: 'success' })
+    );
+  };
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDropAccepted: handleAcceptedFiles,
+    noClick: true,
+    noKeyboard: true,
+  });
+
+  const handleClose = () => setOpen(false);
+
+  const handleDelete = (event: React.MouseEvent<HTMLButtonElement>) => {
+    const name = event.currentTarget.dataset.name;
+    if (name) {
+      unlinkFile(name);
+    }
+
+    event.stopPropagation();
+  };
+
+  const createTree = (files: TreeItemStruct[]) => {
+    const tree = [];
+    for (const file of files) {
+      if (file.children.length > 0) {
+        tree.push(
+          <StyledTreeItem
+            key={file.path}
+            nodeId={file.path}
+            labelText={file.name}
+            labelIcon={FolderIcon}
+          >
+            {createTree(file.children)}
+          </StyledTreeItem>
+        );
+      } else {
+        tree.push(
+          <StyledTreeItem
+            key={file.path}
+            nodeId={file.path}
+            labelText={file.name}
+            endLabelAdornment={
+              <IconButton onClick={handleDelete} data-name={file.name}>
+                <DeleteIcon />
+              </IconButton>
+            }
+            labelIcon={FileIcon}
+          />
+        );
+      }
+    }
+    return tree;
+  };
+
+  return (
+    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <Alert severity="info" sx={{ mb: 1 }}>
+        <AlertTitle>File System Manager</AlertTitle>
+        Manage the files of your workspace. Upload fonts, images and libraries.
+      </Alert>
+      <Button variant="contained" onClick={() => setOpen(true)} fullWidth>
+        Import/Upload
+      </Button>
+      <ImportFromUrlDialog
+        open={open}
+        onClose={handleClose}
+        onNewFile={handleAcceptedFiles}
+      />
+
+      <Box
+        sx={{
+          border: isDragActive ? 8 : 0,
+          borderStyle: 'dashed',
+          borderColor: '#ccc',
+          p: 1 + (isDragActive ? 0 : 1),
+          flexGrow: 1,
+          overflowY: 'scroll',
+        }}
+      >
+        <TreeView
+          {...getRootProps()}
+          aria-label="File tree"
+          defaultExpanded={['3']}
+          defaultCollapseIcon={<ArrowDropDownIcon />}
+          defaultExpandIcon={<ArrowRightIcon />}
+          defaultEndIcon={<div style={{ width: 24 }} />}
+          sx={{ height: '100%', overflowY: 'scroll' }}
+        >
+          <input {...getInputProps()} />
+          {createTree(recursiveTree(files))}
+        </TreeView>
+      </Box>
+    </Box>
+  );
+}
+
+type TreeItemStruct = {
+  name: string;
+  children: TreeItemStruct[];
+  path: string;
+};
+
+function recursiveTree(files: FileWithPath[]): TreeItemStruct[] {
+  const tree = [];
+
+  for (const file of files) {
+    // Remove leading slash
+    const path = file.path.replace(/^\//, '').split('/');
+    let current = tree;
+
+    for (const part of path) {
+      if (!current.find((c) => c.name === part)) {
+        current.push({
+          name: part,
+          children: [],
+          path: path.slice(0, path.indexOf(part) + 1).join('/'),
+        });
+      }
+      current = current.find((c) => c.name === part).children;
+    }
+  }
+  return tree;
+}
diff --git a/src/components/Workspace/FileSystem/FileSelector.tsx b/src/components/Workspace/FileSystem/FileSelector.tsx
new file mode 100644
index 0000000..75898c1
--- /dev/null
+++ b/src/components/Workspace/FileSystem/FileSelector.tsx
@@ -0,0 +1,28 @@
+import type { SelectChangeEvent } from '@mui/material';
+import FormControl from '@mui/material/FormControl';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import React from 'react';
+
+import { useFileSystemProvider } from '../../FileSystemProvider';
+
+type Props = {
+  onChange: (event: SelectChangeEvent<string>) => void;
+  selectedFile?: string;
+};
+
+export default function FileSelector({ onChange, selectedFile }: Props) {
+  const { files } = useFileSystemProvider();
+
+  return (
+    <FormControl>
+      <Select fullWidth value={selectedFile || ''} onChange={onChange}>
+        {files.map((file, idx) => (
+          <MenuItem key={idx} value={file.path}>
+            {file.path}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}
diff --git a/src/components/Workspace/FileSystem/ImportDialog.tsx b/src/components/Workspace/FileSystem/ImportDialog.tsx
new file mode 100644
index 0000000..77a360b
--- /dev/null
+++ b/src/components/Workspace/FileSystem/ImportDialog.tsx
@@ -0,0 +1,124 @@
+import CloseIcon from '@mui/icons-material/Close';
+import DownloadIcon from '@mui/icons-material/Download';
+import Box from '@mui/material/Box';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import TextField from '@mui/material/TextField';
+import { enqueueSnackbar } from 'notistack';
+import * as React from 'react';
+import Dropzone from 'react-dropzone';
+
+import FileWithPath from '../../../lib/FileWithPath';
+
+type Props = {
+  onClose: () => void;
+  onNewFile: (files: FileWithPath[]) => void;
+  open: boolean;
+};
+
+export default function ImportFromUrlDialog({
+  onClose,
+  onNewFile,
+  open,
+}: Props) {
+  const [url, setUrl] = React.useState('');
+  const [error, setError] = React.useState('');
+  const handleUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newUrl = event.target.value;
+
+    setUrl(event.target.value);
+
+    // Check if the url is valid
+    if (!newUrl.startsWith('http')) {
+      setError('Invalid URL');
+      return;
+    } else if (error) {
+      setError('');
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      handleUrlImport();
+    }
+  };
+
+  const handleUrlImport = async () => {
+    if (url && !error) {
+      const response = await fetch('__CORSPROXY' + url);
+      if (response.ok) {
+        const filename = url.substring(url.lastIndexOf('/') + 1); // TODO Strip query string
+        onNewFile([new FileWithPath([await response.blob()], filename)]);
+      } else {
+        enqueueSnackbar('Failed to download file', { variant: 'error' });
+      }
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>Upload or import additional files</DialogTitle>
+      <IconButton
+        aria-label="close"
+        onClick={onClose}
+        sx={{
+          position: 'absolute',
+          right: 8,
+          top: 8,
+          color: (theme) => theme.palette.grey[500],
+        }}
+      >
+        <CloseIcon />
+      </IconButton>
+      <DialogContent>
+        <Dropzone onDropAccepted={onNewFile}>
+          {({ getRootProps, getInputProps }) => (
+            <section>
+              <Box
+                {...getRootProps()}
+                sx={{
+                  p: 1,
+                  border: 1,
+                  borderStyle: 'dashed',
+                  borderColor: '#ccc',
+                  backgroundColor: '#eee',
+                  cursor: 'pointer',
+                }}
+              >
+                <input {...getInputProps()} />
+                <p>
+                  You can either drag and drop files here or onto the file tree,
+                  or click here to select files to upload. You can also select
+                  multiple files at once.
+                </p>
+              </Box>
+            </section>
+          )}
+        </Dropzone>
+        <Divider sx={{ my: 2 }} />
+        <TextField
+          label="Import from URL"
+          fullWidth
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <Divider sx={{ height: 28, m: 0.5 }} orientation="vertical" />
+                <IconButton onClick={handleUrlImport}>
+                  <DownloadIcon />
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+          onKeyDown={handleKeyDown}
+          onChange={handleUrlChange}
+          error={!!error}
+          helperText={error}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/Workspace/FileSystem/StyledTreeItem.tsx b/src/components/Workspace/FileSystem/StyledTreeItem.tsx
new file mode 100644
index 0000000..e420832
--- /dev/null
+++ b/src/components/Workspace/FileSystem/StyledTreeItem.tsx
@@ -0,0 +1,111 @@
+import Box from '@mui/material/Box';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import Typography from '@mui/material/Typography';
+import { styled, useTheme } from '@mui/material/styles';
+import {
+  TreeItem,
+  TreeItemProps,
+  treeItemClasses,
+} from '@mui/x-tree-view/TreeItem';
+import * as React from 'react';
+
+declare module 'react' {
+  interface CSSProperties {
+    '--tree-view-color'?: string;
+    '--tree-view-bg-color'?: string;
+  }
+}
+
+type StyledTreeItemProps = TreeItemProps & {
+  bgColor?: string;
+  bgColorForDarkMode?: string;
+  color?: string;
+  colorForDarkMode?: string;
+  labelIcon: React.ElementType<SvgIconProps>;
+  labelText: string;
+  endLabelAdornment?: JSX.Element;
+};
+
+const StyledTreeItemRoot = styled(TreeItem)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  [`& .${treeItemClasses.content}`]: {
+    color: theme.palette.text.secondary,
+    // borderTopRightRadius: theme.spacing(2),
+    // borderBottomRightRadius: theme.spacing(2),
+    paddingRight: theme.spacing(1),
+    fontWeight: theme.typography.fontWeightMedium,
+    '&.Mui-expanded': {
+      fontWeight: theme.typography.fontWeightRegular,
+    },
+    '&:hover': {
+      backgroundColor: theme.palette.action.hover,
+    },
+    '&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused': {
+      backgroundColor: `var(--tree-view-bg-color, ${theme.palette.action.selected})`,
+      color: 'var(--tree-view-color)',
+    },
+    [`& .${treeItemClasses.label}`]: {
+      fontWeight: 'inherit',
+      color: 'inherit',
+    },
+  },
+  [`& .${treeItemClasses.group}`]: {
+    marginLeft: 0,
+    [`& .${treeItemClasses.content}`]: {
+      paddingLeft: theme.spacing(2),
+    },
+  },
+})) as unknown as typeof TreeItem;
+
+const StyledTreeItem = React.forwardRef(function StyledTreeItem(
+  props: StyledTreeItemProps,
+  ref: React.Ref<HTMLLIElement>
+) {
+  const theme = useTheme();
+  const {
+    bgColor,
+    color,
+    endLabelAdornment,
+    labelIcon: LabelIcon,
+    labelText,
+    colorForDarkMode,
+    bgColorForDarkMode,
+    ...other
+  } = props;
+
+  const styleProps = {
+    '--tree-view-color':
+      theme.palette.mode !== 'dark' ? color : colorForDarkMode,
+    '--tree-view-bg-color':
+      theme.palette.mode !== 'dark' ? bgColor : bgColorForDarkMode,
+  };
+
+  return (
+    <StyledTreeItemRoot
+      label={
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            p: 0.5,
+            pr: 0,
+          }}
+        >
+          {LabelIcon && <Box component={LabelIcon} sx={{ mr: 1 }} />}
+          <Typography
+            variant="body2"
+            sx={{ fontWeight: 'inherit', flexGrow: 1 }}
+          >
+            {labelText}
+          </Typography>
+          {endLabelAdornment}
+        </Box>
+      }
+      style={styleProps}
+      {...other}
+      ref={ref}
+    />
+  );
+});
+
+export default StyledTreeItem;
diff --git a/src/components/Workspace/Fonts.tsx b/src/components/Workspace/Fonts.tsx
new file mode 100644
index 0000000..e824512
--- /dev/null
+++ b/src/components/Workspace/Fonts.tsx
@@ -0,0 +1,104 @@
+import DownloadIcon from '@mui/icons-material/Download';
+import LoopIcon from '@mui/icons-material/Loop';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import IconButton from '@mui/material/IconButton';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import { BlobReader, Uint8ArrayWriter, ZipReader } from '@zip.js/zip.js';
+import React from 'react';
+
+import FileWithPath from '../../lib/FileWithPath';
+import { useFileSystemProvider } from '../FileSystemProvider';
+
+const commonLibraries = [
+  {
+    name: 'Liberation Fonts',
+    description:
+      'The Liberation Fonts is font collection which aims to provide document layout compatibility as usage of Times New Roman, Arial, Courier New.',
+    url: 'https://github.com/shantigilbert/liberation-fonts-ttf/archive/refs/heads/master.zip',
+    startPath: 'liberation-fonts-ttf-master/',
+  },
+];
+
+export default function Fonts() {
+  const { writeFiles } = useFileSystemProvider();
+  const [isLoading, setLoading] = React.useState({});
+  const [isAvailable, setAvailable] = React.useState({});
+
+  const handleDownload = async (event: React.MouseEvent<HTMLButtonElement>) => {
+    const url = event.currentTarget.dataset.url;
+    const startPath = event.currentTarget.dataset.startPath;
+
+    setLoading({ ...isLoading, [url]: true });
+
+    const response = await fetch('__CORSPROXY' + url);
+
+    // Unzip the file
+    const zip = await response.blob();
+    const files = await new ZipReader(new BlobReader(zip)).getEntries();
+
+    // Libraries should go into the library folder
+    const movedFiles = await Promise.all(
+      files
+        .filter((f) => f.directory === false)
+        .filter((f) => f.filename.match(/\.(woff2?|ttf|otf|eot)$/i))
+        .map(async (f) => {
+          const writer = new Uint8ArrayWriter();
+          const fileName = f.filename.replace(startPath, '');
+          const name = fileName.split('/').pop();
+
+          return new FileWithPath([await f.getData(writer)], name, {
+            lastModified: f.lastModDate.getTime(),
+            path: '/fonts/' + fileName,
+          }) as FileWithPath;
+        })
+    );
+
+    await writeFiles(movedFiles);
+
+    setAvailable({ ...isAvailable, [url]: true });
+    setLoading({ ...isLoading, [url]: false });
+  };
+
+  const libraryIsAlreadyDownloaded = (lib) => {
+    return isAvailable[lib.url];
+  };
+
+  return (
+    <>
+      <Alert severity="info">
+        <AlertTitle>Libraries</AlertTitle>
+        Select which common libraries to include in your project.
+      </Alert>
+      <List>
+        {commonLibraries.map((lib) => (
+          <ListItem
+            key={lib.name}
+            secondaryAction={
+              isAvailable && (
+                <IconButton
+                  edge="end"
+                  aria-label="download library"
+                  onClick={handleDownload}
+                  disabled={libraryIsAlreadyDownloaded(lib)}
+                  data-url={lib.url}
+                  data-start-path={lib.startPath}
+                >
+                  {isLoading[lib.url] ? (
+                    <LoopIcon sx={{ animation: 'spin 2s linear infinite' }} />
+                  ) : (
+                    <DownloadIcon />
+                  )}
+                </IconButton>
+              )
+            }
+          >
+            <ListItemText primary={lib.name} secondary={lib.description} />
+          </ListItem>
+        ))}
+      </List>
+    </>
+  );
+}
diff --git a/src/components/Workspace/Libraries.tsx b/src/components/Workspace/Libraries.tsx
new file mode 100644
index 0000000..322750e
--- /dev/null
+++ b/src/components/Workspace/Libraries.tsx
@@ -0,0 +1,118 @@
+import DownloadIcon from '@mui/icons-material/Download';
+import LoopIcon from '@mui/icons-material/Loop';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import IconButton from '@mui/material/IconButton';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import { BlobReader, Uint8ArrayWriter, ZipReader } from '@zip.js/zip.js';
+import React from 'react';
+
+import FileWithPath from '../../lib/FileWithPath';
+import { useFileSystemProvider } from '../FileSystemProvider';
+
+const commonLibraries = [
+  {
+    name: 'BOSL2',
+    description: 'A library for OpenSCAD that includes a number of utilities.',
+    url: 'https://github.com/BelfrySCAD/BOSL2/archive/refs/heads/master.zip',
+    startPath: 'BOSL2-master',
+  },
+  {
+    name: 'BOSL',
+    description: 'A library for OpenSCAD that includes a number of utilities.',
+    url: 'https://github.com/revarbat/BOSL/archive/refs/tags/v1.0.3.zip',
+    startPath: 'BOSL-1.0.3',
+  },
+  {
+    name: 'Round-Anything',
+    description:
+      'A set of OpenSCAD utilities for adding radii and fillets, that embodies a robust approach to developing OpenSCAD parts.',
+    url: 'https://github.com/Irev-Dev/Round-Anything/archive/refs/tags/1.0.4.zip',
+    startPath: 'Round-Anything-1.0.4',
+  },
+];
+
+export default function Libraries() {
+  const { writeFiles } = useFileSystemProvider();
+  const [isLoading, setLoading] = React.useState({});
+  const [isAvailable, setAvailable] = React.useState({});
+
+  const handleDownload = async (event: React.MouseEvent<HTMLButtonElement>) => {
+    const url = event.currentTarget.dataset.url;
+    const startPath = event.currentTarget.dataset.startPath;
+    const path = event.currentTarget.dataset.path;
+
+    setLoading({ ...isLoading, [url]: true });
+
+    const response = await fetch('__CORSPROXY' + url);
+
+    // Unzip the file
+    const zip = await response.blob();
+    const files = await new ZipReader(new BlobReader(zip)).getEntries();
+
+    // Libraries should go into the library folder
+    const movedFiles = await Promise.all(
+      files
+        .filter((f) => f.directory === false)
+        .map(async (f) => {
+          const writer = new Uint8ArrayWriter();
+          const fileName = path + f.filename.replace(startPath, '');
+          const name = fileName.split('/').pop();
+
+          return new FileWithPath([await f.getData(writer)], name, {
+            lastModified: f.lastModDate.getTime(),
+            path: 'libraries/' + fileName,
+          }) as FileWithPath;
+        })
+    );
+
+    await writeFiles(movedFiles);
+
+    setAvailable({ ...isAvailable, [url]: true });
+    setLoading({ ...isLoading, [url]: false });
+  };
+
+  const libraryIsAlreadyDownloaded = (lib) => {
+    return isAvailable[lib.url];
+  };
+
+  return (
+    <>
+      <Alert severity="info">
+        <AlertTitle>Libraries</AlertTitle>
+        Select which common libraries to include in your project. You can use
+        your own through the file system manager.
+      </Alert>
+      <List>
+        {commonLibraries.map((lib) => (
+          <ListItem
+            key={lib.name}
+            secondaryAction={
+              isAvailable && (
+                <IconButton
+                  edge="end"
+                  aria-label="download library"
+                  onClick={handleDownload}
+                  disabled={libraryIsAlreadyDownloaded(lib)}
+                  data-url={lib.url}
+                  data-path={lib.name}
+                  data-start-path={lib.startPath}
+                >
+                  {isLoading[lib.url] ? (
+                    <LoopIcon sx={{ animation: 'spin 2s linear infinite' }} />
+                  ) : (
+                    <DownloadIcon />
+                  )}
+                </IconButton>
+              )
+            }
+          >
+            <ListItemText primary={lib.name} secondary={lib.description} />
+          </ListItem>
+        ))}
+      </List>
+    </>
+  );
+}
diff --git a/src/components/Workspace/Preview.tsx b/src/components/Workspace/Preview.tsx
new file mode 100644
index 0000000..9b35568
--- /dev/null
+++ b/src/components/Workspace/Preview.tsx
@@ -0,0 +1,72 @@
+import { CircularProgress, useTheme } from '@mui/material';
+import React, { useMemo } from 'react';
+import { StlViewer } from 'react-stl-viewer';
+
+import { useOpenSCADProvider } from '../OpenscadWorkerProvider';
+
+const stlViewerStyle = {
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+};
+
+export default function Preview() {
+  const { previewFile, isRendering } = useOpenSCADProvider();
+  const theme = useTheme();
+
+  const previewUrl = useMemo(() => {
+    if (!previewFile) {
+      return null;
+    }
+
+    return URL.createObjectURL(previewFile);
+  }, [previewFile]);
+
+  const loading = (
+    <div
+      style={{
+        zIndex: 999,
+        position: 'absolute',
+        height: '100%',
+        width: '100%',
+        backgroundColor: 'rgba(255,255,255,0.5)',
+      }}
+    >
+      <div
+        style={{
+          top: '50%',
+          left: '50%',
+          position: 'absolute',
+          transform: 'translate(-50%,-50%)',
+        }}
+      >
+        <CircularProgress />
+      </div>
+    </div>
+  );
+
+  if (!previewUrl && isRendering) {
+    return loading;
+  }
+
+  if (!previewUrl) {
+    return null;
+  }
+
+  return (
+    <div style={{ height: '100%' }}>
+      {isRendering && loading}
+      <StlViewer
+        style={stlViewerStyle}
+        orbitControls
+        shadows
+        showAxes
+        modelProps={{
+          color: theme.palette.primary.main,
+        }}
+        url={previewUrl}
+      />
+    </div>
+  );
+}
diff --git a/src/components/Workspace/Sidebar.tsx b/src/components/Workspace/Sidebar.tsx
new file mode 100644
index 0000000..ea2acee
--- /dev/null
+++ b/src/components/Workspace/Sidebar.tsx
@@ -0,0 +1,52 @@
+import CodeIcon from '@mui/icons-material/Code';
+import FolderIcon from '@mui/icons-material/Folder';
+import FontDownloadIcon from '@mui/icons-material/FontDownload';
+import LibraryBooksIcon from '@mui/icons-material/LibraryBooks';
+import TuneIcon from '@mui/icons-material/Tune';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import React from 'react';
+
+import { EditorMode } from '../Workspace';
+
+type Props = {
+  onChange: (mode: EditorMode) => void;
+  mode: string;
+};
+
+export default function Sidebar({ onChange, mode }: Props) {
+  const handleMode = (
+    event: React.MouseEvent<HTMLElement>,
+    newMode: string
+  ) => {
+    if (newMode !== null) {
+      onChange(newMode as EditorMode);
+    }
+  };
+
+  return (
+    <ToggleButtonGroup
+      value={mode}
+      orientation="vertical"
+      exclusive
+      onChange={handleMode}
+      aria-label="text alignment"
+    >
+      <ToggleButton value="editor" aria-label="Script Editor">
+        <CodeIcon />
+      </ToggleButton>
+      <ToggleButton value="customizer" aria-label="Customizer">
+        <TuneIcon />
+      </ToggleButton>
+      <ToggleButton value="file" aria-label="File Manager">
+        <FolderIcon />
+      </ToggleButton>
+      <ToggleButton value="libraries" aria-label="Libraries">
+        <LibraryBooksIcon />
+      </ToggleButton>
+      <ToggleButton value="fonts" aria-label="Fonts">
+        <FontDownloadIcon />
+      </ToggleButton>
+    </ToggleButtonGroup>
+  );
+}
diff --git a/src/hooks/useImport.ts b/src/hooks/useImport.ts
new file mode 100644
index 0000000..80ff8f0
--- /dev/null
+++ b/src/hooks/useImport.ts
@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+
+import { useFileSystemProvider } from '../components/FileSystemProvider';
+import FileWithPath from '../lib/FileWithPath';
+import fetcha from '../lib/fetcha';
+
+export default function useImport(url?: string) {
+  const { files, writeFiles } = useFileSystemProvider();
+  const [isLoading, setIsLoading] = useState<boolean>(!!url);
+  const [error, setError] = useState<Error | null>();
+
+  useEffect(() => {
+    (async () => {
+      setIsLoading(true);
+
+      try {
+        if (!url) {
+          await writeFiles([
+            new FileWithPath(['cube([10, 10, 10]);'], 'cube.scad'),
+          ]);
+          return;
+        }
+
+        // Check if we have it already in our cache
+        // TODO
+
+        const files = await fetcha(url);
+        const downloadedFiles = await Promise.all(
+          files.map(async (file) => {
+            const response = await fetch(file.url);
+            const content = await response.arrayBuffer();
+            const name = file.name.split('?')[0]; // Strip possible query string from file name
+
+            // Check if the file extension is missing from the file name. If so,
+            // try to guess it from the content type.
+            // TODO
+
+            return new FileWithPath([content], name, {
+              path: name,
+            });
+          })
+        );
+
+        await writeFiles(downloadedFiles);
+      } catch (err) {
+        setError(err);
+      } finally {
+        setIsLoading(false);
+      }
+    })();
+  }, [url]);
+
+  return { error, files, isLoading };
+}
diff --git a/src/hooks/useImport.tsx b/src/hooks/useImport.tsx
deleted file mode 100644
index a95427b..0000000
--- a/src/hooks/useImport.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import fetcha, { FetchaFile } from '../lib/fetcha';
-
-export default function useImport(url?: string) {
-  const [files, setFiles] = useState<FetchaFile[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(!!url);
-  const [error, setError] = useState<Error | null>();
-
-  useEffect(() => {
-    if (url) {
-      (async () => {
-        setIsLoading(true);
-
-        try {
-          const files = await fetcha(url);
-          setFiles(files);
-        } catch (err) {
-          setError(err);
-        } finally {
-          setIsLoading(false);
-        }
-      })();
-    }
-  }, [url]);
-
-  return { error, files, isLoading };
-}
diff --git a/src/index.tsx b/src/index.tsx
index 2d8eaa8..4bc3983 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -8,6 +8,7 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 
 import App from './App';
+import FileSystemProvider from './components/FileSystemProvider';
 import Layout from './components/Layout';
 import OpenscadWorkerProvider from './components/OpenscadWorkerProvider';
 
@@ -15,11 +16,13 @@ createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <CssBaseline />
     <SnackbarProvider />
-    <OpenscadWorkerProvider>
-      <Layout title="OpenSCAD Web GUI">
-        <App />
-      </Layout>
-    </OpenscadWorkerProvider>
+    <FileSystemProvider>
+      <OpenscadWorkerProvider>
+        <Layout title="OpenSCAD Web GUI">
+          <App />
+        </Layout>
+      </OpenscadWorkerProvider>
+    </FileSystemProvider>
   </React.StrictMode>
 );
 
diff --git a/src/lib/FileWithPath.ts b/src/lib/FileWithPath.ts
new file mode 100644
index 0000000..e6b4200
--- /dev/null
+++ b/src/lib/FileWithPath.ts
@@ -0,0 +1,13 @@
+export default class FileWithPath extends File {
+  public path?: string;
+
+  constructor(
+    fileBits: BlobPart[],
+    fileName: string,
+    options?: FilePropertyBag & { path?: string }
+  ) {
+    super(fileBits, fileName, options);
+
+    this.path = options?.path || fileName;
+  }
+}
diff --git a/src/lib/executeWorkerJob.ts b/src/lib/executeWorkerJob.ts
new file mode 100644
index 0000000..53020ac
--- /dev/null
+++ b/src/lib/executeWorkerJob.ts
@@ -0,0 +1,57 @@
+import { WorkerMessage, WorkerResponseMessage } from '../worker/types';
+
+type PromiseMapItem = {
+  resolve: (value: WorkerResponseMessage) => void;
+  reject: (reason?: unknown) => void;
+};
+
+const worker = new Worker('./worker.js', { type: 'module' });
+const promiseMap: Record<string, PromiseMapItem> = {};
+
+worker.addEventListener(
+  'message',
+  (event: MessageEvent<WorkerResponseMessage>) => {
+    const { id } = event.data;
+    const { resolve, reject } = promiseMap[id];
+
+    if (!resolve || !reject) {
+      throw new Error('Unknown message id');
+    }
+
+    if (event.data.err) {
+      reject(event.data.err);
+    } else {
+      resolve(event.data);
+    }
+
+    // Remove it from the promise map
+    promiseMap[id] = null;
+    delete promiseMap[id];
+  }
+);
+
+worker.addEventListener('error', (event) => {
+  // reject(event);
+  console.log(event); // TODO
+});
+
+worker.addEventListener('unhandledrejection', function (event) {
+  // reject(event);
+  console.log(event); // TODO
+});
+
+export default async function executeWorkerJob(
+  message: WorkerMessage
+): Promise<WorkerResponseMessage> {
+  const id = Math.random().toString(36).substring(2, 9);
+  const promise = new Promise<WorkerResponseMessage>((resolve, reject) => {
+    promiseMap[id] = { resolve, reject };
+  });
+
+  worker.postMessage({
+    id,
+    ...message,
+  });
+
+  return promise;
+}
diff --git a/src/lib/fetcha.ts b/src/lib/fetcha.ts
index 9807543..abe0e8c 100644
--- a/src/lib/fetcha.ts
+++ b/src/lib/fetcha.ts
@@ -9,16 +9,20 @@ export type FetchaFile = {
 
 export default async function fetcha(url: string): Promise<FetchaFile[]> {
   // Depending on the host of the url, we will use a different fetch method
-  // to get the data.
+  // to extract the download url(s).
   const host = new URL(url).host;
+  const excludeStlRegex = /\.(?!stl)(?!3mf).*$/;
 
   switch (host) {
+    // Printables
     case 'printables.com':
     case 'www.printables.com':
-      return await printablesComFetcha(url, '.scad');
+      return await printablesComFetcha(url, excludeStlRegex);
+
+    // Thingiverse
     case 'thingiverse.com':
     case 'www.thingiverse.com':
-      return await thingiverseComFetcha(url, '.scad');
+      return await thingiverseComFetcha(url, excludeStlRegex);
     default: {
       const urlParts = url.split('/');
 
diff --git a/src/lib/fetcha/printables.com.ts b/src/lib/fetcha/printables.com.ts
index 231eeb2..49f5ff1 100644
--- a/src/lib/fetcha/printables.com.ts
+++ b/src/lib/fetcha/printables.com.ts
@@ -9,7 +9,7 @@ type Stl = {
 
 export default async function printablesComFetcha(
   url: string,
-  fileNameFilter?: string
+  fileNameFilter?: { [Symbol.match](string: string): RegExpMatchArray | null }
 ): Promise<FetchaFile[]> {
   // Url is expected to look like https://www.printables.com/model/123456-some-optional-string-after
   // We need to extract the id from the url, which is 123456 in this case. The url could also contain
@@ -33,10 +33,10 @@ export default async function printablesComFetcha(
       },
       referrer: 'https://www.printables.com/',
       body: JSON.stringify({
-        operationName: 'PrintProfile',
-        variables: { id, loadPurchase: false },
+        operationName: 'PrintFiles',
+        variables: { id },
         query:
-          'query PrintProfile($id: ID!, $loadPurchase: Boolean!) {\n  print(id: $id) {\n    ...PrintDetailFragment\n    price\n    user {\n      billingAccountType\n      lowestTierPrice\n      clubPrints {\n        ...PrintListFragment\n        __typename\n      }\n      __typename\n    }\n    purchaseDate @include(if: $loadPurchase)\n    paidPrice @include(if: $loadPurchase)\n    __typename\n  }\n}\n\nfragment PrintDetailFragment on PrintType {\n  id\n  slug\n  name\n  authorship\n  remixDescription\n  premium\n  price\n  excludeCommercialUsage\n  eduProject {\n    id\n    subject {\n      id\n      name\n      slug\n      __typename\n    }\n    language {\n      id\n      name\n      __typename\n    }\n    free\n    timeDifficulty\n    audienceAge\n    complexity\n    equipment {\n      id\n      name\n      __typename\n    }\n    suitablePrinters {\n      id\n      name\n      __typename\n    }\n    organisation\n    authors\n    targetGroupFocus\n    knowledgeAndSkills\n    objectives\n    equipmentDescription\n    timeSchedule\n    workflow\n    approved\n    datePublishRequested\n    __typename\n  }\n  user {\n    ...AvatarUserFragment\n    isFollowedByMe\n    canBeFollowed\n    email\n    publishedPrintsCount\n    premiumPrintsCount\n    designer\n    stripeAccountActive\n    membership {\n      currentTier {\n        id\n        name\n        benefits {\n          id\n          title\n          benefitType\n          description\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n  ratingAvg\n  myRating\n  ratingCount\n  description\n  category {\n    id\n    path {\n      id\n      name\n      storeName\n      description\n      storeDescription\n      __typename\n    }\n    __typename\n  }\n  modified\n  firstPublish\n  datePublished\n  dateCreatedThingiverse\n  nsfw\n  summary\n  shareCount\n  likesCount\n  makesCount\n  liked\n  printDuration\n  numPieces\n  weight\n  nozzleDiameters\n  usedMaterial\n  layerHeights\n  materials {\n    id\n    name\n    __typename\n  }\n  dateFeatured\n  downloadCount\n  displayCount\n  filesCount\n  privateCollectionsCount\n  publicCollectionsCount\n  pdfFilePath\n  commentCount\n  userGcodeCount\n  remixCount\n  canBeRated\n  printer {\n    id\n    name\n    __typename\n  }\n  image {\n    ...ImageSimpleFragment\n    __typename\n  }\n  images {\n    ...ImageSimpleFragment\n    __typename\n  }\n  tags {\n    name\n    id\n    __typename\n  }\n  thingiverseLink\n  filesType\n  license {\n    id\n    disallowRemixing\n    __typename\n  }\n  remixParents {\n    ...remixParentDetail\n    __typename\n  }\n  gcodes {\n    id\n    name\n    fileSize\n    filePreviewPath\n    __typename\n  }\n  stls {\n    id\n    name\n    fileSize\n    filePreviewPath\n    __typename\n  }\n  slas {\n    id\n    name\n    fileSize\n    filePreviewPath\n    __typename\n  }\n  ...LatestCompetitionResult\n  competitions {\n    id\n    name\n    slug\n    description\n    isOpen\n    __typename\n  }\n  competitionResults {\n    placement\n    competition {\n      id\n      name\n      slug\n      printsCount\n      openFrom\n      openTo\n      __typename\n    }\n    __typename\n  }\n  __typename\n}\n\nfragment AvatarUserFragment on UserType {\n  id\n  publicUsername\n  avatarFilePath\n  handle\n  company\n  verified\n  badgesProfileLevel {\n    profileLevel\n    __typename\n  }\n  __typename\n}\n\nfragment ImageSimpleFragment on PrintImageType {\n  id\n  filePath\n  rotation\n  __typename\n}\n\nfragment remixParentDetail on PrintRemixType {\n  id\n  parentPrintId\n  parentPrintName\n  parentPrintAuthor {\n    id\n    slug\n    publicUsername\n    company\n    verified\n    handle\n    __typename\n  }\n  parentPrint {\n    id\n    name\n    slug\n    datePublished\n    image {\n      ...ImageSimpleFragment\n      __typename\n    }\n    premium\n    authorship\n    license {\n      id\n      name\n      disallowRemixing\n      __typename\n    }\n    eduProject {\n      id\n      __typename\n    }\n    __typename\n  }\n  url\n  urlAuthor\n  urlImage\n  urlTitle\n  urlLicense {\n    id\n    name\n    disallowRemixing\n    __typename\n  }\n  urlLicenseText\n  __typename\n}\n\nfragment LatestCompetitionResult on PrintType {\n  latestCompetitionResult {\n    placement\n    competitionId\n    __typename\n  }\n  __typename\n}\n\nfragment PrintListFragment on PrintType {\n  id\n  name\n  slug\n  ratingAvg\n  likesCount\n  liked\n  datePublished\n  dateFeatured\n  firstPublish\n  downloadCount\n  category {\n    id\n    path {\n      id\n      name\n      __typename\n    }\n    __typename\n  }\n  modified\n  image {\n    ...ImageSimpleFragment\n    __typename\n  }\n  nsfw\n  premium\n  price\n  user {\n    ...AvatarUserFragment\n    __typename\n  }\n  ...LatestCompetitionResult\n  __typename\n}',
+          'query PrintFiles($id: ID!) {  print(id: $id) {    id    authorship    remixDescription    premium    price    user {      id      handle      __typename    }    image {      ...ImageSimpleFragment      __typename    }    images {      ...ImageSimpleFragment      __typename    }    eduProject {      id      free      __typename    }    gcodes {      id      name      folder      note      filePreviewPath      fileSize      created      nozzleDiameter      printDuration      layerHeight      material {        id        name        __typename      }      weight      printer {        id        name        __typename      }      excludeFromTotalSum      __typename    }    stls {      id      name      folder      note      created      fileSize      filePreviewPath      __typename    }    slas {      id      name      folder      note      created      fileSize      filePreviewPath      printDuration      layerHeight      usedMaterial      expTime      firstExpTime      printer {        id        name        __typename      }      __typename    }    otherFiles {      id      name      folder      note      created      fileSize      __typename    }    downloadPacks {      id      name      fileSize      fileType      __typename    }    license {      id      name      content      __typename    }    thingiverseLink    filesType    remixParents {      ...remixParentDetail      __typename    }    __typename  }}fragment ImageSimpleFragment on PrintImageType {  id  filePath  rotation  __typename}fragment remixParentDetail on PrintRemixType {  id  parentPrintId  parentPrintName  parentPrintAuthor {    id    slug    publicUsername    company    verified    handle    __typename  }  parentPrint {    id    name    slug    datePublished    image {      ...ImageSimpleFragment      __typename    }    premium    authorship    license {      id      name      disallowRemixing      __typename    }    eduProject {      id      __typename    }    __typename  }  url  urlAuthor  urlImage  urlTitle  urlLicense {    id    name    disallowRemixing    __typename  }  urlLicenseText  __typename}',
       }),
       method: 'POST',
       mode: 'cors',
@@ -53,14 +53,24 @@ export default async function printablesComFetcha(
   const printProfile = await printProfileResponse.json();
 
   // `stls` cotains an array of files available at a Printables.com model
-  if (!printProfile?.data?.print?.stls?.length) {
+  if (
+    !printProfile?.data?.print?.stls?.length &&
+    !printProfile?.data?.print?.otherFiles?.length
+  ) {
     throw new Error('No files found');
   }
 
   // Iterate the stls and start getting the download links for them
-  const downloadLinkPromises = printProfile.data.print.stls
-    .filter((stl) => stl.name.match(fileNameFilter || '')) // Filter out files that don't match the filter
-    .map((stl) => addDownloadLink(stl, id));
+  const downloadLinkPromises = [
+    ...printProfile.data.print.stls,
+    ...printProfile.data.print.otherFiles,
+  ]
+    .filter((stl) => {
+      return stl.name.match(fileNameFilter || '');
+    }) // Filter out files that don't match the filter
+    .map((stl) =>
+      addDownloadLink(stl, id, stl.__typename === 'STLType' ? 'stl' : 'other')
+    );
 
   // Wait for all the download links to be fetched
   const downloadLinks = await Promise.all(downloadLinkPromises);
@@ -68,7 +78,11 @@ export default async function printablesComFetcha(
   return downloadLinks;
 }
 
-async function addDownloadLink(stl: Stl, printId: number): Promise<FetchaFile> {
+async function addDownloadLink(
+  stl: Stl,
+  printId: number,
+  fileType: string
+): Promise<FetchaFile> {
   const response = await fetch(
     `__CORSPROXY${'https://api.printables.com/graphql/'}`,
     {
@@ -82,7 +96,7 @@ async function addDownloadLink(stl: Stl, printId: number): Promise<FetchaFile> {
         operationName: 'GetDownloadLink',
         variables: {
           id: stl.id,
-          fileType: 'stl', // It doesn't matter if we use `stl` and download a .scad file
+          fileType,
           printId,
           source: 'model_detail',
         },
diff --git a/src/lib/fetcha/thingiverse.com.ts b/src/lib/fetcha/thingiverse.com.ts
index 52fb75c..721c314 100644
--- a/src/lib/fetcha/thingiverse.com.ts
+++ b/src/lib/fetcha/thingiverse.com.ts
@@ -2,7 +2,7 @@ import { FetchaFile } from '../fetcha';
 
 export default async function thingiverseComFetcha(
   url: string,
-  fileNameFilter?: string
+  fileNameFilter?: { [Symbol.match](string: string): RegExpMatchArray | null }
 ): Promise<FetchaFile[]> {
   // Url is expected to look like `https://www.thingiverse.com/thing:2523187`.
   // We need to extract the id from the url, which is `2523187` in this case.
diff --git a/src/lib/openSCAD/execute.ts b/src/lib/openSCAD/execute.ts
index 7a6116a..c6e92ae 100644
--- a/src/lib/openSCAD/execute.ts
+++ b/src/lib/openSCAD/execute.ts
@@ -3,56 +3,11 @@ import {
   OpenSCADWorkerResponseData,
   WorkerMessage,
   WorkerMessageType,
-  WorkerResponseMessage,
 } from '../../worker/types';
+import FileWithPath from '../FileWithPath';
+import executeWorkerJob from '../executeWorkerJob';
 
 type Output = Omit<OpenSCADWorkerResponseData, 'output'> & { output: File };
-type PromiseMapItem = {
-  resolve: (value: Output | PromiseLike<Output>) => void;
-  reject: (reason?: any) => void;
-  type: WorkerMessageType;
-};
-
-const worker = new Worker('./worker.js', { type: 'module' });
-const promiseMap: Record<string, PromiseMapItem> = {};
-
-worker.addEventListener(
-  'message',
-  (event: MessageEvent<WorkerResponseMessage>) => {
-    const { id } = event.data;
-    const { resolve, reject } = promiseMap[id];
-
-    if (!resolve || !reject) {
-      throw new Error('Unknown message id');
-    }
-
-    if (event.data.err) {
-      reject(event.data.err);
-    } else {
-      if (event.data.type === WorkerMessageType.PREVIEW) {
-        const data = event.data.data as OpenSCADWorkerResponseData;
-
-        resolve({
-          ...data,
-          output: new File([data.output], 'export.' + data.fileType),
-        });
-      }
-    }
-
-    // Remove it from the promise map
-    delete promiseMap[id];
-  }
-);
-
-worker.addEventListener('error', (event) => {
-  // reject(event);
-  console.log(event); // TODO
-});
-
-worker.addEventListener('unhandledrejection', function (event) {
-  // reject(event);
-  console.log(event); // TODO
-});
 
 export default async function executeOpenSCAD(
   type: WorkerMessageType,
@@ -60,13 +15,7 @@ export default async function executeOpenSCAD(
   fileType: string,
   params: OpenSCADWorkerMessageData['params']
 ): Promise<Output> {
-  const id = Math.random().toString(36).substring(2, 9);
-  const promise = new Promise<Output>((resolve, reject) => {
-    promiseMap[id] = { resolve, reject, type };
-  });
-
   const message: WorkerMessage = {
-    id,
     type,
     data: {
       code,
@@ -75,8 +24,16 @@ export default async function executeOpenSCAD(
     },
   };
 
-  console.log('Sending message to worker', params);
-  worker.postMessage(message);
+  const response = await executeWorkerJob(message);
+  const data = response.data as OpenSCADWorkerResponseData;
+  let output: FileWithPath;
 
-  return promise;
+  if (data.output) {
+    output = new FileWithPath([data.output], 'output.stl');
+  }
+
+  return {
+    ...data,
+    output,
+  };
 }
diff --git a/src/lib/openSCAD/parseParameter.ts b/src/lib/openSCAD/parseParameter.ts
index d4d1249..68b62e4 100644
--- a/src/lib/openSCAD/parseParameter.ts
+++ b/src/lib/openSCAD/parseParameter.ts
@@ -114,7 +114,9 @@ export default function parseParameters(script: string): Parameter[] {
             .trim()
             .split(',')
             .map((option) => {
-              let [value, label] = option.trim().split(':');
+              const parts = option.trim().split(':');
+              let value = parts[0];
+              const label = parts[1];
               if (typeAndValue.type === 'number') {
                 value = parseFloat(value);
               }
diff --git a/src/worker.mts b/src/worker.mts
index 869ab56..4b8bbb3 100644
--- a/src/worker.mts
+++ b/src/worker.mts
@@ -28,6 +28,27 @@ onmessage = async (event: MessageEvent<WorkerMessage>) => {
         );
         break;
 
+      // Users want to read a file from OpenSCAD file system
+      case WorkerMessageType.FS_READ:
+        response = await openSCAD.readFile(
+          message.data as FileSystemWorkerMessageData
+        );
+        break;
+
+      // Users want to write a file to OpenSCAD file system
+      case WorkerMessageType.FS_WRITE:
+        response = await openSCAD.writeFile(
+          message.data as FileSystemWorkerMessageData
+        );
+        break;
+
+      // Users want to write a file to OpenSCAD file system
+      case WorkerMessageType.FS_UNLINK:
+        response = await openSCAD.unlinkFile(
+          message.data as FileSystemWorkerMessageData
+        );
+        break;
+
       default:
         throw new Error('Unknown message type');
     }
@@ -40,7 +61,7 @@ onmessage = async (event: MessageEvent<WorkerMessage>) => {
   } catch (err) {
     // https://stackoverflow.com/a/40081158/1706846
     setTimeout(function () {
-      postMessage({ id: message.id, error: err });
+      postMessage({ id: message.id, err });
     });
   }
 };
diff --git a/src/worker/openSCAD.ts b/src/worker/openSCAD.ts
index 9f9b2d6..8b23619 100644
--- a/src/worker/openSCAD.ts
+++ b/src/worker/openSCAD.ts
@@ -1,3 +1,4 @@
+import FileWithPath from '../lib/FileWithPath.js';
 import OpenSCAD from '../vendor/openscad-wasm/openscad.js';
 import {
   FileSystemWorkerMessageData,
@@ -6,18 +7,68 @@ import {
 } from './types';
 
 class OpenSCADWrapper {
-  instance: Promise<OpenSCAD> | OpenSCAD;
   log = {
     stdErr: [],
     stdOut: [],
   };
 
-  constructor() {
-    this.instance = OpenSCAD({
+  files: FileWithPath[] = [];
+
+  async getInstance(): Promise<OpenSCAD> {
+    const instance = await OpenSCAD({
       noInitialRun: true,
       print: this.logger('stdOut'),
       printErr: this.logger('stdErr'),
     });
+
+    // Make sure the root directory exists
+    this.createDirectoryRecusive(instance, 'fonts');
+
+    // Write the font.conf file
+    instance.FS.writeFile(
+      '/fonts/fonts.conf',
+      `<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE fontconfig SYSTEM "urn:fontconfig:fonts.dtd">
+<fontconfig></fontconfig>`
+    );
+
+    for (const file of this.files) {
+      // Make sure the directory of the file exists
+      const path = file.path.split('/');
+      path.pop();
+      const dir = path.join('/');
+
+      if (dir && !this.fileExists(instance, dir)) {
+        this.createDirectoryRecusive(instance, dir);
+      }
+
+      const content = await file.arrayBuffer();
+      instance.FS.writeFile(file.path, new Int8Array(content));
+    }
+
+    return instance;
+  }
+
+  fileExists(instance, path: string) {
+    try {
+      instance.FS.stat(path);
+      return true;
+    } catch (err) {
+      return false;
+    }
+  }
+
+  createDirectoryRecusive(instance, path: string) {
+    const parts = path.split('/');
+    let currentPath = '';
+
+    for (const part of parts) {
+      currentPath += '/' + part;
+
+      if (!this.fileExists(instance, currentPath)) {
+        instance.FS.mkdir(currentPath);
+      }
+    }
   }
 
   logger = (type) => (text: string) => {
@@ -32,10 +83,6 @@ class OpenSCADWrapper {
   async exportFile(
     data: OpenSCADWorkerMessageData
   ): Promise<OpenSCADWorkerResponseData> {
-    if (this.instance instanceof Promise) {
-      this.instance = await this.instance;
-    }
-
     const parameters = data.params.map(({ name, type, value }) => {
       if (type === 'string' && typeof value === 'string') {
         value = this.escapeShell(value);
@@ -48,6 +95,11 @@ class OpenSCADWrapper {
       return `-D${name}=${value}`;
     });
 
+    parameters.push('--export-format=binstl');
+    parameters.push(`--enable=manifold`);
+    parameters.push(`--enable=fast-csg`);
+    parameters.push(`--enable=lazy-union`);
+
     return await this.executeOpenscad(data.code, data.fileType, parameters);
   }
 
@@ -59,10 +111,6 @@ class OpenSCADWrapper {
   async preview(
     data: OpenSCADWorkerMessageData
   ): Promise<OpenSCADWorkerResponseData> {
-    if (this.instance instanceof Promise) {
-      this.instance = await this.instance;
-    }
-
     const parameters = data.params
       .map(({ name, type, value }) => {
         if (type === 'string' && typeof value === 'string') {
@@ -82,10 +130,44 @@ class OpenSCADWrapper {
     parameters.push(`--enable=manifold`);
     parameters.push(`--enable=fast-csg`);
     parameters.push(`--enable=lazy-union`);
+    parameters.push('--enable=roof');
 
     return await this.executeOpenscad(data.code, data.fileType, parameters);
   }
 
+  async writeFile(data: FileSystemWorkerMessageData) {
+    // XXX Because of a bug I haven't figured out yet, where OpenSCAD would throw
+    // a number as an error, we cannot use a persistent instance of OpenSCAD. Instead,
+    // we have to create a new instance every time we want to use OpenSCAD. That is
+    // why the files are stored in this class, instead of written to the FS of OpenSCAD.
+
+    this.files = this.files.filter((file) => file.name !== data.path);
+    this.files.push(data.content);
+
+    if (!data.content.path) {
+      data.content.path = data.path;
+    }
+
+    return true; // TODO `boolean` might not be the best thing to return here
+  }
+
+  async readFile(
+    data: FileSystemWorkerMessageData
+  ): Promise<FileSystemWorkerMessageData> {
+    const found = this.files.find((file) => file.name === data.path);
+
+    return {
+      path: data.path,
+      content: found,
+    };
+  }
+
+  async unlinkFile(data: FileSystemWorkerMessageData) {
+    this.files = this.files.filter((file) => file.name !== data.path);
+
+    return true; // TODO `boolean` might not be the best thing to return here
+  }
+
   /**
    *
    * @param code Code for the OpenSCAD input file
@@ -106,23 +188,28 @@ class OpenSCADWrapper {
 
     const inputFile = '/input.scad';
     const outputFile = '/out.' + fileType;
+    const instance = await this.getInstance();
 
     // Write the code to a file
-    this.instance.FS.writeFile(inputFile, code);
+    instance.FS.writeFile(inputFile, code);
 
     const args = [inputFile, '-o', outputFile, ...parameters];
     let exitCode;
     let output;
 
     try {
-      exitCode = this.instance.callMain(args);
+      exitCode = instance.callMain(args);
     } catch (error) {
-      throw new Error('OpenSCAD exited with an error: ' + error.message);
+      throw new Error(
+        'OpenSCAD exited with an error: ' +
+          (error.message ? error.message : error)
+      );
     }
 
     if (exitCode === 0) {
       try {
-        output = this.instance.FS.readFile(outputFile);
+        output = instance.FS.readFile(outputFile);
+        instance.FS.unlink(outputFile);
       } catch (error) {
         throw new Error('OpenSCAD cannot read created file: ' + error.message);
       }
diff --git a/src/worker/types.ts b/src/worker/types.ts
index 7c03d54..46dd340 100644
--- a/src/worker/types.ts
+++ b/src/worker/types.ts
@@ -1,13 +1,20 @@
+import FileWithPath from '../lib/FileWithPath';
 import { Parameter } from '../lib/openSCAD/parseParameter';
 
 export const enum WorkerMessageType {
   PREVIEW = 'preview',
   EXPORT = 'export',
+  FS_READ = 'fs.read',
+  FS_WRITE = 'fs.write',
+  FS_UNLINK = 'fs.unlink',
 }
 
 type WorkerMessageDataMap = {
   [WorkerMessageType.PREVIEW]: OpenSCADWorkerMessageData;
   [WorkerMessageType.EXPORT]: OpenSCADWorkerMessageData;
+  [WorkerMessageType.FS_READ]: FileSystemWorkerMessageData;
+  [WorkerMessageType.FS_WRITE]: FileSystemWorkerMessageData;
+  [WorkerMessageType.FS_UNLINK]: FileSystemWorkerMessageData;
 };
 
 export type WorkerMessage = {
@@ -19,7 +26,7 @@ export type WorkerMessage = {
 export type WorkerResponseMessage = {
   id: string | number;
   type: WorkerMessageType;
-  data: OpenSCADWorkerResponseData;
+  data: OpenSCADWorkerResponseData | FileSystemWorkerMessageData;
   err?: Error;
 };
 
@@ -39,3 +46,8 @@ export type OpenSCADWorkerResponseData = {
   exitCode: number;
   duration: number;
 };
+
+export type FileSystemWorkerMessageData = {
+  path: string;
+  content?: FileWithPath; // Content is only necessary when writing
+};