diff --git a/bun.lock b/bun.lock
index ae06ffd..3259db3 100644
--- a/bun.lock
+++ b/bun.lock
@@ -14,6 +14,7 @@
         "@tiptap/starter-kit": "^3.29.2",
         "idb": "^8.0.3",
         "modern-screenshot": "^4.7.0",
+        "sortablejs": "^1.15.7",
         "svelte-awesome-color-picker": "^4.1.3",
         "svelte-highlight": "^7.16.2",
         "tippy.js": "^6.3.7",
@@ -27,6 +28,7 @@
         "@sveltejs/vite-plugin-svelte": "^7.2.0",
         "@tailwindcss/vite": "^4.3.3",
         "@types/node": "^26.1.2",
+        "@types/sortablejs": "^1.15.9",
         "@vitest/coverage-v8": "4.1.10",
         "file-type": "^22.0.1",
         "oxlint": "^1.77.0",
@@ -38,7 +40,7 @@
         "tailwindcss": "^4.3.3",
         "typescript": "^6.0.3",
         "unplugin-icons": "^23.0.1",
-        "vite": "^8.2.0",
+        "vite": "^8.2.1",
         "vitest": "^4.1.10",
       },
     },
@@ -303,6 +305,8 @@
 
     "@types/node": ["@types/node@26.1.2", "", { "dependencies": { "undici-types": "~8.3.0" } }, "sha512-Vu4a5UFA9rIIFJ7rB/Vaafh9lrCQszopTCx6KjFboXTGQbPNasehVR5TEiithSDGyd1DEiUByggTZsg8jukeIg=="],
 
+    "@types/sortablejs": ["@types/sortablejs@1.15.9", "", {}, "sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ=="],
+
     "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
 
     "@vitest/coverage-v8": ["@vitest/coverage-v8@4.1.10", "", { "dependencies": { "@bcoe/v8-coverage": "^1.0.2", "@vitest/utils": "4.1.10", "ast-v8-to-istanbul": "^1.0.0", "istanbul-lib-coverage": "^3.2.2", "istanbul-lib-report": "^3.0.1", "istanbul-reports": "^3.2.0", "magicast": "^0.5.2", "obug": "^2.1.1", "std-env": "^4.0.0-rc.1", "tinyrainbow": "^3.1.0" }, "peerDependencies": { "@vitest/browser": "4.1.10", "vitest": "4.1.10" }, "optionalPeers": ["@vitest/browser"] }, "sha512-IM49HmthevbgAO4anp1hwtoT9wYe59w0LR00gr+eagHE+ZJ5lK4sLPeO0ubgoJcwLk6dehU3R24N+FbEEKDc8g=="],
@@ -547,6 +551,8 @@
 
     "sirv": ["sirv@3.0.2", "", { "dependencies": { "@polka/url": "^1.0.0-next.24", "mrmime": "^2.0.0", "totalist": "^3.0.0" } }, "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g=="],
 
+    "sortablejs": ["sortablejs@1.15.7", "", {}, "sha512-Kk8wLQPlS+yi1ZEf48a4+fzHa4yxjC30M/Sr2AnQu+f/MPwvvX9XjZ6OWejiz8crBsLwSq8GHqaxaET7u6ux0A=="],
+
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
     "stackback": ["stackback@0.0.2", "", {}, "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw=="],
diff --git a/package-lock.json b/package-lock.json
index a321708..04ca452 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
                 "@tiptap/starter-kit": "^3.29.2",
                 "idb": "^8.0.3",
                 "modern-screenshot": "^4.7.0",
+                "sortablejs": "^1.15.7",
                 "svelte-awesome-color-picker": "^4.1.3",
                 "svelte-highlight": "^7.16.2",
                 "tippy.js": "^6.3.7",
@@ -30,6 +31,7 @@
                 "@sveltejs/vite-plugin-svelte": "^7.2.0",
                 "@tailwindcss/vite": "^4.3.3",
                 "@types/node": "^26.1.2",
+                "@types/sortablejs": "^1.15.9",
                 "@vitest/coverage-v8": "4.1.10",
                 "file-type": "^22.0.1",
                 "oxlint": "^1.77.0",
@@ -1792,6 +1794,13 @@
                 "undici-types": "~8.3.0"
             }
         },
+        "node_modules/@types/sortablejs": {
+            "version": "1.15.9",
+            "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.9.tgz",
+            "integrity": "sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/@types/trusted-types": {
             "version": "2.0.7",
             "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -3336,6 +3345,12 @@
                 "node": ">=18"
             }
         },
+        "node_modules/sortablejs": {
+            "version": "1.15.7",
+            "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.7.tgz",
+            "integrity": "sha512-Kk8wLQPlS+yi1ZEf48a4+fzHa4yxjC30M/Sr2AnQu+f/MPwvvX9XjZ6OWejiz8crBsLwSq8GHqaxaET7u6ux0A==",
+            "license": "MIT"
+        },
         "node_modules/source-map-js": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
diff --git a/package.json b/package.json
index 0475e94..d57dfa8 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
         "@sveltejs/vite-plugin-svelte": "^7.2.0",
         "@tailwindcss/vite": "^4.3.3",
         "@types/node": "^26.1.2",
+        "@types/sortablejs": "^1.15.9",
         "@vitest/coverage-v8": "4.1.10",
         "file-type": "^22.0.1",
         "oxlint": "^1.77.0",
@@ -46,6 +47,7 @@
         "@tiptap/starter-kit": "^3.29.2",
         "idb": "^8.0.3",
         "modern-screenshot": "^4.7.0",
+        "sortablejs": "^1.15.7",
         "svelte-awesome-color-picker": "^4.1.3",
         "svelte-highlight": "^7.16.2",
         "tippy.js": "^6.3.7",
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
index 5add675..8702b18 100644
--- a/src/lib/components/Modal.svelte
+++ b/src/lib/components/Modal.svelte
@@ -28,10 +28,10 @@
 
     export async function open() {
         opened = true;
+        await tick();
         if (onOpen) {
             onOpen();
         }
-        await tick();
     }
 
     export async function close() {
diff --git a/src/lib/components/modals/ColorGradientModal.svelte b/src/lib/components/modals/ColorGradientModal.svelte
index 37c682a..9255ac3 100644
--- a/src/lib/components/modals/ColorGradientModal.svelte
+++ b/src/lib/components/modals/ColorGradientModal.svelte
@@ -1,13 +1,38 @@
 <script lang="ts">
     import Modal from "$lib/components/Modal.svelte";
     import type { Editor } from "@tiptap/core";
+    import Sortable from "sortablejs";
     import ColorPicker from "svelte-awesome-color-picker";
     import { generateGradient } from "typescript-color-gradient";
 
+    import { tick } from "svelte";
+    import IconBack from "~icons/tabler/arrow-back-up";
+    import IconCircle from "~icons/tabler/circle-filled";
+    import IconRecent from "~icons/tabler/clock-hour-4";
+    import IconHandle from "~icons/tabler/grip-vertical";
     import IconCustom from "~icons/tabler/plus";
     import IconDelete from "~icons/tabler/trash";
 
-    let { gradientDialog = $bindable(), gradientSteps = $bindable(), editor } = $props();
+    let recentsPageOpen: boolean = $state(false);
+    let recentGradients: Array<string[]> = $state([]);
+    let gradientSteps: { id: number; color: string }[] = $state([{ id: 0, color: "#ffffff"}]);
+
+    interface Props {
+        gradientDialog: Modal;
+        editor: Editor | undefined;
+    }
+
+    function openRecentsPage() {
+        if (localStorage.getItem("recent_gradients")) {
+            recentGradients = JSON.parse(localStorage.getItem("recent_gradients")!);
+        } else {
+            recentGradients = [];
+            localStorage.setItem("recent_gradients", "[]");
+        }
+        recentsPageOpen = true;
+    }
+
+    let { gradientDialog = $bindable(), editor }: Props = $props();
 
     function applyGradient(editor: Editor, gradientColors: string[]) {
         const { from, to } = editor.state.selection;
@@ -54,71 +79,163 @@
         chain.focus().setTextSelection({ from, to });
 
         chain.run();
+
+        // Add to recents if necessary
+        let gradientHexes = gradientSteps.map((step) => step.color)
+
+        const alreadyAppeared = recentGradients.some(elem =>{
+            return JSON.stringify(gradientHexes) === JSON.stringify(elem);
+        });
+
+        if (alreadyAppeared) {
+            recentGradients = recentGradients.filter((grad) => JSON.stringify(grad) !== JSON.stringify(gradientHexes));
+        }
+
+        recentGradients.push(gradientHexes);
+
+        if (recentGradients.length > 10) {
+            recentGradients.shift();
+        }
+
+        localStorage.setItem("recent_gradients", JSON.stringify(recentGradients));
+    }
+
+    function opened() {
+        recentsPageOpen = false;
+
+        // Load recent gradients
+        if (localStorage.getItem("recent_gradients")) {
+            recentGradients = JSON.parse(localStorage.getItem("recent_gradients")!);
+        } else {
+            recentGradients = [];
+            localStorage.setItem("recent_gradients", "[]");
+        }
+
+        // Create sortable
+        Sortable.create(document.querySelector("#gradientsort")!, {
+            animation: 200,
+            // handle: ".handle",
+            onEnd: (evt: Sortable.SortableEvent): void => {
+                const { oldIndex, newIndex } = evt;
+                if (oldIndex === undefined || newIndex === undefined || oldIndex === newIndex) {
+                    return;
+                }
+                const [movedItem]: { id: number; color: string }[] = gradientSteps.splice(oldIndex, 1);
+                gradientSteps.splice(newIndex, 0, movedItem);
+                gradientSteps = gradientSteps;
+            },
+        });
     }
 </script>
 
-<Modal title="Color Gradient" bind:this={gradientDialog} key="G">
-    <div class="flex w-full flex-col space-y-2">
-        <p>Add colours to the gradient below:</p>
-        <div class="flex flex-col space-y-1">
-            {#each gradientSteps ?? [] as _, i}
-                <div class="flex w-full items-center rounded-md bg-zinc-900 p-2">
-                    <div class="grow">
-                        <ColorPicker
-                            bind:hex={gradientSteps[i]}
-                            position="responsive"
-                            --cp-bg-color="#18181b"
-                            --cp-text-color="white"
-                            --cp-input-color="#0C0C0E"
-                            --cp-button-hover-color="#18181b"
-                            textInputModes={["hex"]}
-                            isAlpha={false} />
-                    </div>
-                    {#if gradientSteps.length > 1}
+<Modal title="Color Gradient" bind:this={gradientDialog} onOpen={opened} key="G">
+    <div class="flex w-full flex-col space-y-1">
+        {#if !recentsPageOpen}
+            <p>Add colours to the gradient below:</p>
+            <ul class="flex flex-col space-y-1" id="gradientsort">
+                {#each gradientSteps as g, i (g.id)}
+                    <li class="flex w-full items-center rounded-md bg-zinc-900 p-2">
+                        <IconHandle class="handle cursor-move text-zinc-500" />
+                        <div class="grow">
+                            <ColorPicker
+                                bind:hex={gradientSteps[i].color}
+                                position="responsive"
+                                --cp-bg-color="#18181b"
+                                --cp-text-color="white"
+                                --cp-input-color="#0C0C0E"
+                                --cp-button-hover-color="#18181b"
+                                textInputModes={["hex"]}
+                                isAlpha={false} />
+                        </div>
+                        {#if gradientSteps.length > 1}
+                            <button
+                                onclick={() => {
+                                    gradientSteps.splice(i, 1);
+                                    gradientSteps = gradientSteps;
+                                }}
+                                class="flex aspect-square h-9 w-fit items-center justify-center rounded-md bg-zinc-900 p-2 hover:bg-black/20">
+                                <IconDelete />
+                            </button>
+                        {/if}
+                    </li>
+                {/each}
+            </ul>
+            <div class="flex justify-between space-x-2">
+                <button
+                    onclick={() => {
+                        gradientSteps.push({ id: Date.now(), color: "#ffffff" });
+                        gradientSteps = gradientSteps;
+                    }}
+                    class="aspect-square h-9 w-9 rounded-md bg-zinc-900 p-2 hover:bg-black/50">
+                    <IconCustom class="m-auto" />
+                </button>
+            </div>
+            <p class="mt-2">Preview</p>
+            <div class="font-minecraft rounded-md bg-zinc-950 px-4 py-2 text-2xl">
+                <span
+                    style="background: -webkit-linear-gradient(0, {gradientSteps.map((step) => step.color).join(
+                        ',',
+                    )}); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"
+                    >{editor?.state.doc.textBetween(
+                        editor.state.selection.from,
+                        editor.state.selection.to,
+                        " ",
+                    ) || "error! no text selected"}</span>
+            </div>
+
+            <p class="text-sm text-white/60">
+                <b>Note:</b> you need to select text in the editor before you try and apply a gradient.
+            </p>
+
+            <div class="mt-2 flex items-center justify-between">
+                <button
+                    onclick={() => {
+                        applyGradient(editor!, gradientSteps.map((step) => step.color));
+                        gradientDialog.close();
+                    }}
+                    class="btn">
+                    Apply Gradient
+                </button>
+
+                <button onclick={openRecentsPage} class="btn flex items-center space-x-1">
+                    <IconRecent />
+                    <span>Recent gradients</span>
+                </button>
+            </div>
+        {:else}
+            <div class="flex items-center">
+                <p class="grow">Your top 10 most recent gradients are shown below:</p>
+            </div>
+            <div class="grid grid-cols-1 gap-2 md:grid-cols-2">
+                {#each recentGradients.slice().reverse() ?? [] as gradient}
+                    <div class="flex items-center space-x-1">
+                        <div class="flex w-full items-center space-x-2 rounded-md bg-zinc-900 p-2">
+                            <!-- <span>Colours: </span> -->
+                            <div class="flex grow items-center space-x-1">
+                                {#each gradient ?? [] as step}
+                                    <IconCircle class="text-xl" style={"color: " + step + ";"} />
+                                {/each}
+                            </div>
+                        </div>
                         <button
-                            onclick={() => {
-                                gradientSteps.splice(i, 1);
-                                gradientSteps = gradientSteps;
-                            }}
-                            class="flex aspect-square h-9 w-fit items-center justify-center rounded-md bg-zinc-900 p-2 hover:bg-black/20">
-                            <IconDelete />
-                        </button>
-                    {/if}
-                </div>
-            {/each}
+                            class="btn"
+                            onclick={async () => {
+                                // im 90% sure this solution is slow as hell and probably unstable too, but i hate this so much i dont care
+                                gradientSteps = gradient.map((color, i) => ({ id: Date.now() - i, color }));
+                                recentsPageOpen = false;
+                                await tick();
+                                opened();
+                            }}>Use</button>
+                    </div>
+                {/each}
+            </div>
+
             <button
-                onclick={() => {
-                    gradientSteps.push("#ffffff");
-                    gradientSteps = gradientSteps;
-                }}
-                class="aspect-square h-9 w-9 rounded-md bg-zinc-900 p-2 hover:bg-black/50">
-                <IconCustom class="m-auto" />
+                onclick={() => (recentsPageOpen = false)}
+                class="mt-2 flex h-full w-fit cursor-pointer items-center space-x-2 rounded-md bg-zinc-900 p-2 hover:bg-black/50">
+                <IconBack />
+                <span>Back</span>
             </button>
-        </div>
-        <p class="my-2">Preview</p>
-        <div class="font-minecraft bg-zinc-950 px-4 py-2 text-2xl">
-            <span
-                style="background: -webkit-linear-gradient(0, {gradientSteps.join(
-                    ',',
-                )}); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"
-                >{editor?.state.doc.textBetween(
-                    editor.state.selection.from,
-                    editor.state.selection.to,
-                    " ",
-                ) || "error! no text selected"}</span>
-        </div>
-
-        <p class="text-sm text-white/60">
-            <b>Note:</b> you need to select text in the editor before you try and apply a gradient.
-        </p>
-
-        <button
-            onclick={() => {
-                applyGradient(editor, gradientSteps);
-                gradientDialog.close();
-            }}
-            class="btn">
-            Apply Gradient
-        </button>
+        {/if}
     </div>
 </Modal>
diff --git a/src/lib/components/modals/topbar/ExportModal.svelte b/src/lib/components/modals/topbar/ExportModal.svelte
index 8eb8aa4..7cfc145 100644
--- a/src/lib/components/modals/topbar/ExportModal.svelte
+++ b/src/lib/components/modals/topbar/ExportModal.svelte
@@ -1,22 +1,23 @@
 <script lang="ts">
     import Modal from "$lib/components/Modal.svelte";
-    import { outputVersion } from "$lib/stores";
     import { translateMOTD } from "$lib/text/motd";
     import { convert } from "$lib/text/nbt/export";
     import CheckBox from "../../CheckBox.svelte";
-    import { domToPng, domToJpeg, domToWebp, domToSvg, type Options } from "modern-screenshot";
+    import { domToPng,  type Options } from "modern-screenshot";
     import { Highlight } from "svelte-highlight";
     import typescript from "svelte-highlight/languages/typescript";
     import { appSettings } from "$lib/settings";
 
     // Icons
     import IconItem from "~icons/tabler/swords";
+    import IconJSON from "~icons/tabler/braces";
     import IconMOTD from "~icons/tabler/speakerphone";
     import IconImage from "~icons/tabler/photo";
     import IconBack from "~icons/tabler/arrow-back-up";
     import IconCopy from "~icons/tabler/copy";
     import IconCheck from "~icons/tabler/check";
     import IconDownload from "~icons/tabler/download";
+    import { json } from "svelte-highlight/languages";
 
     // UI
     let showOutput: string | null = $state(null);
@@ -28,28 +29,18 @@
         shouldOptimise = true,
     } = $props();
 
-    // Output variables
-    let exportAsJSON = $state(false);
-    let extension = $state("png");
 
     // Image output
     let imgPreview: HTMLImageElement | undefined = $state();
 
-    const functionLUT = new Map<
-        string,
-        (element: HTMLElement, options?: Options) => Promise<string>
-    >();
-
-    functionLUT.set("png", domToPng);
-    functionLUT.set("jpeg", domToJpeg);
-    functionLUT.set("webp", domToWebp);
-    functionLUT.set("svg", domToSvg);
-
     let renderOptions: Options = {
         scale: 4,
     };
 
+    // output variables
     var transparent: boolean = $state(true);
+    var indent: boolean = $state(true);
+    var jsonLore: boolean = $state(false);
 
     async function exportImage() {
         const textContainer: HTMLElement = document.querySelector(".ProseMirror")!;
@@ -72,7 +63,7 @@
 
     async function downloadImage(dataUrl: string) {
         const link = document.createElement("a");
-        link.download = `tellraw-output.${extension}`;
+        link.download = `tellraw-output.png`;
         link.href = dataUrl;
         link.click();
     }
@@ -86,7 +77,6 @@
 
     async function showImageOutput() {
         showOutput = "image";
-        const func = functionLUT.get(extension);
         exportImage().then((imgUrl) => {
             imgPreview!.src = imgUrl;
         });
@@ -102,6 +92,13 @@
         {#if showOutput == null}
             <p>You can also export the text in one of these formats too:</p>
             <div class="grid grid-cols-1 gap-2 xl:grid-cols-2">
+                <button
+                    onclick={() => (showOutput = "json")}
+                    class="flex h-full w-full cursor-pointer items-center space-x-2 rounded-md bg-zinc-900 p-2 hover:bg-black/50">
+                    <IconJSON />
+                    <span>JSON format</span>
+                </button>
+
                 <button
                     onclick={() => (showOutput = "lore")}
                     class="flex h-full w-full cursor-pointer items-center space-x-2 rounded-md bg-zinc-900 p-2 hover:bg-black/50">
@@ -128,6 +125,88 @@
                     <span class="text-zinc-600">More coming soon</span>
                 </div>
             </div>
+        {:else if showOutput == "json"}
+            <div class="flex items-center space-x-2">
+                <div class="flex h-full w-full cursor-pointer items-center space-x-2 p-2 font-bold">
+                    <IconJSON />
+                    <span>JSON format</span>
+                </div>
+                <button
+                    onclick={() => (showOutput = null)}
+                    class="flex h-full w-fit cursor-pointer items-center space-x-2 rounded-md bg-zinc-900 p-2 hover:bg-black/50">
+                    <IconBack />
+                    <span>Back</span>
+                </button>
+            </div>
+            <code class="max-h-56 w-full space-x-3 overflow-auto rounded-lg bg-zinc-950 p-3">
+                {#if $appSettings.syntaxHighlight}
+                <Highlight
+                    language={json}
+                    code={
+                        JSON.stringify(
+                            JSON.parse(
+                                convert(
+                                    editor.getJSON(),
+                                    shouldOptimise,
+                                    "standard",
+                                    true,
+                                )
+                            ),
+                            null,
+                            indent ? 4 : undefined
+                        )
+                    } />
+                {:else}
+                    <pre class="inline break-all whitespace-pre-wrap">{editor
+                        ? JSON.stringify(
+                            JSON.parse(
+                                convert(
+                                    editor.getJSON(),
+                                    shouldOptimise,
+                                    "standard",
+                                    true,
+                                )
+                            ),
+                            null,
+                            indent ? 4 : undefined
+                        )
+                        : "Loading..."}</pre>
+                {/if}
+            </code>
+
+            <div class="flex items-center space-x-2">
+                <CheckBox label="bg" bind:value={indent} />
+                <label for="bg">Indent output</label>
+            </div>
+
+            <button
+                class="btn flex items-center space-x-2"
+                onclick={() => {
+                    navigator.clipboard.writeText(
+                        JSON.stringify(
+                            JSON.parse(
+                                convert(
+                                    editor.getJSON(),
+                                    shouldOptimise,
+                                    "standard",
+                                    true,
+                                )
+                            ),
+                            null,
+                            indent ? 4 : undefined
+                        )
+                    );
+                    recentlyCopied = true;
+                    setTimeout(() => (recentlyCopied = false), 2000);
+                }}>
+                {#if !recentlyCopied}
+                    <IconCopy />
+                    <span>Copy</span>
+                {:else}
+                    <IconCheck />
+                    <span>Copied!</span>
+                {/if}
+            </button>
         {:else if showOutput == "lore"}
             <div class="flex items-center space-x-2">
                 <div class="flex h-full w-full cursor-pointer items-center space-x-2 p-2 font-bold">
@@ -146,27 +225,32 @@
                 {#if $appSettings.syntaxHighlight}
                     <div class="ml-0 lg:ml-4">
                         <Highlight
-                            language={typescript}
+                            language={jsonLore ? json : typescript}
                             code={convert(
                                 editor.getJSON(),
                                 shouldOptimise,
                                 "item_lore",
-                                exportAsJSON,
+                                jsonLore,
                             )} />
                     </div>
                 {:else}
                     <pre class="inline break-all whitespace-pre-wrap">{editor
-                            ? convert(editor.getJSON(), shouldOptimise, "item_lore", exportAsJSON)
+                            ? convert(editor.getJSON(), shouldOptimise, "item_lore", jsonLore)
                             : "Loading..."}</pre>
                 {/if}
                 <span class="text-white/35 select-none">]</span>
             </code>
 
+            <div class="flex items-center space-x-2">
+                <CheckBox label="bg" bind:value={jsonLore} />
+                <label for="bg">JSON output</label>
+            </div>
+
             <button
                 class="btn flex items-center space-x-2"
                 onclick={() => {
                     navigator.clipboard.writeText(
-                        `[lore=${convert(editor.getJSON(), shouldOptimise, "item_lore", exportAsJSON)}]`,
+                        `[lore=${convert(editor.getJSON(), shouldOptimise, "item_lore", jsonLore)}]`,
                     );
                     recentlyCopied = true;
                     setTimeout(() => (recentlyCopied = false), 2000);
@@ -262,101 +346,4 @@
             </div>
         {/if}
     </div>
-</Modal>
-
-<!-- <Modal title="More output formats" bind:this={outputDialog} big key="E">
-    <div class="flex w-full flex-col">
-        {#if $outputVersion.index > 0}
-            <div class="mt-1 flex items-center space-x-2">
-                <CheckBox bind:value={exportAsJSON} label="json" />
-                <span>Toggle JSON mode (for use in json files)</span>
-            </div>
-        {/if}
-
-        <p class="mt-4">
-            As {$outputVersion.index > 0 ? " " : "JSON "}text components:
-        </p>
-        <div class="flex items-start space-x-3 rounded-lg bg-zinc-950 p-3">
-            <button
-                class="rounded-md p-1 text-lg font-medium hover:bg-zinc-900 active:bg-white/10"
-                onclick={() => {
-                    navigator.clipboard.writeText(
-                        convert(editor.getJSON(), shouldOptimise, "standard", exportAsJSON),
-                    );
-                    recentlyCopied = true;
-                    setTimeout(() => (recentlyCopied = false), 2000);
-                }}>
-                <IconCopy />
-            </button>
-            <code class="inline-block max-h-56 w-full overflow-auto">
-                <pre class="inline break-all whitespace-pre-wrap">{editor
-                        ? convert(editor.getJSON(), shouldOptimise, "standard", exportAsJSON)
-                        : "Loading..."}</pre>
-            </code>
-        </div>
-
-        <p class="mt-4">As a lore component:</p>
-        <div class="flex items-start space-x-3 rounded-lg bg-zinc-950 p-3">
-            <button
-                class="rounded-md p-1 text-lg font-medium hover:bg-zinc-900 active:bg-white/10"
-                onclick={() => {
-                    navigator.clipboard.writeText(
-                        `[lore=${convert(editor.getJSON(), shouldOptimise, "item_lore", exportAsJSON)}]`,
-                    );
-                    recentlyCopied = true;
-                    setTimeout(() => (recentlyCopied = false), 2000);
-                }}>
-                <IconCopy />
-            </button>
-            <code class="inline-block max-h-56 w-full overflow-auto"
-                ><span class="text-white/35">[lore=</span>
-                <pre class="inline break-all whitespace-pre-wrap">{editor
-                        ? convert(editor.getJSON(), shouldOptimise, "item_lore", exportAsJSON)
-                        : "Loading..."}</pre>
-                <span class="text-white/35">]</span>
-            </code>
-        </div>
-
-        <p class="mt-4">As a MOTD:</p>
-        <div class="flex items-start space-x-3 rounded-lg bg-zinc-950 p-3">
-            <button
-                class="rounded-md p-1 text-lg font-medium hover:bg-zinc-900 active:bg-white/10"
-                onclick={() => {
-                    navigator.clipboard.writeText(
-                        editor ? translateMOTD(editor.getJSON()) : "Loading...",
-                    );
-                    recentlyCopied = true;
-                    setTimeout(() => (recentlyCopied = false), 2000);
-                }}>
-                <IconCopy />
-            </button>
-            <code class="max-h-56 w-full overflow-auto">
-                <pre class="inline break-all whitespace-pre-wrap">{editor
-                        ? translateMOTD(editor.getJSON())
-                        : "Loading..."}</pre>
-            </code>
-        </div>
-        <p class="mt-4">(BETA) As a image:</p>
-        <p class="text-sm text-white/50">Accuracy may not be great! You have been warned!</p>
-        <div class="mt-2 flex items-center gap-2">
-            <button
-                class="text-md flex items-center justify-center space-x-2 rounded-sm bg-zinc-900 p-2 hover:brightness-90 active:brightness-75"
-                onclick={exportAsImage}>
-                <IconDownload />
-                <span>Download image</span>
-            </button>
-            <div class="flex flex-col">
-                <label for="extension" class="ml-2 text-xs text-white/50">Image format:</label>
-                <select
-                    bind:value={extension}
-                    name="extension"
-                    class="ml-2 rounded-sm border-r-8 border-zinc-900 bg-zinc-900 p-1 text-white outline-0">
-                    <option value="png">PNG</option>
-                    <option value="jpeg">JPEG</option>
-                    <option value="webp">WEBP</option>
-                    <option value="svg">SVG</option>
-                </select>
-            </div>
-        </div>
-    </div>
-</Modal> -->
+</Modal>
\ No newline at end of file
diff --git a/src/lib/components/toolbar/Toolbar.svelte b/src/lib/components/toolbar/Toolbar.svelte
index 482dda0..ce61965 100644
--- a/src/lib/components/toolbar/Toolbar.svelte
+++ b/src/lib/components/toolbar/Toolbar.svelte
@@ -28,7 +28,6 @@
     let colourDialog: Modal = $state()!;
 
     let gradientDialog: Modal = $state()!;
-    let gradientSteps: string[] = $state(["#ffffff"]);
 
     let keybindDialog: Modal = $state()!;
 
@@ -326,7 +325,7 @@
 {/await}
 
 {#await import("$lib/components/modals/ColorGradientModal.svelte") then modal}
-    <modal.default {editor} bind:gradientSteps bind:gradientDialog />
+    <modal.default {editor} bind:gradientDialog />
 {/await}
 {#await import("$lib/components/modals/UnicodeSelectorModal.svelte") then modal}
     <modal.default editor={editor!} bind:unicodeSelectorDialog />
diff --git a/src/lib/text/nbt/export.ts b/src/lib/text/nbt/export.ts
index 3c9eec2..3512961 100644
--- a/src/lib/text/nbt/export.ts
+++ b/src/lib/text/nbt/export.ts
@@ -170,10 +170,24 @@ export function convert(
 ): string {
     exportVersion = get(outputVersion);
     let out = translateJSON(jsonContent, { exportType, optimise });
+
+    // Convert from JSON string to NBT string if required
     if (exportVersion.index >= 1 && !forceJson) {
-        // only remove string keys
+        // nbt number type fix for shadow colour
+        // moved from translateJSON function
+        const shadowColorMatches = out.matchAll(/"shadow_color":(-?\d+)/gu);
+        const relevantShadowColorMatches = shadowColorMatches.filter(item => (parseInt(item[1]) > 2 ** 31 - 1 || parseInt(item[1]) < (-2) ** 31)).toArray().map(item => item[1])
+        const deduplicatedRelevantShadowColorMatches = [...new Set(relevantShadowColorMatches)];
+
+        for (const match of deduplicatedRelevantShadowColorMatches) {
+            const num = parseInt(match)
+            out = out.replaceAll(`"shadow_color":${match}`, `"shadow_color":${num}L`);
+        }
+        
+        // remove string marks from json keys only
         out = out.replaceAll(/(?<=[{,]\s*)"[^"]*"\s*:/gu, (match) => match.replaceAll(`"`, ""));
     }
+
     return out;
 }
 
@@ -234,16 +248,6 @@ export function translateJSON(json: JSONContent, options: TranslateOptions): str
 
         let finalResult = JSON.stringify(data);
 
-        const shadowColorMatches = finalResult.matchAll(/"shadow_color":(-?\d+)/gu);
-        for (const match of shadowColorMatches) {
-            if (match[1]) {
-                const num = parseInt(match[1]);
-                if (num > 2 ** 31 - 1 || num < (-2) ** 31) {
-                    finalResult = finalResult.replaceAll(match[0], `"shadow_color":${num}L`);
-                }
-            }
-        }
-
         return finalResult;
     } else if (options.exportType === "item_lore") {
         let data: (StringyMCText[] | StringyMCText)[] = [];
diff --git a/src/tests/unit/exporting/translating_mc_json.spec.ts b/src/tests/unit/exporting/translating_mc_json.spec.ts
index ddfc7df..f00f71d 100644
--- a/src/tests/unit/exporting/translating_mc_json.spec.ts
+++ b/src/tests/unit/exporting/translating_mc_json.spec.ts
@@ -1,5 +1,5 @@
 import { outputVersion } from "$lib/stores";
-import { translateJSON } from "$lib/text/nbt/export";
+import { convert, translateJSON } from "$lib/text/nbt/export";
 import { versions, type TranslateOptions } from "$lib/types";
 import type { JSONContent } from "@tiptap/core";
 import { expect, it } from "vitest";
@@ -95,16 +95,16 @@ it("handles shadowColor mark", async () => {
     const json: JSONContent = (await readTestJSONFile(
         "clean/json/shadow_color.json",
     )) as JSONContent;
-    const result = translateJSON(json, baseOptions);
-    expect(result).toContain('"shadow_color":4294902015L');
+    const result = convert(json, true, "standard");
+    expect(result).toContain('shadow_color:4294902015L');
 });
 
 it("handles shadowColor transparency", async () => {
     const json: JSONContent = (await readTestJSONFile(
         "clean/json/shadow_color_transparent.json",
     )) as JSONContent;
-    const result = translateJSON(json, baseOptions);
-    expect(result).toContain('"shadow_color":4294923348L');
+    const result = convert(json, true, "standard");
+    expect(result).toContain('shadow_color:4294923348L');
 });
 
 it("should remove shadow_color if out of range", async () => {