diff --git a/index.html b/index.html
index 440fc4d..d76ce0c 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,149 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>RAMP4 Config Editor</title>
+    <script>
+      let rampConfig = undefined
+      let started = false
+      let isFile = false
+      let isError = false
+      function showHelpInstructions() {
+        alert("Click the start editor button to start the app with an empty config. Alternately, you may upload a default config file in json format via the upload config button and then click start editor to start the app with your own default config. At any point in the session, you may download the current config in json format via the download config button.")
+      }
+
+      function openFileUpload() {
+        document.getElementById('upload-config').click()
+      }
+
+      function onFileUpload(file) {
+        const reader = new FileReader()
+        reader.onload = onReaderLoad
+        reader.readAsText(file);
+      }
+
+      function onReaderLoad(event){
+        isFile = true
+        document.getElementById('upload-config').value = ''
+        setStartingConfig(event.target.result)
+      }
+
+      function setStartingConfig(config) {
+        try {
+          rampConfig = JSON.parse(config)
+          if (isFile) {
+            alert("Successfully uploaded config.")
+          }
+          isError = false
+        } catch (error) {
+          if (isFile) {
+            alert("An error occurred. Please ensure that the config is in json format.")
+          }
+          else {
+            isError = true
+          }
+        }
+      }
+
+      function toggleInput() {
+        document.getElementById('config-input').hidden = !document.getElementById('config-input').hidden
+        const button = document.getElementById('buttons').children[2]
+        button.innerHTML = document.getElementById('config-input').hidden ? 'Input Config' : 'Hide Input'
+      }
+
+      function onConfigInput(config) {
+        isFile = false
+        setStartingConfig(config)
+      }
+
+      function startEditor() {
+        if (isError) {
+          alert("An error occurred. Please ensure that the config is in json format.")
+          return;
+        }
+        const loopy = setInterval(() => {
+          if (window.ramp4EditorAPI) {
+            clearInterval(loopy)
+            window.ramp4EditorAPI.initialize(rampConfig)
+            started = true
+          }
+        })
+      }
+
+      function downloadConfig(){
+        if (!started) {
+          alert('Cannot download config without starting the app.');
+          return;
+        }
+        const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(window.ramp4EditorAPI.getConfig()));
+        const downloadAnchorNode = document.createElement('a');
+        downloadAnchorNode.setAttribute("href", dataStr);
+        downloadAnchorNode.hidden = true
+        downloadAnchorNode.setAttribute("download", "ramp_config.json");
+        document.body.appendChild(downloadAnchorNode); // required for firefox
+        downloadAnchorNode.click();
+        downloadAnchorNode.remove();
+      }
+    </script>
   </head>
   <body>
-    <div id="app" style="height: 95vh"></div>
+    <div id="container">
+      <div id="buttons">
+        <button onclick="showHelpInstructions()">Help Instructions</button>
+        <button onclick="openFileUpload()">Upload Config</button>
+        <button onclick="toggleInput()">Input Config</button>
+        <input oninput="onFileUpload(this.files[0])" type="file" id="upload-config" hidden accept=".json" />
+        <button onclick="downloadConfig()">Download Config</button>
+        <button onclick="startEditor()">Start Editor</button>
+      </div>
+      <textarea id="config-input" hidden oninput="onConfigInput(this.value)"></textarea>
+      <div id="app"></div>
+    </div>
     <script type="module" src="src/main.ts"></script>
+    <style>
+      body {
+        margin: 0;
+      }
+      #container {
+        display: flex;
+        flex-direction: column;
+        padding: 8px;
+        height: calc(100vh - 16px);
+        gap: 16px;
+      }
+      #app {
+        flex-grow: 1;
+        overflow-y: scroll;
+      }
+      #buttons {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+      }
+      #buttons button, #done-button {
+        font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+      sans-serif, Apple Color Emoji, Segoe UI Emoji;
+        background-color: black;
+        color: white;
+        padding: 8px;
+        width: 20%;
+        border-radius: 0.5rem;
+        height: 100%;
+        cursor: pointer;
+        font-size: 18px;
+      }
+
+      #config-input {
+        min-height: 200px;
+        padding: 8px;
+      }
+
+      #buttons button:hover {
+        opacity: 0.8;
+      }
+
+      #buttons button:focus-visible {
+        opacity: 0.8;
+      }
+    </style>
   </body>
 </html>
diff --git a/src/config-editor.vue b/src/config-editor.vue
index eaeaa35..ad9aaac 100644
--- a/src/config-editor.vue
+++ b/src/config-editor.vue
@@ -53,7 +53,7 @@ onMounted(() => {
     </div>
     <div v-else class="h-full flex flex-col">
       <h1 class="flex-none h-9 text-3xl font-semibold">{{ t('title') }}</h1>
-      <div class="grow mt-3 flex overflow-y-scroll">
+      <div class="grow mt-3 flex">
         <Navbar class="basis-1/5 h-full" />
         <div class="basis-4/5 h-full px-5">
           <StartingFixturesEditor v-if="store.editingTemplate === 'starting-fixtures'" />
