diff --git a/.gitignore b/.gitignore
index 43cdd4575..b5d5a9b14 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,4 @@ node_modules
 .env.*
 !.env.example
 .vercel
+generated/
\ No newline at end of file
diff --git a/plugins/sveld.js b/plugins/sveld.js
index e5f5561c2..00e94f0c6 100644
--- a/plugins/sveld.js
+++ b/plugins/sveld.js
@@ -20,7 +20,7 @@ export default function sveld() {
             }
         },
         // This generates a `COMPONENT_API.json` with sveld in the `/_app` folder on build, which is used by the docs about components (only when built statically)
-        async generateBundle(options, bundle) {
+        async buildStart() {
             const output = {};
 
             const componentFiles = await fs.readdir(path.resolve('./src/lib/components'))
@@ -31,11 +31,13 @@ export default function sveld() {
                 output[fileName] = await parseRaw(raw, filePath)
             }
 
-            this.emitFile({
-                type: 'asset',
-                fileName: 'COMPONENT_API.json',
-                source: JSON.stringify(output),
-            })
+            try {
+                await fs.mkdir(path.resolve('./src/generated'))
+            } catch {
+                // Do nothing, directory already exists
+            }
+
+            await fs.writeFile(path.resolve('./src/generated/COMPONENT_API.json'), JSON.stringify(output))
         },
     }
 }
diff --git a/src/lib/components/Avatar.svelte b/src/lib/components/Avatar.svelte
index 0a29f4a20..16677983b 100644
--- a/src/lib/components/Avatar.svelte
+++ b/src/lib/components/Avatar.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    // TODO: Make square icon `md` more rounded
+
     import { onMount } from 'svelte'
     import { classCombine } from '$lib/utils/classCombine'
 
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index b3858b8c9..126fc8b08 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     // TODO: sizes
     // TODO: icon only buttons should have uniform padding
+    // TODO: Could be a class
 
     import { classCombine } from '$lib/utils/classCombine'
 
diff --git a/src/lib/components/CheckboxVirtualList.svelte b/src/lib/components/CheckboxVirtualList.svelte
index 7351e3b31..e3ddca819 100644
--- a/src/lib/components/CheckboxVirtualList.svelte
+++ b/src/lib/components/CheckboxVirtualList.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    // TODO: Add fade out styling on top and bottom
+
     import Checkbox from './Checkbox.svelte'
     import type { SvelteComponent } from 'svelte'
     import VirtualList from 'svelte-tiny-virtual-list'
diff --git a/src/routes/_internal/layout/page.svelte b/src/routes/_internal/layout/page.svelte
index 36d3acc03..5f14ca829 100644
--- a/src/routes/_internal/layout/page.svelte
+++ b/src/routes/_internal/layout/page.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
     import IconPencil from 'virtual:icons/heroicons-outline/pencil'
     import { page } from '$app/stores'
+    import COMPONENT_API from '../../../generated/COMPONENT_API.json'
 
-    export let fileName = $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1)
+    export let fileName = $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1).replace('.html', '')
 
     export let title = ''
     if (!title) title = fileName
@@ -14,7 +15,7 @@
         if (import.meta.env.DEV) {
             import(`../../../lib/components/${title}.svelte?raw&sveld`).then(output => api = output.default)
         } else {
-            fetch('/_app/COMPONENT_API.json').then(res => res.json()).then(output => api = output[`${title}.svelte`])
+            api = COMPONENT_API[`${title}.svelte`]
         }
     }
 </script>