diff --git a/.github/workflows/run-tests.yml b/.github/workflows/run-tests.yml
index e491db0..0cf9674 100644
--- a/.github/workflows/run-tests.yml
+++ b/.github/workflows/run-tests.yml
@@ -24,3 +24,20 @@ jobs:
 
             - name: Run Tests
               run: npx vitest run
+
+    build-cloudflare:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                node-version-file: .nvmrc
+
+            - name: Install Dependencies
+              run: npm ci
+
+            - name: Build for Cloudflare Pages
+              run: npm run build
+              env:
+                NITRO_PRESET: cloudflare-pages
+                NODE_OPTIONS: --max-old-space-size=4096
diff --git a/app/components/ButtonTheme.vue b/app/components/ButtonTheme.vue
index 0879dbf..919bd77 100644
--- a/app/components/ButtonTheme.vue
+++ b/app/components/ButtonTheme.vue
@@ -60,9 +60,9 @@
 </template>
 
 <script setup>
-import useShiki from '@/composables/useShiki';
-import { debounce, defaults, cloneDeep } from 'lodash';
-import { ref, watch, reactive, toRefs, computed, onMounted } from 'vue';
+import useHighlightedCode from '@/composables/useHighlightedCode';
+import { defaults, cloneDeep } from 'lodash';
+import { ref, watch, reactive, toRefs, computed } from 'vue';
 
 defineOptions({ inheritAttrs: false });
 
@@ -77,15 +77,20 @@ const props = defineProps({
 
 const { code, theme, settings, languages } = toRefs(props);
 
-const { $shiki } = useNuxtApp();
-const { buildCodeBlocks } = useShiki();
-
-const blocks = ref(null);
 const visible = ref(false);
-const rendered = ref(false);
-const rendering = ref(true);
 const themeSettings = reactive({});
-const previouslyRendered = ref(null);
+const { result: highlighted, loading: rendering } = useHighlightedCode(
+    () => ({ code: code.value, theme: theme.value, languages: languages.value }),
+    { enabled: visible, delay: 750, limit: 5 }
+);
+const blocks = computed(() => highlighted.value?.blocks ?? null);
+const rendered = computed(() => highlighted.value !== null);
+
+watch(highlighted, (value) => {
+    themeSettings.themeType = value.themeType;
+    themeSettings.themeBackground = value.themeBackground;
+});
+
 const previewWidth = 640;
 const previewHeight = 480;
 const previewScale = 0.4;
@@ -101,42 +106,12 @@ const settingOverrides = {
 
 const hasScene = computed(() => themeSettings.scene && themeSettings.scene !== 'none');
 
-function generateTokens() {
-    rendering.value = true;
-
-    return buildCodeBlocks(
-        { code: code.value, theme: theme.value, languages: languages.value },
-        ({ blocks: code, themeType: type, themeBackground: background }) => {
-            themeSettings.themeType = type;
-            themeSettings.themeBackground = background;
-            blocks.value = code;
-        },
-        5
-    ).then(() => {
-        rendering.value = false;
-        previouslyRendered.value = code.value;
-    });
-}
-
 watch(
     settings,
     (values) => {
         const { themeType, themeBackground, ...rest } = cloneDeep(values);
-        Object.assign(themeSettings, defaults(settingOverrides, rest));
+        Object.assign(themeSettings, defaults({}, settingOverrides, rest));
     },
     { immediate: true, deep: true }
 );
-
-onMounted(() => {
-    watch(visible, (vis) => {
-        if (vis && code.value != previouslyRendered.value) {
-            generateTokens().then(() => (rendered.value = true));
-        }
-    });
-
-    watch(
-        code,
-        debounce(() => visible.value && generateTokens(), 750)
-    );
-});
 </script>
diff --git a/app/components/Canvas.vue b/app/components/Canvas.vue
index 877ddf8..5ef6bab 100644
--- a/app/components/Canvas.vue
+++ b/app/components/Canvas.vue
@@ -135,7 +135,7 @@ const props = defineProps({
     themeType: { type: String, default: 'dark' },
 });
 
-const emit = defineEmits(['update:width', 'update:height']);
+const emit = defineEmits(['update:width', 'update:height', 'resize-start', 'resize-end']);
 
 const x = ref(null);
 const y = ref(null);
@@ -159,6 +159,10 @@ const { zoom, aspectRatio } = toRefs(props);
 let resizeObserver = null;
 let observedSceneWindow = null;
 let sceneMetricsRequest = null;
+let resizeRequest = null;
+let pendingResize = null;
+let resizeScaleX = 1;
+let resizeScaleY = 1;
 
 const ratio = computed(() => {
     if (aspectRatio.value) {
@@ -186,22 +190,55 @@ function onResizeStart(event) {
 
     resizingWidth.value = hasWidth || !!ratio.value;
     resizingHeight.value = hasHeight || !!ratio.value;
+
+    const container = event.target.parentNode;
+    const containerRect = container.getBoundingClientRect();
+
+    resizeScaleX = containerRect.width / container.offsetWidth || 1;
+    resizeScaleY = containerRect.height / container.offsetHeight || 1;
+
+    emit('resize-start');
 }
 
 function onResizeEnd() {
+    flushResize();
+
     resizingWidth.value = false;
     resizingHeight.value = false;
+
+    emit('resize-end');
 }
 
 function onResize(event) {
-    const container = event.target.parentNode;
-    if (event.rect.width) {
-        const scaleX = container.getBoundingClientRect().width / container.offsetWidth;
-        emit('update:width', event.rect.width / scaleX);
+    pendingResize = {
+        width: event.rect.width,
+        height: event.rect.height,
+    };
+
+    if (!resizeRequest) {
+        resizeRequest = requestAnimationFrame(flushResize);
+    }
+}
+
+function flushResize() {
+    if (resizeRequest) {
+        cancelAnimationFrame(resizeRequest);
+        resizeRequest = null;
+    }
+
+    if (!pendingResize) {
+        return;
+    }
+
+    const { width, height } = pendingResize;
+    pendingResize = null;
+
+    if (width) {
+        emit('update:width', width / resizeScaleX);
     }
-    if (event.rect.height) {
-        const scaleY = container.getBoundingClientRect().height / container.offsetHeight;
-        emit('update:height', event.rect.height / scaleY);
+
+    if (height) {
+        emit('update:height', height / resizeScaleY);
     }
 }
 
@@ -275,6 +312,10 @@ onBeforeUnmount(() => {
         cancelAnimationFrame(sceneMetricsRequest);
     }
 
+    if (resizeRequest) {
+        cancelAnimationFrame(resizeRequest);
+    }
+
     resizeObserver?.disconnect();
 });
 </script>
diff --git a/app/components/Editor.vue b/app/components/Editor.vue
index f4ba2b6..f18ed6a 100644
--- a/app/components/Editor.vue
+++ b/app/components/Editor.vue
@@ -147,8 +147,6 @@
             <Monaco
                 ref="monaco"
                 class="size-full"
-                :width="width"
-                :height="height"
                 :value="modelValue"
                 :added="added"
                 :removed="removed"
@@ -174,8 +172,7 @@ import {
     ArrowDownIcon,
     CreditCardIcon,
 } from 'lucide-vue-next';
-import { ref, watch, toRefs, computed, onMounted, onUnmounted } from 'vue';
-import { useResizeObserver } from '@vueuse/core';
+import { ref, toRefs, computed, onUnmounted } from 'vue';
 
 const props = defineProps({
     id: { type: String, required: true },
@@ -211,8 +208,6 @@ const { sizes, orientation, language } = toRefs(props);
 const { $bus, $shiki } = useNuxtApp();
 const { options: languageOptions } = useLanguages();
 
-const width = ref(0);
-const height = ref(0);
 const root = ref(null);
 const toolbar = ref(null);
 
@@ -225,20 +220,5 @@ const languageAlias = computed(
         language.value
 );
 
-function updateMonacoDimensions() {
-    if (root.value && root.value.offsetParent) {
-        width.value = root.value.clientWidth;
-        height.value = root.value.clientHeight;
-    }
-}
-
-useResizeObserver(root, updateMonacoDimensions);
-
-onMounted(() => {
-    updateMonacoDimensions();
-    watch([sizes, orientation], updateMonacoDimensions);
-    $bus.$on('editors:refresh', updateMonacoDimensions);
-});
-
 onUnmounted(() => $bus.$emit('editors:refresh'));
 </script>
diff --git a/app/components/Monaco.vue b/app/components/Monaco.client.vue
similarity index 64%
rename from app/components/Monaco.vue
rename to app/components/Monaco.client.vue
index aea1b90..e94be4e 100644
--- a/app/components/Monaco.vue
+++ b/app/components/Monaco.client.vue
@@ -1,13 +1,24 @@
 <template>
-    <div ref="root" :style="{ height: `${height}px` }"></div>
+    <div ref="root" class="w-full" :style="{ height: height ? `${height}px` : '100%' }"></div>
 </template>
 
 <script setup>
-import { ref, watch, unref, toRefs, computed, onMounted, onBeforeUnmount, shallowRef } from 'vue';
+import {
+    ref,
+    watch,
+    unref,
+    toRefs,
+    computed,
+    onMounted,
+    onBeforeUnmount,
+    shallowRef,
+    effectScope,
+} from 'vue';
 import { storeToRefs } from 'pinia';
 import { useResizeObserver } from '@vueuse/core';
 import { uniq, get, range, union, difference } from 'lodash';
 import useFonts from '@/composables/useFonts';
+import useMonaco from '@/composables/useMonaco';
 import useApplicationStore from '@/composables/useApplicationStore';
 import usePreferencesStore from '@/composables/usePreferencesStore';
 
@@ -25,7 +36,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'update:added', 'update:removed', 'update:focused']);
 
-const { language, tabSize, value, width, height, added, removed, focused } = toRefs(props);
+const { language, tabSize, value, height, added, removed, focused } = toRefs(props);
 
 const { $bus } = useNuxtApp();
 
@@ -34,6 +45,7 @@ const editor = shallowRef(null);
 const monacoRef = shallowRef(null);
 
 const { fontFamilies } = useFonts();
+const { prepare, loadLanguage, loadTheme } = useMonaco();
 
 const addedLineDecos = ref([]);
 const removedLineDecos = ref([]);
@@ -51,7 +63,16 @@ const {
     editorFontSize: fontSize,
 } = storeToRefs(usePreferencesStore());
 
+const editorScope = effectScope();
+const activeTheme = computed(() =>
+    isDarkMode.value ? editorDarkTheme.value : editorLightTheme.value
+);
+
+let layoutFrame = null;
+
 function updateLayout() {
+    layoutFrame = null;
+
     if (root.value && root.value.offsetParent && editor.value) {
         editor.value.layout({
             width: root.value.clientWidth,
@@ -60,6 +81,14 @@ function updateLayout() {
     }
 }
 
+function scheduleLayout() {
+    if (layoutFrame) {
+        cancelAnimationFrame(layoutFrame);
+    }
+
+    layoutFrame = requestAnimationFrame(updateLayout);
+}
+
 function makeDecoration(range, type) {
     return {
         options: {
@@ -74,7 +103,7 @@ function selectionToRange(selection) {
     return range(selection.startLineNumber, selection.endLineNumber + 1);
 }
 
-useResizeObserver(root, updateLayout);
+useResizeObserver(root, scheduleLayout);
 
 const fontFamily = computed(() => {
     const font = fontFamilies.value.find((font) => font.name === editorFontFamily.value);
@@ -112,33 +141,10 @@ const makeDecosCallback = (className, decoRef) => (lines) => {
 };
 
 onMounted(async () => {
-    self.MonacoEnvironment = {
-        getWorker: () =>
-            new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), {
-                type: 'module',
-            }),
-    };
-
-    const monaco = await import('monaco-editor');
+    const initialTheme = activeTheme.value;
+    const monaco = await prepare({ language: language.value, theme: initialTheme });
     monacoRef.value = monaco;
 
-    // Load themes
-    const themeList = (await import('../data/monaco-themes/themelist.json')).default;
-
-    const themeLoaders = import.meta.glob(
-        ['../data/monaco-themes/*.json', '!../data/monaco-themes/themelist.json'],
-        { import: 'default' }
-    );
-
-    await Promise.all(
-        Object.keys(themeList).map(async (theme) => {
-            const loader = themeLoaders[`../data/monaco-themes/${themeList[theme]}.json`];
-            if (loader) {
-                monaco.editor.defineTheme(theme, await loader());
-            }
-        })
-    );
-
     if (!root.value) return;
 
     editor.value = monaco.editor.create(root.value, {
@@ -156,7 +162,7 @@ onMounted(async () => {
         renderLineHighlight: false,
         scrollBeyondLastLine: false,
         lineNumbersMinChars: 6,
-        theme: isDarkMode.value ? editorDarkTheme.value : editorLightTheme.value,
+        theme: initialTheme,
     });
 
     document.fonts.ready.then(() => monaco.editor.remeasureFonts());
@@ -193,67 +199,91 @@ onMounted(async () => {
         }
     });
 
-    $bus.$on('editors:refresh', updateLayout);
-
-    watch(isDarkMode, (enabled) => {
-        monaco.editor.setTheme(enabled ? editorDarkTheme.value : editorLightTheme.value);
-    });
-
-    watch(language, (lang) => {
-        monaco.editor.setModelLanguage(editor.value.getModel(), lang);
-    });
-
-    watch(tabSize, (size) => editor.value.updateOptions({ tabSize: parseInt(size) }));
-    watch(fontSize, (size) => editor.value.updateOptions({ fontSize: parseInt(size) }));
-    watch(fontFamily, (family) => {
-        editor.value.updateOptions({ fontFamily: family });
-        document.fonts.ready.then(() => monaco.editor.remeasureFonts());
-    });
-    watch(editorLineHeight, (h) => editor.value.updateOptions({ lineHeight: h }));
-    watch(editorFontLigatures, (enabled) => editor.value.updateOptions({ fontLigatures: enabled }));
-
-    watch(value, () => {
-        if (isEditorTyping.value) {
-            isEditorTyping.value = false;
-            return;
-        }
+    $bus.$on('editors:refresh', scheduleLayout);
+
+    editorScope.run(() => {
+        watch(
+            activeTheme,
+            async (theme, _, onCleanup) => {
+                let cancelled = false;
+                onCleanup(() => {
+                    cancelled = true;
+                });
+
+                await loadTheme(theme);
+                if (!cancelled) monaco.editor.setTheme(theme);
+            },
+            { immediate: true }
+        );
+
+        watch(
+            language,
+            async (lang, _, onCleanup) => {
+                let cancelled = false;
+                onCleanup(() => {
+                    cancelled = true;
+                });
+
+                await loadLanguage(lang);
+                if (!cancelled) monaco.editor.setModelLanguage(editor.value.getModel(), lang);
+            },
+            { immediate: true }
+        );
+
+        watch(tabSize, (size) => editor.value.updateOptions({ tabSize: parseInt(size) }));
+        watch(fontSize, (size) => editor.value.updateOptions({ fontSize: parseInt(size) }));
+        watch(fontFamily, (family) => {
+            editor.value.updateOptions({ fontFamily: family });
+            document.fonts.ready.then(() => monaco.editor.remeasureFonts());
+        });
+        watch(editorLineHeight, (h) => editor.value.updateOptions({ lineHeight: h }));
+        watch(editorFontLigatures, (enabled) =>
+            editor.value.updateOptions({ fontLigatures: enabled })
+        );
+
+        watch(value, () => {
+            if (isEditorTyping.value) {
+                isEditorTyping.value = false;
+                return;
+            }
 
-        if (value.value !== editor.value.getValue()) {
-            editor.value.setValue(value.value);
-        }
-    });
+            if (value.value !== editor.value.getValue()) {
+                editor.value.setValue(value.value);
+            }
+        });
 
-    watch(value, () => {
-        const decos = editor.value
-            .getModel()
-            .getAllDecorations()
-            .filter((deco) => deco.options.marginClassName?.includes('line'));
+        watch(value, () => {
+            const decos = editor.value
+                .getModel()
+                .getAllDecorations()
+                .filter((deco) => deco.options.marginClassName?.includes('line'));
 
-        ['added', 'removed', 'focused'].forEach((className) => {
-            const lines = decos
-                .filter((deco) => deco.options.marginClassName?.includes(className))
-                .map((deco) => deco.range.startLineNumber);
+            ['added', 'removed', 'focused'].forEach((className) => {
+                const lines = decos
+                    .filter((deco) => deco.options.marginClassName?.includes(className))
+                    .map((deco) => deco.range.startLineNumber);
 
-            emit(`update:${className}`, uniq(lines));
+                emit(`update:${className}`, uniq(lines));
+            });
         });
-    });
 
-    watch([width, height], updateLayout);
+        watch(height, scheduleLayout);
 
-    watch(editorDarkTheme, (theme) => {
-        if (isDarkMode.value) monaco.editor.setTheme(theme);
+        watch(added, makeDecosCallback('added', addedLineDecos), { immediate: true });
+        watch(removed, makeDecosCallback('removed', removedLineDecos), { immediate: true });
+        watch(focused, makeDecosCallback('focused', focusedLineDecos), { immediate: true });
     });
+});
 
-    watch(editorLightTheme, (theme) => {
-        if (!isDarkMode.value) monaco.editor.setTheme(theme);
-    });
+onBeforeUnmount(() => {
+    if (layoutFrame) {
+        cancelAnimationFrame(layoutFrame);
+    }
 
-    watch(added, makeDecosCallback('added', addedLineDecos), { immediate: true });
-    watch(removed, makeDecosCallback('removed', removedLineDecos), { immediate: true });
-    watch(focused, makeDecosCallback('focused', focusedLineDecos), { immediate: true });
+    editorScope.stop();
+    $bus.$off('editors:refresh', scheduleLayout);
+    editor.value?.dispose();
 });
-
-onBeforeUnmount(() => editor.value?.dispose());
 </script>
 
 <style>
diff --git a/app/components/Preview.vue b/app/components/Preview.vue
index e0350a2..5491d68 100644
--- a/app/components/Preview.vue
+++ b/app/components/Preview.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="relative bg-zinc-100 dark:bg-zinc-950">
+    <div class="relative bg-zinc-100 dark:bg-zinc-950" :class="{ 'is-resizing': resizing }">
         <ModalCustomBackground
             v-model="showingBackgroundsModal"
             :blocks="blocks"
@@ -67,6 +67,8 @@
                     :theme-type="settings.themeType"
                     @update:width="setWidth($event)"
                     @update:height="setHeight($event)"
+                    @resize-start="resizing = true"
+                    @resize-end="resizing = false"
                 >
                     <template #default="{ sceneGutters }">
                         <Window
@@ -208,7 +210,6 @@
 import download from 'downloadjs';
 import { cloneDeep, debounce } from 'lodash';
 import { UAParser } from 'ua-parser-js';
-import * as htmlToImage from 'html-to-image';
 import {
     ShareIcon,
     ZoomInIcon,
@@ -222,7 +223,8 @@ import {
     ImageIcon,
     SparklesIcon,
 } from 'lucide-vue-next';
-import useShiki from '@/composables/useShiki';
+import useHighlightedCode from '@/composables/useHighlightedCode';
+import usePreviewCapture from '@/composables/usePreviewCapture';
 import useScenes from '@/composables/useScenes';
 import usePanZoom from '@/composables/usePanZoom';
 import usePreview from '@/composables/usePreview';
@@ -230,7 +232,16 @@ import useClipboard from '@/composables/useClipboard';
 import useBackgrounds from '@/composables/useBackgrounds';
 import useAspectRatios from '@/composables/useAspectRatios';
 import usePreferencesStore from '@/composables/usePreferencesStore';
-import { ref, watch, toRefs, nextTick, computed, onMounted, onBeforeUnmount } from 'vue';
+import {
+    ref,
+    watch,
+    toRefs,
+    nextTick,
+    computed,
+    onMounted,
+    onDeactivated,
+    onBeforeUnmount,
+} from 'vue';
 
 const props = defineProps({
     name: { type: String, required: false },
@@ -247,7 +258,6 @@ const canvasButtonClasses =
 
 const preview = ref(null);
 const canvas = ref(null);
-const blocks = ref([]);
 const pane = ref(null);
 const exportAs = ref('png');
 const resizing = ref(false);
@@ -256,8 +266,6 @@ const showingBackgroundsModal = ref(false);
 
 const { $bus } = useNuxtApp();
 
-const { buildCodeBlocks } = useShiki();
-
 const { copy, copied } = useClipboard();
 
 const preferences = usePreferencesStore();
@@ -307,50 +315,33 @@ const {
 } = toRefs(settings);
 
 const hasScene = computed(() => settings.scene && settings.scene !== 'none');
+const { result: highlighted, flush: flushHighlighting } = useHighlightedCode(() => ({
+    code: code.value,
+    languages: languages.value,
+    theme: themeName.value,
+    opacity: themeOpacity.value,
+}));
+const blocks = computed(() => highlighted.value?.blocks ?? []);
+
+watch(
+    highlighted,
+    (value) => {
+        themeType.value = value.themeType;
+        themeBackground.value = value.themeBackground;
+    },
+    { flush: 'sync' }
+);
 
-function generateTokens() {
-    return buildCodeBlocks(
-        {
-            code: code.value,
-            languages: languages.value,
-            theme: themeName.value,
-            opacity: themeOpacity.value,
-        },
-        ({ blocks: code, themeType: type, themeBackground: bg }) => {
-            blocks.value = code;
-            themeType.value = type;
-            themeBackground.value = bg;
-        }
-    );
-}
-
-function generateImageFromPreview(method, pixelRatio = 3) {
-    const filter = (node) => !(node.dataset && node.dataset.hasOwnProperty('hide'));
-
-    if (!canvas.value?.$el) {
-        return;
-    }
-
-    return htmlToImage[method](canvas.value.$el, {
-        filter,
-        pixelRatio,
-    });
-}
-
-async function generateTemplateImage() {
-    try {
-        image.value = await generateImageFromPreview('toJpeg', 1);
-    } catch (e) {
-        console.error('Unable to generate template image.');
-    }
-}
+const { capture, captureThumbnail, scheduleThumbnail } = usePreviewCapture(canvas, {
+    prepare: flushHighlighting,
+    onThumbnail: (value) => {
+        image.value = value;
+    },
+});
 
 async function flushProjectPreview() {
-    templateGenerationDebounce?.cancel();
-
-    await generateTokens();
-    await nextTick();
-    await generateTemplateImage();
+    emitSettingsUpdate.cancel();
+    await captureThumbnail();
 
     emit('update:settings', cloneDeep(settings));
 }
@@ -364,7 +355,8 @@ function saveAs(method) {
         toSvg: 'svg',
     }[method];
 
-    generateImageFromPreview(method, preferences.exportPixelRatio).then((dataUrl) => {
+    capture(method, preferences.exportPixelRatio).then((dataUrl) => {
+        if (!dataUrl) return;
         const filename = name.value || title.value || 'Untitled-1';
 
         download(dataUrl, `${filename}.${extension}`);
@@ -384,7 +376,7 @@ function copyToClipboard() {
 
     const browser = new UAParser().getBrowser();
 
-    const promise = generateImageFromPreview('toBlob', preferences.exportPixelRatio);
+    const promise = capture('toBlob', preferences.exportPixelRatio);
 
     switch (browser.name?.toLowerCase()) {
         case 'safari':
@@ -406,7 +398,7 @@ function updateWithCustomBackground(id) {
     background.value = id;
     showingBackgroundsModal.value = false;
 
-    nextTick(generateTemplateImage);
+    scheduleThumbnail();
 }
 
 function deleteBackground(id) {
@@ -422,7 +414,7 @@ function deleteBackground(id) {
 function selectScene(id) {
     applyScene(settings, id);
 
-    nextTick(generateTemplateImage);
+    scheduleThumbnail();
 }
 
 function updateScale(delta) {
@@ -470,25 +462,15 @@ const backgroundAttrs = computed(() => {
     return getBackgroundAttrs(background.value);
 });
 
-let templateGenerationDebounce = null;
+const emitSettingsUpdate = debounce((values) => emit('update:settings', cloneDeep(values)), 250, {
+    maxWait: 1000,
+});
 
-watch(settings, (values) => emit('update:settings', values));
+watch(settings, emitSettingsUpdate);
 
 onMounted(() => {
     nextTick(() => createPanZoom(preview));
 
-    generateTokens();
-    generateTemplateImage();
-
-    // Our code will change quickly. We will make
-    // sure to debounce the token generation
-    // so performance doesn't take a hit.
-    watch(code, debounce(generateTokens, 500));
-
-    watch(themeOpacity, debounce(generateTokens, 500));
-
-    watch([languages, themeName], generateTokens);
-
     watch(background, () => (backgroundColor.value = null));
 
     watch(
@@ -518,13 +500,32 @@ onMounted(() => {
     );
 
     watch(
-        () => [settings, code],
-        (templateGenerationDebounce = debounce(generateTemplateImage, 5000)),
+        () => [
+            code.value,
+            ...Object.keys(settings)
+                .filter((key) => key !== 'image')
+                .map((key) => settings[key]),
+        ],
+        scheduleThumbnail,
         { deep: true }
     );
 });
 
-onBeforeUnmount(() => templateGenerationDebounce?.cancel());
+onDeactivated(() => emitSettingsUpdate.flush());
+onBeforeUnmount(() => emitSettingsUpdate.flush());
 
 const { aspectRatios } = useAspectRatios();
 </script>
+
+<style scoped>
+.is-resizing :deep(.backdrop-blur-xl),
+.is-resizing :deep(.backdrop-blur-md),
+.is-resizing :deep(.backdrop-blur-xs) {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+}
+
+.is-resizing :deep(.shadow-lg) {
+    box-shadow: none;
+}
+</style>
diff --git a/app/components/TabBackgrounds.vue b/app/components/TabBackgrounds.vue
index fe29ac1..b7edaae 100644
--- a/app/components/TabBackgrounds.vue
+++ b/app/components/TabBackgrounds.vue
@@ -52,7 +52,8 @@
                     :data-ref="`button-background-${id}`"
                     :active="background === id && !backgroundColor"
                     @delete="$emit('delete', id)"
-                    @click="$emit('select', id)"
+                    @mousedown.prevent
+                    @click="selectBackground($event, id)"
                 />
             </div>
         </ScrollArea>
@@ -62,7 +63,7 @@
 <script setup>
 import useBackgrounds from '@/composables/useBackgrounds';
 import { PlusCircleIcon, DropletIcon } from 'lucide-vue-next';
-import { onMounted, toRefs, watch } from 'vue';
+import { onMounted, toRefs } from 'vue';
 import useScrollRefIntoView from '@/composables/useScrollRefIntoView';
 
 const props = defineProps({
@@ -71,19 +72,18 @@ const props = defineProps({
     backgroundColor: { type: Object, required: false },
 });
 
-defineEmits(['add', 'color', 'delete', 'select']);
+const emit = defineEmits(['add', 'color', 'delete', 'select']);
 
 const { addCustomBackground } = useBackgrounds();
-const { background, backgrounds } = toRefs(props);
+const { background } = toRefs(props);
 const { scrollRefIntoView } = useScrollRefIntoView();
 
 onMounted(() => {
-    setTimeout(() => {
-        scrollRefIntoView(`button-background-${background.value}`);
-    }, 100);
-});
-
-watch(backgrounds, () => {
     scrollRefIntoView(`button-background-${background.value}`);
 });
+
+function selectBackground(event, id) {
+    event.currentTarget.focus({ preventScroll: true });
+    emit('select', id);
+}
 </script>
diff --git a/app/components/TabScenes.vue b/app/components/TabScenes.vue
index e1deda8..30e0f41 100644
--- a/app/components/TabScenes.vue
+++ b/app/components/TabScenes.vue
@@ -4,6 +4,7 @@
             <button
                 v-for="scene in scenes"
                 :key="scene.id"
+                :data-ref="`button-scene-${scene.id}`"
                 type="button"
                 class="flex w-32 flex-col items-center gap-2 rounded-xl p-1.5 text-xs font-medium text-zinc-600 transition-colors hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
                 :class="
@@ -11,7 +12,8 @@
                         ? 'bg-zinc-200/80 text-zinc-950 ring-1 ring-violet-500 dark:bg-zinc-950 dark:text-zinc-50 dark:ring-violet-400'
                         : ''
                 "
-                @click="$emit('select', scene.id)"
+                @mousedown.prevent
+                @click="selectScene($event, scene.id)"
             >
                 <span
                     class="scene-preview relative aspect-video w-full overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-700"
@@ -47,12 +49,27 @@
 </template>
 
 <script setup>
-defineProps({
+import { onMounted, toRefs } from 'vue';
+import useScrollRefIntoView from '@/composables/useScrollRefIntoView';
+
+const props = defineProps({
     scenes: { type: Array, required: true },
     activeScene: { type: String, required: true },
 });
 
-defineEmits(['select']);
+const emit = defineEmits(['select']);
+
+const { activeScene } = toRefs(props);
+const { scrollRefIntoView } = useScrollRefIntoView();
+
+onMounted(() => {
+    scrollRefIntoView(`button-scene-${activeScene.value}`);
+});
+
+function selectScene(event, id) {
+    event.currentTarget.focus({ preventScroll: true });
+    emit('select', id);
+}
 
 function previewStyle(scene) {
     if (scene.preview.background === 'checker') {
diff --git a/app/components/TabThemes.vue b/app/components/TabThemes.vue
index d887d35..582ece3 100644
--- a/app/components/TabThemes.vue
+++ b/app/components/TabThemes.vue
@@ -1,25 +1,36 @@
 <template>
-    <ScrollArea orientation="horizontal" force-vertical-scroll class="w-full">
-        <div class="grid auto-cols-max grid-flow-col grid-rows-2 gap-4 p-4">
-            <ButtonTheme
-                v-for="availableTheme in themes"
-                :code="code"
-                :settings="settings"
-                :languages="languages"
-                :key="availableTheme"
-                :theme="availableTheme"
-                :background="background"
-                :active="availableTheme === theme"
-                :data-ref="`button-theme-${availableTheme}`"
-                @click="$emit('select', availableTheme)"
-            />
+    <div
+        ref="viewport"
+        class="scrollbar-hide w-full overflow-x-auto"
+        @scroll.passive="scheduleVisibleRangeUpdate"
+        @wheel="onWheel"
+    >
+        <div class="relative" :style="canvasStyle">
+            <div
+                v-for="entry in visibleThemes"
+                :key="entry.theme"
+                class="absolute"
+                :style="entry.style"
+            >
+                <ButtonTheme
+                    :code="code"
+                    :settings="settings"
+                    :languages="languages"
+                    :theme="entry.theme"
+                    :background="background"
+                    :active="entry.theme === theme"
+                    :data-ref="`button-theme-${entry.theme}`"
+                    @mousedown.prevent
+                    @click="selectTheme($event, entry.theme)"
+                />
+            </div>
         </div>
-    </ScrollArea>
+    </div>
 </template>
 
 <script setup>
-import { onMounted } from 'vue';
-import useScrollRefIntoView from '@/composables/useScrollRefIntoView';
+import { computed, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue';
+import { useResizeObserver } from '@vueuse/core';
 
 const props = defineProps({
     code: { type: Array, required: true },
@@ -30,9 +41,127 @@ const props = defineProps({
     languages: { type: Array, required: true },
 });
 
-defineEmits(['select']);
+const emit = defineEmits(['select']);
 
-const { scrollRefIntoView } = useScrollRefIntoView();
+const rows = 2;
+const cardWidth = 256;
+const cardHeight = 192;
+const gap = 16;
+const padding = 16;
+const overscan = 0;
+const columnStride = cardWidth + gap;
 
-onMounted(() => scrollRefIntoView(`button-theme-${props.theme}`));
+const { theme, themes } = toRefs(props);
+const viewport = ref(null);
+const firstVisibleColumn = ref(0);
+const lastVisibleColumn = ref(0);
+let visibleRangeFrame = null;
+
+const columnCount = computed(() => Math.ceil(themes.value.length / rows));
+
+const canvasStyle = computed(() => ({
+    width: `${padding * 2 + columnCount.value * cardWidth + Math.max(0, columnCount.value - 1) * gap}px`,
+    height: `${padding * 2 + rows * cardHeight + (rows - 1) * gap}px`,
+}));
+
+const visibleThemes = computed(() => {
+    const entries = [];
+
+    for (let column = firstVisibleColumn.value; column <= lastVisibleColumn.value; column++) {
+        for (let row = 0; row < rows; row++) {
+            const index = column * rows + row;
+            const availableTheme = themes.value[index];
+
+            if (!availableTheme) {
+                continue;
+            }
+
+            entries.push({
+                theme: availableTheme,
+                style: {
+                    left: `${padding + column * columnStride}px`,
+                    top: `${padding + row * (cardHeight + gap)}px`,
+                },
+            });
+        }
+    }
+
+    return entries;
+});
+
+function updateVisibleRange() {
+    visibleRangeFrame = null;
+
+    if (!viewport.value) {
+        return;
+    }
+
+    const start = Math.floor(Math.max(0, viewport.value.scrollLeft - padding) / columnStride);
+    const end = Math.ceil(
+        (viewport.value.scrollLeft + viewport.value.clientWidth - padding) / columnStride
+    );
+
+    firstVisibleColumn.value = Math.max(0, start - overscan);
+    lastVisibleColumn.value = Math.min(columnCount.value - 1, end + overscan);
+}
+
+function scheduleVisibleRangeUpdate() {
+    if (visibleRangeFrame) {
+        cancelAnimationFrame(visibleRangeFrame);
+    }
+
+    visibleRangeFrame = requestAnimationFrame(updateVisibleRange);
+}
+
+function scrollToTheme() {
+    if (!viewport.value) {
+        return;
+    }
+
+    const index = themes.value.indexOf(theme.value);
+
+    if (index === -1) {
+        scheduleVisibleRangeUpdate();
+        return;
+    }
+
+    const column = Math.floor(index / rows);
+    const left = padding + column * columnStride;
+
+    viewport.value.scrollLeft = Math.max(0, left - (viewport.value.clientWidth - cardWidth) / 2);
+
+    scheduleVisibleRangeUpdate();
+}
+
+function onWheel(event) {
+    if (!viewport.value || Math.abs(event.deltaX) >= Math.abs(event.deltaY)) {
+        return;
+    }
+
+    event.preventDefault();
+    viewport.value.scrollLeft += event.deltaY;
+}
+
+function selectTheme(event, selectedTheme) {
+    event.currentTarget.focus({ preventScroll: true });
+    emit('select', selectedTheme);
+}
+
+useResizeObserver(viewport, scheduleVisibleRangeUpdate);
+
+onMounted(scrollToTheme);
+watch(
+    themes,
+    (_, previous) => {
+        if (previous.length === 0) scrollToTheme();
+        else scheduleVisibleRangeUpdate();
+    },
+    { flush: 'post' }
+);
+
+onBeforeUnmount(() => {
+    if (visibleRangeFrame) {
+        cancelAnimationFrame(visibleRangeFrame);
+    }
+});
 </script>
diff --git a/app/composables/useHighlightedCode.js b/app/composables/useHighlightedCode.js
new file mode 100644
index 0000000..aa63b9a
--- /dev/null
+++ b/app/composables/useHighlightedCode.js
@@ -0,0 +1,71 @@
+import { debounce } from 'lodash';
+import { onScopeDispose, ref, shallowRef, toValue, watch } from 'vue';
+import useShiki from '@/composables/useShiki';
+
+export default function (config, { delay = 150, limit = null, enabled = true } = {}) {
+    const { buildCodeBlocks } = useShiki();
+    const result = shallowRef(null);
+    const loading = ref(false);
+    let revision = 0;
+    let renderedRevision = -1;
+    let pending = null;
+    let disposed = false;
+
+    const schedule = debounce(refresh, delay);
+
+    async function refresh() {
+        schedule.cancel();
+        if (disposed || !toValue(enabled)) return;
+        if (renderedRevision === revision) return result.value;
+        if (pending?.revision === revision) return pending.promise;
+
+        const current = revision;
+        loading.value = true;
+        const promise = buildCodeBlocks(toValue(config), limit)
+            .then((value) => {
+                if (current !== revision) return;
+                result.value = value;
+                renderedRevision = current;
+                return value;
+            })
+            .finally(() => {
+                if (current === revision) {
+                    loading.value = false;
+                    pending = null;
+                }
+            });
+
+        pending = { revision: current, promise };
+        return promise;
+    }
+
+    async function flush() {
+        while (!disposed && toValue(enabled)) {
+            const current = revision;
+            const value = await refresh();
+            if (current === revision) return value;
+        }
+    }
+
+    watch(
+        () => [toValue(config), toValue(enabled)],
+        ([, active], previous) => {
+            revision++;
+            schedule.cancel();
+            loading.value = active;
+            if (!active) return;
+            if (!previous || !previous[1]) return refresh();
+            schedule();
+        },
+        { immediate: true, deep: true, flush: 'sync' }
+    );
+
+    onScopeDispose(() => {
+        disposed = true;
+        revision++;
+        schedule.cancel();
+        loading.value = false;
+    });
+
+    return { result, loading, flush };
+}
diff --git a/app/composables/useMonaco.js b/app/composables/useMonaco.js
new file mode 100644
index 0000000..504e4d0
--- /dev/null
+++ b/app/composables/useMonaco.js
@@ -0,0 +1,136 @@
+import themeList from '@/data/monaco-themes/themelist.json';
+
+const builtInThemes = new Set(['vs', 'vs-light', 'vs-dark', 'hc-black']);
+const loadedThemes = new Set(builtInThemes);
+
+const themeLoaders = import.meta.glob(
+    ['../data/monaco-themes/*.json', '!../data/monaco-themes/themelist.json'],
+    { import: 'default' }
+);
+
+const languageContributions = import.meta.glob(
+    '../../node_modules/monaco-editor/esm/vs/basic-languages/*/*.contribution.js'
+);
+
+const languageLoaders = Object.fromEntries(
+    Object.entries(languageContributions).map(([path, loader]) => [path.split('/').at(-2), loader])
+);
+const languageAliases = {
+    c: 'cpp',
+    coffeescript: 'coffee',
+    proto: 'protobuf',
+    aes: 'sophia',
+    sol: 'solidity',
+    verilog: 'systemverilog',
+};
+const languageFeatures = {
+    json: () => import('monaco-editor/esm/vs/language/json/monaco.contribution.js'),
+    css: () => import('monaco-editor/esm/vs/language/css/monaco.contribution.js'),
+    scss: () => import('monaco-editor/esm/vs/language/css/monaco.contribution.js'),
+    less: () => import('monaco-editor/esm/vs/language/css/monaco.contribution.js'),
+    html: () => import('monaco-editor/esm/vs/language/html/monaco.contribution.js'),
+    handlebars: () => import('monaco-editor/esm/vs/language/html/monaco.contribution.js'),
+    razor: () => import('monaco-editor/esm/vs/language/html/monaco.contribution.js'),
+    javascript: () => import('monaco-editor/esm/vs/language/typescript/monaco.contribution.js'),
+    typescript: () => import('monaco-editor/esm/vs/language/typescript/monaco.contribution.js'),
+};
+
+let monacoPromise = null;
+
+function loadMonaco() {
+    if (monacoPromise) {
+        return monacoPromise;
+    }
+
+    self.MonacoEnvironment = {
+        getWorker: (_, label) => {
+            switch (label) {
+                case 'json':
+                    return new Worker(
+                        new URL(
+                            'monaco-editor/esm/vs/language/json/json.worker.js',
+                            import.meta.url
+                        ),
+                        { type: 'module' }
+                    );
+                case 'css':
+                case 'scss':
+                case 'less':
+                    return new Worker(
+                        new URL('monaco-editor/esm/vs/language/css/css.worker.js', import.meta.url),
+                        { type: 'module' }
+                    );
+                case 'html':
+                case 'handlebars':
+                case 'razor':
+                    return new Worker(
+                        new URL(
+                            'monaco-editor/esm/vs/language/html/html.worker.js',
+                            import.meta.url
+                        ),
+                        { type: 'module' }
+                    );
+                case 'javascript':
+                case 'typescript':
+                    return new Worker(
+                        new URL(
+                            'monaco-editor/esm/vs/language/typescript/ts.worker.js',
+                            import.meta.url
+                        ),
+                        { type: 'module' }
+                    );
+                default:
+                    return new Worker(
+                        new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url),
+                        { type: 'module' }
+                    );
+            }
+        },
+    };
+
+    monacoPromise = import('monaco-editor/esm/vs/editor/edcore.main.js');
+
+    return monacoPromise;
+}
+
+async function loadMonacoLanguage(language) {
+    const contribution = languageAliases[language] ?? language.split('.')[0];
+    const loader = languageLoaders[contribution];
+
+    await Promise.all([loader?.(), languageFeatures[language]?.()]);
+}
+
+async function loadMonacoTheme(monaco, theme) {
+    if (loadedThemes.has(theme)) {
+        return;
+    }
+
+    const filename = themeList[theme];
+    const loader = themeLoaders[`../data/monaco-themes/${filename}.json`];
+
+    if (!loader) {
+        return;
+    }
+
+    monaco.editor.defineTheme(theme, await loader());
+    loadedThemes.add(theme);
+}
+
+export default function () {
+    async function prepare({ language, theme }) {
+        const monaco = await loadMonaco();
+
+        await Promise.all([loadMonacoLanguage(language), loadMonacoTheme(monaco, theme)]);
+
+        return monaco;
+    }
+
+    return {
+        prepare,
+        loadLanguage: async (language) => {
+            await loadMonaco();
+            await loadMonacoLanguage(language);
+        },
+        loadTheme: async (theme) => loadMonacoTheme(await loadMonaco(), theme),
+    };
+}
diff --git a/app/composables/usePreviewCapture.js b/app/composables/usePreviewCapture.js
new file mode 100644
index 0000000..3cc1d2c
--- /dev/null
+++ b/app/composables/usePreviewCapture.js
@@ -0,0 +1,93 @@
+import { debounce } from 'lodash';
+import { nextTick, onActivated, onDeactivated, onMounted, onScopeDispose, toValue } from 'vue';
+
+let htmlToImagePromise;
+
+export default function (canvas, { prepare, onThumbnail }) {
+    let idle = null;
+    let idleType = null;
+    let revision = 0;
+    let active = false;
+    const schedule = debounce(queueIdleCapture, 5000);
+
+    function cancel() {
+        revision++;
+        schedule.cancel();
+        if (idle !== null) {
+            if (idleType === 'idle') cancelIdleCallback(idle);
+            else clearTimeout(idle);
+        }
+        idle = null;
+        idleType = null;
+    }
+
+    async function renderImage(method, pixelRatio) {
+        cancel();
+        htmlToImagePromise ??= import('html-to-image');
+        const htmlToImage = await htmlToImagePromise;
+        await nextTick();
+        await prepare();
+        await nextTick();
+
+        cancel();
+        const current = revision;
+        const element = toValue(canvas)?.$el;
+        if (!element?.isConnected) return {};
+
+        const image = await htmlToImage[method](element, {
+            pixelRatio,
+            filter: (node) => !node.dataset || !Object.hasOwn(node.dataset, 'hide'),
+        });
+        return { image, revision: current };
+    }
+
+    async function capture(method, pixelRatio = 3) {
+        const { image } = await renderImage(method, pixelRatio);
+        return image;
+    }
+
+    async function captureThumbnail() {
+        const { image, revision: current } = await renderImage('toJpeg', 1);
+        if (current === revision && image && toValue(canvas)?.$el.isConnected) onThumbnail(image);
+    }
+
+    function queueIdleCapture() {
+        const generate = () => {
+            idle = null;
+            idleType = null;
+            captureThumbnail().catch((error) =>
+                console.error('Unable to generate template image.', error)
+            );
+        };
+        if (typeof requestIdleCallback === 'function') {
+            idleType = 'idle';
+            idle = requestIdleCallback(generate, { timeout: 2500 });
+        } else {
+            idleType = 'timeout';
+            idle = setTimeout(generate, 1500);
+        }
+    }
+
+    function scheduleThumbnail() {
+        cancel();
+        if (active) schedule();
+    }
+
+    function activate() {
+        active = true;
+        cancel();
+        queueIdleCapture();
+    }
+
+    function deactivate() {
+        active = false;
+        cancel();
+    }
+
+    onMounted(activate);
+    onActivated(activate);
+    onDeactivated(deactivate);
+    onScopeDispose(deactivate);
+
+    return { capture, captureThumbnail, scheduleThumbnail, cancel };
+}
diff --git a/app/composables/useShiki.js b/app/composables/useShiki.js
index 9e666a8..c172fad 100644
--- a/app/composables/useShiki.js
+++ b/app/composables/useShiki.js
@@ -1,16 +1,8 @@
 import hexAlpha from 'hex-alpha';
-import { defaults } from 'lodash';
-
-function yieldToMain() {
-    if (typeof requestIdleCallback === 'function') {
-        return new Promise((resolve) => requestIdleCallback(() => resolve(), { timeout: 50 }));
-    }
-
-    return new Promise((resolve) => setTimeout(resolve, 0));
-}
+import { cloneDeep } from 'lodash';
 
 export default function () {
-    const { $queue, $shiki } = useNuxtApp();
+    const { $shiki } = useNuxtApp();
     const { highlightLanguage } = useLanguages();
 
     const themeTypeOverrides = {
@@ -21,62 +13,33 @@ export default function () {
         return highlightLanguage(languages.find((lang) => lang.id === id)?.name);
     }
 
-    function buildCodeBlocks(config, callback, limit = null) {
-        const { code, languages, opacity, theme } = defaults(config, {
-            code: [],
-            languages: [],
-            opacity: 100,
-            theme: 'github-dark',
-        });
-
-        return new Promise((resolve, reject) => {
-            $queue.push(async () => {
-                try {
-                    await yieldToMain();
-
-                    await $shiki.loadLanguages(
-                        languages.map((lang) => highlightLanguage(lang.name))
-                    );
-
-                    await yieldToMain();
-
-                    await $shiki.loadTheme(theme);
-
-                    const blocks = [];
-
-                    for (const block of code) {
-                        await yieldToMain();
-
-                        blocks.push({
-                            added: block.added,
-                            removed: block.removed,
-                            focused: block.focused,
-                            lines: await $shiki.tokens(
-                                limit
-                                    ? block.value?.split('\n').slice(0, limit).join('\n')
-                                    : block.value,
-                                findEditorLanguageById(languages, block.id),
-                                theme
-                            ),
-                        });
-                    }
-
-                    const { name, fg, bg, type } = $shiki.getTheme(theme);
-
-                    callback({
-                        blocks: blocks,
-                        themeType:
-                            themeTypeOverrides[name] ?? (name.includes('light') ? 'light' : type),
-                        themeForeground: hexAlpha(fg, parseFloat(opacity)),
-                        themeBackground: hexAlpha(bg, parseFloat(opacity)),
-                    });
-
-                    resolve();
-                } catch (e) {
-                    reject(e);
-                }
-            });
-        });
+    async function buildCodeBlocks(config, limit = null) {
+        const {
+            code = [],
+            languages = [],
+            opacity = 100,
+            theme = 'github-dark',
+        } = cloneDeep(config);
+
+        const sourceBlocks = code.map((block) => ({
+            value: limit ? block.value?.split('\n').slice(0, limit).join('\n') : block.value,
+            language: findEditorLanguageById(languages, block.id),
+        }));
+
+        const result = await $shiki.tokenizeBlocks({ blocks: sourceBlocks, theme });
+        const { name, fg, bg, type } = result.theme;
+
+        return {
+            blocks: code.map((block, index) => ({
+                added: block.added,
+                removed: block.removed,
+                focused: block.focused,
+                lines: result.blocks[index],
+            })),
+            themeType: themeTypeOverrides[name] ?? (name.includes('light') ? 'light' : type),
+            themeForeground: hexAlpha(fg, parseFloat(opacity)),
+            themeBackground: hexAlpha(bg, parseFloat(opacity)),
+        };
     }
 
     return { buildCodeBlocks };
diff --git a/app/plugins/queue.js b/app/plugins/queue.js
deleted file mode 100644
index 33a28b8..0000000
--- a/app/plugins/queue.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Queue from 'queue';
-
-export default defineNuxtPlugin(() => {
-    return {
-        provide: {
-            queue: new Queue({
-                autostart: true,
-                concurrency: 2,
-            }),
-        },
-    };
-});
diff --git a/app/plugins/shiki.client.js b/app/plugins/shiki.client.js
index b56d9b1..98fcd70 100644
--- a/app/plugins/shiki.client.js
+++ b/app/plugins/shiki.client.js
@@ -1,130 +1,71 @@
 import { ref } from 'vue';
-import collect from 'collect.js';
 
 export default defineNuxtPlugin(() => {
-    let highlighter = null;
-    const allLanguageIds = ref([]);
-    const allThemeIds = ref([]);
-    let readyResolve;
-
-    const ready = new Promise((resolve) => {
-        readyResolve = resolve;
+    const worker = new Worker(new URL('../workers/shiki.worker.js', import.meta.url), {
+        type: 'module',
     });
 
-    // Defer shiki loading until after the app is mounted
-    if (import.meta.client) {
-        setTimeout(async () => {
-            try {
-                const { createHighlighter, bundledLanguagesInfo, bundledThemesInfo } =
-                    await import('shiki');
-
-                highlighter = await createHighlighter({
-                    themes: ['github-light'],
-                    langs: ['html', 'xml', 'sql', 'javascript', 'json', 'css', 'php'],
-                });
+    const pending = new Map();
+    const allLanguageIds = ref([]);
+    const allThemeIds = ref([]);
+    let requestId = 0;
+    let failure = null;
 
-                allLanguageIds.value = bundledLanguagesInfo
-                    .map((lang) => lang.id)
-                    .filter((id) => !['php-html', 'html-derivative'].includes(id));
+    worker.addEventListener('message', ({ data: { id, result, error } }) => {
+        const request = pending.get(id);
 
-                const bundledIds = collect(bundledThemesInfo.map((t) => t.id))
-                    .filter((theme) => !['css-variables'].some((t) => theme.includes(t)))
-                    .sort()
-                    .toArray();
+        if (!request) {
+            return;
+        }
 
-                // Load custom theme IDs from the static manifest
-                let customIds = [];
+        pending.delete(id);
 
-                try {
-                    const manifest = await fetch('/shiki/themes/all.json').then((r) => r.json());
-                    customIds = manifest.filter((id) => !bundledIds.includes(id)).sort();
-                } catch {
-                    // No custom themes manifest found
-                }
+        if (error) {
+            request.reject(new Error(error));
+            return;
+        }
 
-                allThemeIds.value = [...bundledIds, ...customIds].sort();
+        request.resolve(result);
+    });
 
-                readyResolve();
-            } catch (e) {
-                console.error('Failed to initialize shiki:', e);
-                readyResolve();
-            }
-        }, 0);
+    function failRequests(event) {
+        failure = new Error(event.message || 'Unable to communicate with the syntax highlighter.');
+        pending.forEach(({ reject }) => reject(failure));
+        pending.clear();
+        worker.terminate();
     }
 
-    const shiki = {
-        ready,
-
-        async loadLanguage(lang) {
-            await ready;
-            if (this.languageIsLoaded(lang)) return;
-            return await highlighter.loadLanguage(lang);
-        },
-
-        async loadLanguages(langs = []) {
-            return await Promise.all(langs.map(async (lang) => await this.loadLanguage(lang)));
-        },
-
-        async loadTheme(theme) {
-            await ready;
-            if (this.themeIsLoaded(theme)) return;
-
-            // Try loading as a bundled shiki theme first.
-            // If that fails, fetch from the static custom themes directory.
-            try {
-                return await highlighter.loadTheme(theme);
-            } catch {
-                const themeData = await fetch(`/shiki/themes/${theme}.json`).then((r) => {
-                    if (!r.ok) throw new Error(`Theme "${theme}" not found.`);
-                    return r.json();
-                });
-
-                return await highlighter.loadTheme(themeData);
-            }
-        },
-
-        getTheme(theme) {
-            return highlighter?.getTheme(theme);
-        },
-
-        languages() {
-            return allLanguageIds.value;
-        },
-
-        languageIsLoaded(lang) {
-            return this.loadedLanguages().includes(lang);
-        },
-
-        loadedLanguages() {
-            return highlighter?.getLoadedLanguages() ?? [];
-        },
-
-        themes() {
-            return allThemeIds.value;
-        },
-
-        themeIsLoaded(theme) {
-            return this.loadedThemes().includes(theme);
-        },
+    worker.addEventListener('error', failRequests);
+    worker.addEventListener('messageerror', failRequests);
 
-        loadedThemes() {
-            return highlighter?.getLoadedThemes() ?? [];
-        },
+    function send(method, payload = {}) {
+        if (failure) return Promise.reject(failure);
 
-        async tokens(code, lang, theme) {
-            await ready;
+        const id = ++requestId;
 
-            if (code.includes('<?php') && lang === 'php') {
-                await this.loadLanguage('php');
-            }
+        return new Promise((resolve, reject) => {
+            pending.set(id, { resolve, reject });
+            worker.postMessage({ id, method, payload });
+        });
+    }
 
-            return highlighter.codeToTokensBase(code, { lang, theme });
-        },
-    };
+    const ready = send('initialize').then(({ languages, themes }) => {
+        allLanguageIds.value = languages;
+        allThemeIds.value = themes;
+    });
 
     return {
         provide: {
-            shiki,
+            shiki: {
+                ready,
+                languages: () => allLanguageIds.value,
+                themes: () => allThemeIds.value,
+                async tokenizeBlocks(payload) {
+                    await ready;
+
+                    return send('tokenizeBlocks', payload);
+                },
+            },
         },
     };
 });
diff --git a/app/workers/shiki.worker.js b/app/workers/shiki.worker.js
new file mode 100644
index 0000000..49234c6
--- /dev/null
+++ b/app/workers/shiki.worker.js
@@ -0,0 +1,95 @@
+import { bundledLanguagesInfo, bundledThemesInfo, createHighlighter } from 'shiki';
+
+let highlighter = null;
+let initialization = null;
+
+async function initialize() {
+    if (initialization) {
+        return initialization;
+    }
+
+    initialization = (async () => {
+        highlighter = await createHighlighter({
+            themes: ['github-light'],
+            langs: ['html', 'xml', 'sql', 'javascript', 'json', 'css', 'php'],
+        });
+
+        const languages = bundledLanguagesInfo
+            .map(({ id }) => id)
+            .filter((id) => !['php-html', 'html-derivative'].includes(id));
+
+        const bundledThemes = bundledThemesInfo
+            .map(({ id }) => id)
+            .filter((theme) => !theme.includes('css-variables'));
+
+        const customThemes = await fetch('/shiki/themes/all.json')
+            .then((response) => (response.ok ? response.json() : []))
+            .catch(() => []);
+
+        return {
+            languages,
+            themes: [...new Set([...bundledThemes, ...customThemes])].sort(),
+        };
+    })();
+
+    return initialization;
+}
+
+async function loadLanguage(language) {
+    if (!highlighter.getLoadedLanguages().includes(language)) {
+        await highlighter.loadLanguage(language);
+    }
+}
+
+async function loadTheme(theme) {
+    if (highlighter.getLoadedThemes().includes(theme)) {
+        return;
+    }
+
+    try {
+        await highlighter.loadTheme(theme);
+    } catch {
+        const response = await fetch(`/shiki/themes/${theme}.json`);
+
+        if (!response.ok) {
+            throw new Error(`Theme "${theme}" not found.`);
+        }
+
+        await highlighter.loadTheme(await response.json());
+    }
+}
+
+async function tokenizeBlocks({ blocks, theme }) {
+    await initialize();
+
+    const languages = [...new Set(blocks.map(({ language }) => language))];
+
+    await Promise.all([loadTheme(theme), ...languages.map(loadLanguage)]);
+
+    const tokenized = blocks.map(({ value, language }) =>
+        highlighter.codeToTokensBase(value, { lang: language, theme })
+    );
+
+    const { name, fg, bg, type } = highlighter.getTheme(theme);
+
+    return {
+        blocks: tokenized,
+        theme: { name, fg, bg, type },
+    };
+}
+
+const handlers = {
+    initialize,
+    tokenizeBlocks,
+};
+
+self.addEventListener('message', async ({ data: { id, method, payload } }) => {
+    try {
+        self.postMessage({ id, result: await handlers[method](payload) });
+    } catch (error) {
+        self.postMessage({
+            id,
+            error: error instanceof Error ? error.message : String(error),
+        });
+    }
+});
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ef3d425..3bf628f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -17,6 +17,9 @@ export default defineNuxtConfig({
 
     vite: {
         plugins: [tailwindcss()],
+        worker: {
+            format: 'es',
+        },
     },
 
     site: {
@@ -25,7 +28,7 @@ export default defineNuxtConfig({
     },
 
     routeRules: {
-        '/': { ssr: false, ogImage: { component: 'Default' } },
+        '/': { ssr: false, prerender: true, ogImage: { component: 'Default' } },
         '/generator': { ssr: false, ogImage: { component: 'Default' } },
         '/download': { prerender: true },
     },
@@ -78,11 +81,38 @@ export default defineNuxtConfig({
         workbox: {
             skipWaiting: true,
             clientsClaim: true,
+            cleanupOutdatedCaches: true,
             navigateFallback: '/',
-            globPatterns: ['**/*.{js,css,html,png,svg,ico,woff2}'],
-            globIgnores: ['**/*.worker-*.js'],
+            // Cache the app shell and code before installation completes so it
+            // can reopen offline. Artwork remains cached only as it is used.
+            globPatterns: ['**/*.{js,css,html,ico,woff2}'],
+            globIgnores: ['**/ts.worker-*.js'],
             maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
             runtimeCaching: [
+                {
+                    urlPattern: /\/_nuxt\//,
+                    handler: 'CacheFirst',
+                    options: {
+                        cacheName: 'asset-cache',
+                        expiration: { maxEntries: 120, maxAgeSeconds: 60 * 60 * 24 * 365 },
+                    },
+                },
+                {
+                    urlPattern: /\/background-thumbnails\//,
+                    handler: 'CacheFirst',
+                    options: {
+                        cacheName: 'background-thumbnail-cache',
+                        expiration: { maxEntries: 80, maxAgeSeconds: 60 * 60 * 24 * 90 },
+                    },
+                },
+                {
+                    urlPattern: /\/shiki\/themes\//,
+                    handler: 'CacheFirst',
+                    options: {
+                        cacheName: 'theme-cache',
+                        expiration: { maxEntries: 40, maxAgeSeconds: 60 * 60 * 24 * 90 },
+                    },
+                },
                 {
                     urlPattern: /\.worker.*\.js$/,
                     handler: 'CacheFirst',
@@ -139,7 +169,6 @@ export default defineNuxtConfig({
                     ? [{ rel: 'manifest', href: '/manifest.webmanifest' }]
                     : []),
             ],
-
         },
     },
-})
+});
diff --git a/package-lock.json b/package-lock.json
index 62ed966..b6df756 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,7 +47,6 @@
                 "pinia-plugin-persistedstate": "^4.7.1",
                 "prettier": "^3.8.1",
                 "prettier-plugin-tailwindcss": "^0.7.2",
-                "queue": "^7.0.0",
                 "radix-vue": "^1.9.17",
                 "reka-ui": "^2.9.2",
                 "satori": "^0.26.0",
@@ -14857,13 +14856,6 @@
             ],
             "license": "MIT"
         },
-        "node_modules/queue": {
-            "version": "7.0.0",
-            "resolved": "https://registry.npmjs.org/queue/-/queue-7.0.0.tgz",
-            "integrity": "sha512-sphwS7HdfQnvrJAXUNAUgpf9H/546IE3p/5Lf2jr71O4udEYlqAhkevykumas2FYuMkX/29JMOgrRdRoYZ/X9w==",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/queue-microtask": {
             "version": "1.2.3",
             "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
diff --git a/package.json b/package.json
index 6785734..b14c11d 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,6 @@
         "pinia-plugin-persistedstate": "^4.7.1",
         "prettier": "^3.8.1",
         "prettier-plugin-tailwindcss": "^0.7.2",
-        "queue": "^7.0.0",
         "radix-vue": "^1.9.17",
         "reka-ui": "^2.9.2",
         "satori": "^0.26.0",
diff --git a/tests/components/Monaco.test.js b/tests/components/Monaco.test.js
index 888548d..3c15a60 100644
--- a/tests/components/Monaco.test.js
+++ b/tests/components/Monaco.test.js
@@ -1,7 +1,9 @@
 import { mount, flushPromises } from '@vue/test-utils';
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { defineComponent, nextTick, ref } from 'vue';
-import Monaco from '~/components/Monaco.vue';
+import Monaco from '~/components/Monaco.client.vue';
+import usePreferencesStore from '~/composables/usePreferencesStore';
+import useApplicationStore from '~/composables/useApplicationStore';
 
 const monaco = vi.hoisted(() => {
     let release;
@@ -14,23 +16,50 @@ const monaco = vi.hoisted(() => {
         deltaDecorations: vi.fn(() => []),
         layout: vi.fn(),
         dispose: vi.fn(),
+        getModel: vi.fn(() => ({ getAllDecorations: () => [] })),
+        updateOptions: vi.fn(),
+        getValue: vi.fn(() => 'original code'),
+        setValue: vi.fn(),
     };
 
-    return { loading, release, instance, create: vi.fn(() => instance) };
-});
-
-vi.mock('monaco-editor', async () => {
-    await monaco.loading;
-
-    return {
-        editor: { create: monaco.create, remeasureFonts: vi.fn(), defineTheme: vi.fn() },
+    const api = {
+        editor: {
+            create: vi.fn(() => instance),
+            remeasureFonts: vi.fn(),
+            setTheme: vi.fn(),
+            setModelLanguage: vi.fn(),
+        },
         KeyMod: { CtrlCmd: 1, Shift: 2 },
         KeyCode: { KeyA: 1, KeyR: 2, KeyF: 3 },
     };
+
+    return {
+        loading,
+        release,
+        instance,
+        api,
+        create: api.editor.create,
+        prepare: vi.fn(async () => {
+            await loading;
+            return api;
+        }),
+        loadLanguage: vi.fn(async () => {}),
+        loadTheme: vi.fn(async () => {}),
+    };
 });
-vi.mock('../../app/data/monaco-themes/themelist.json', () => ({ default: {} }));
+
+vi.mock('~/composables/useMonaco', () => ({
+    default: () => ({
+        prepare: monaco.prepare,
+        loadLanguage: monaco.loadLanguage,
+        loadTheme: monaco.loadTheme,
+    }),
+}));
 
 describe('Monaco', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
     it('finishes loading while its tab is cached and reuses the editor on return', async () => {
         const fonts = Object.getOwnPropertyDescriptor(document, 'fonts');
         Object.defineProperty(document, 'fonts', {
@@ -87,4 +116,112 @@ describe('Monaco', () => {
 
         expect(monaco.create).not.toHaveBeenCalled();
     });
+    it('keeps the latest language when lazy imports resolve out of order', async () => {
+        Object.defineProperty(document, 'fonts', {
+            configurable: true,
+            value: { ready: Promise.resolve() },
+        });
+        const wrapper = mount(Monaco, { props: { language: 'php' } });
+        await flushPromises();
+        let release;
+        monaco.loadLanguage.mockImplementationOnce(
+            () =>
+                new Promise((resolve) => {
+                    release = resolve;
+                })
+        );
+        await wrapper.setProps({ language: 'python' });
+        await wrapper.setProps({ language: 'json' });
+        await flushPromises();
+        release();
+        await flushPromises();
+
+        expect(monaco.api.editor.setModelLanguage.mock.lastCall[1]).toBe('json');
+        expect(monaco.api.editor.setModelLanguage).not.toHaveBeenCalledWith(
+            expect.anything(),
+            'python'
+        );
+        wrapper.unmount();
+    });
+
+    it('discards pending language and theme updates after unmount', async () => {
+        Object.defineProperty(document, 'fonts', {
+            configurable: true,
+            value: { ready: Promise.resolve() },
+        });
+        let releaseLanguage;
+        let releaseTheme;
+        monaco.loadLanguage.mockImplementationOnce(
+            () =>
+                new Promise((resolve) => {
+                    releaseLanguage = resolve;
+                })
+        );
+        monaco.loadTheme.mockImplementationOnce(
+            () =>
+                new Promise((resolve) => {
+                    releaseTheme = resolve;
+                })
+        );
+        const wrapper = mount(Monaco);
+        await flushPromises();
+        wrapper.unmount();
+        releaseLanguage();
+        releaseTheme();
+        await flushPromises();
+
+        expect(monaco.api.editor.setModelLanguage).not.toHaveBeenCalled();
+        expect(monaco.api.editor.setTheme).not.toHaveBeenCalled();
+    });
+    it('loads the current language when it changes before the editor finishes preparing', async () => {
+        Object.defineProperty(document, 'fonts', {
+            configurable: true,
+            value: { ready: Promise.resolve() },
+        });
+        let release;
+        monaco.prepare.mockImplementationOnce(
+            () =>
+                new Promise((resolve) => {
+                    release = resolve;
+                })
+        );
+        const wrapper = mount(Monaco, { props: { language: 'php' } });
+        await wrapper.setProps({ language: 'json' });
+        release(monaco.api);
+        await flushPromises();
+
+        expect(monaco.loadLanguage).toHaveBeenCalledWith('json');
+        expect(monaco.api.editor.setModelLanguage.mock.lastCall[1]).toBe('json');
+        wrapper.unmount();
+    });
+
+    it('keeps the latest theme when lazy imports resolve out of order', async () => {
+        Object.defineProperty(document, 'fonts', {
+            configurable: true,
+            value: { ready: Promise.resolve() },
+        });
+        const preferences = usePreferencesStore();
+        useApplicationStore().isDarkMode = true;
+        const originalTheme = preferences.editorDarkTheme;
+        const wrapper = mount(Monaco);
+        await flushPromises();
+        let release;
+        monaco.loadTheme.mockImplementationOnce(
+            () =>
+                new Promise((resolve) => {
+                    release = resolve;
+                })
+        );
+        preferences.editorDarkTheme = 'monokai';
+        await nextTick();
+        preferences.editorDarkTheme = 'dracula';
+        await flushPromises();
+        release();
+        await flushPromises();
+
+        expect(monaco.api.editor.setTheme.mock.lastCall[0]).toBe('dracula');
+        expect(monaco.api.editor.setTheme).not.toHaveBeenCalledWith('monokai');
+        wrapper.unmount();
+        preferences.editorDarkTheme = originalTheme;
+    });
 });
diff --git a/tests/components/Preview.test.js b/tests/components/Preview.test.js
new file mode 100644
index 0000000..e26a4e6
--- /dev/null
+++ b/tests/components/Preview.test.js
@@ -0,0 +1,163 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { defineComponent, nextTick, ref } from 'vue';
+import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest';
+import Preview from '~/components/Preview.vue';
+
+const highlighted = { blocks: [], themeType: 'dark', themeBackground: '#000000' };
+const buildCodeBlocks = vi.hoisted(() => vi.fn());
+const copy = vi.hoisted(() => vi.fn());
+const download = vi.hoisted(() => vi.fn());
+const toPng = vi.hoisted(() => vi.fn(async () => 'png'));
+const toBlob = vi.hoisted(() => vi.fn(async () => new Blob(['image'])));
+vi.mock('downloadjs', () => ({ default: download }));
+vi.mock('ua-parser-js', () => ({
+    UAParser: class {
+        getBrowser() {
+            return { name: 'Safari' };
+        }
+    },
+}));
+vi.mock('~/composables/useClipboard', () => ({ default: () => ({ copy, copied: ref(false) }) }));
+const toJpeg = vi.hoisted(() => vi.fn(async () => 'data:image/jpeg;base64,thumbnail'));
+vi.mock('html-to-image', () => ({ toJpeg, toPng, toBlob }));
+vi.mock('~/composables/useShiki', () => ({ default: () => ({ buildCodeBlocks }) }));
+vi.mock('~/composables/usePanZoom', () => ({
+    default: () => ({
+        zoom: ref(1),
+        centerGuides: {},
+        createPanZoom: vi.fn(),
+    }),
+}));
+
+beforeEach(() => buildCodeBlocks.mockResolvedValue(highlighted));
+
+afterEach(() => {
+    vi.useRealTimers();
+    vi.clearAllMocks();
+});
+
+describe('Preview', () => {
+    it('flushes recent appearance changes when switching away from a cached tab', async () => {
+        vi.useFakeTimers();
+        const showing = ref(true);
+        const updates = vi.fn();
+        const wrapper = mount(
+            defineComponent({
+                components: { Preview },
+                setup: () => ({ showing, updates }),
+                template:
+                    '<KeepAlive><Preview v-if="showing" :code="[]" :defaults="{}" :viewport="{}" :languages="[]" @update:settings="updates" /></KeepAlive>',
+            }),
+            { shallow: true, global: { stubs: { Preview: false, KeepAlive: false } } }
+        );
+        const preview = wrapper.getComponent(Preview);
+        preview.vm.$.setupState.settings.showShadow = false;
+        await nextTick();
+        expect(updates).not.toHaveBeenCalled();
+
+        showing.value = false;
+        await nextTick();
+
+        expect(updates.mock.lastCall[0].showShadow).toBe(false);
+        wrapper.unmount();
+    });
+
+    it('cancels queued tokenization before saving an explicit preview', async () => {
+        vi.useFakeTimers();
+        const wrapper = mount(Preview, {
+            shallow: true,
+            props: { code: [], defaults: {}, viewport: {}, languages: [] },
+        });
+        await flushPromises();
+        buildCodeBlocks.mockClear();
+        await wrapper.setProps({ code: [{ id: 'editor', value: 'latest code' }] });
+        let finish;
+        buildCodeBlocks.mockImplementationOnce(
+            () =>
+                new Promise((resolve) => {
+                    finish = resolve;
+                })
+        );
+        const saving = wrapper.vm.flushProjectPreview();
+        await vi.advanceTimersByTimeAsync(200);
+
+        expect(buildCodeBlocks).toHaveBeenCalledOnce();
+        expect(buildCodeBlocks.mock.lastCall[0].code[0].value).toBe('latest code');
+        finish(highlighted);
+        await saving;
+        wrapper.unmount();
+    });
+    it('does not schedule another thumbnail when the generated image changes', async () => {
+        vi.useFakeTimers();
+        const wrapper = mount(Preview, {
+            shallow: true,
+            attachTo: document.body,
+            props: { code: [], defaults: {}, viewport: {}, languages: [] },
+        });
+        wrapper.vm.$.setupState.settings.showShadow = false;
+        await nextTick();
+        await vi.advanceTimersByTimeAsync(7000);
+        await vi.dynamicImportSettled();
+
+        expect(toJpeg).toHaveBeenCalledOnce();
+        await vi.advanceTimersByTimeAsync(15000);
+        expect(toJpeg).toHaveBeenCalledOnce();
+        wrapper.unmount();
+    });
+    it('waits for freshly highlighted code before exporting an image', async () => {
+        const wrapper = mount(Preview, {
+            shallow: true,
+            attachTo: document.body,
+            props: { code: [], defaults: {}, viewport: {}, languages: [] },
+        });
+        await flushPromises();
+        let finish;
+        buildCodeBlocks.mockImplementationOnce(
+            () =>
+                new Promise((resolve) => {
+                    finish = resolve;
+                })
+        );
+        await wrapper.setProps({ code: [{ id: 'editor', value: 'latest code' }] });
+        wrapper.vm.$.setupState.saveAs('toPng');
+        await flushPromises();
+        expect(download).not.toHaveBeenCalled();
+        expect(toPng).not.toHaveBeenCalled();
+        finish({ ...highlighted, blocks: ['latest tokens'] });
+        await flushPromises();
+
+        expect(wrapper.vm.$.setupState.blocks).toEqual(['latest tokens']);
+        expect(toPng).toHaveBeenCalledOnce();
+        expect(download).toHaveBeenCalledWith('png', 'Untitled-1.png');
+        wrapper.unmount();
+    });
+
+    it('gives Safari its clipboard promise immediately while waiting for fresh highlighting', async () => {
+        const clipboard = Object.getOwnPropertyDescriptor(navigator, 'clipboard');
+        Object.defineProperty(navigator, 'clipboard', { configurable: true, value: {} });
+        const wrapper = mount(Preview, {
+            shallow: true,
+            attachTo: document.body,
+            props: { code: [], defaults: {}, viewport: {}, languages: [] },
+        });
+        await flushPromises();
+        let finish;
+        buildCodeBlocks.mockImplementationOnce(
+            () =>
+                new Promise((resolve) => {
+                    finish = resolve;
+                })
+        );
+        await wrapper.setProps({ code: [{ id: 'editor', value: 'latest code' }] });
+        wrapper.vm.$.setupState.copyToClipboard();
+        expect(copy).toHaveBeenCalledExactlyOnceWith(expect.any(Promise));
+        expect(toBlob).not.toHaveBeenCalled();
+        await flushPromises();
+        finish(highlighted);
+        await expect(copy.mock.lastCall[0]).resolves.toBeInstanceOf(Blob);
+        expect(toBlob).toHaveBeenCalledOnce();
+        wrapper.unmount();
+        if (clipboard) Object.defineProperty(navigator, 'clipboard', clipboard);
+        else delete navigator.clipboard;
+    });
+});
diff --git a/tests/components/TabBackgrounds.test.js b/tests/components/TabBackgrounds.test.js
new file mode 100644
index 0000000..8afcb80
--- /dev/null
+++ b/tests/components/TabBackgrounds.test.js
@@ -0,0 +1,57 @@
+import { mount } from '@vue/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import TabBackgrounds from '~/components/TabBackgrounds.vue';
+
+const { scrollRefIntoView } = vi.hoisted(() => ({
+    scrollRefIntoView: vi.fn(),
+}));
+
+vi.mock('~/composables/useScrollRefIntoView', () => ({
+    default: () => ({ scrollRefIntoView }),
+}));
+
+const passthroughStub = {
+    template: '<div><slot /></div>',
+};
+
+describe('TabBackgrounds', () => {
+    afterEach(() => {
+        scrollRefIntoView.mockReset();
+    });
+
+    it('positions the selected background only when the tab mounts', async () => {
+        const wrapper = mount(TabBackgrounds, {
+            props: {
+                background: 'background-20',
+                backgroundColor: null,
+                backgrounds: Array.from({ length: 30 }, (_, index) => ({
+                    id: `background-${index}`,
+                    style: { backgroundColor: '#000' },
+                })),
+            },
+            global: {
+                directives: {
+                    tooltip: {},
+                },
+                stubs: {
+                    Button: passthroughStub,
+                    ButtonBackground: {
+                        props: ['active', 'attributes', 'custom', 'thumbnail', 'title'],
+                        template: '<button v-bind="$attrs">{{ title }}</button>',
+                    },
+                    ColorPicker: passthroughStub,
+                    ScrollArea: passthroughStub,
+                },
+            },
+        });
+
+        await wrapper.vm.$nextTick();
+
+        expect(scrollRefIntoView).toHaveBeenCalledOnce();
+        expect(scrollRefIntoView).toHaveBeenCalledWith('button-background-background-20');
+
+        await wrapper.setProps({ background: 'background-21' });
+
+        expect(scrollRefIntoView).toHaveBeenCalledOnce();
+    });
+});
diff --git a/tests/components/TabScenes.test.js b/tests/components/TabScenes.test.js
new file mode 100644
index 0000000..1680e68
--- /dev/null
+++ b/tests/components/TabScenes.test.js
@@ -0,0 +1,53 @@
+import { mount } from '@vue/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import TabScenes from '~/components/TabScenes.vue';
+
+const { scrollRefIntoView } = vi.hoisted(() => ({
+    scrollRefIntoView: vi.fn(),
+}));
+
+vi.mock('~/composables/useScrollRefIntoView', () => ({
+    default: () => ({ scrollRefIntoView }),
+}));
+
+describe('TabScenes', () => {
+    afterEach(() => {
+        scrollRefIntoView.mockReset();
+    });
+
+    it('positions the selected scene only when the tab mounts', async () => {
+        const wrapper = mount(TabScenes, {
+            props: {
+                activeScene: 'scene-2',
+                scenes: [
+                    {
+                        id: 'scene-1',
+                        title: 'Scene 1',
+                        preview: { accent: '#fff', background: '#000', window: '#111' },
+                    },
+                    {
+                        id: 'scene-2',
+                        title: 'Scene 2',
+                        preview: { accent: '#fff', background: '#000', window: '#111' },
+                    },
+                ],
+            },
+            global: {
+                stubs: {
+                    ScrollArea: {
+                        template: '<div><slot /></div>',
+                    },
+                },
+            },
+        });
+
+        await wrapper.vm.$nextTick();
+
+        expect(scrollRefIntoView).toHaveBeenCalledOnce();
+        expect(scrollRefIntoView).toHaveBeenCalledWith('button-scene-scene-2');
+
+        await wrapper.setProps({ activeScene: 'scene-1' });
+
+        expect(scrollRefIntoView).toHaveBeenCalledOnce();
+    });
+});
diff --git a/tests/components/TabThemes.test.js b/tests/components/TabThemes.test.js
new file mode 100644
index 0000000..78b42d4
--- /dev/null
+++ b/tests/components/TabThemes.test.js
@@ -0,0 +1,85 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import TabThemes from '~/components/TabThemes.vue';
+
+const ButtonThemeStub = {
+    name: 'ButtonTheme',
+    props: ['theme'],
+    template: '<button class="theme-card">{{ theme }}</button>',
+};
+
+describe('TabThemes', () => {
+    it('only mounts theme cards near the visible viewport', async () => {
+        const themes = Array.from({ length: 80 }, (_, index) => `theme-${index}`);
+
+        const wrapper = mount(TabThemes, {
+            props: {
+                code: [],
+                theme: 'theme-40',
+                themes,
+                settings: {},
+                background: {},
+                languages: [],
+            },
+            global: {
+                stubs: {
+                    ButtonTheme: ButtonThemeStub,
+                },
+            },
+        });
+
+        await new Promise((resolve) => setTimeout(resolve, 30));
+
+        const renderedThemes = wrapper.findAll('.theme-card').map((card) => card.text());
+
+        expect(renderedThemes).toContain('theme-40');
+        expect(renderedThemes.length).toBeGreaterThan(0);
+        expect(renderedThemes.length).toBeLessThan(12);
+    });
+
+    it('does not reposition the viewport when a theme is selected', async () => {
+        const themes = Array.from({ length: 80 }, (_, index) => `theme-${index}`);
+        const wrapper = mount(TabThemes, {
+            props: {
+                code: [],
+                theme: 'theme-40',
+                themes,
+                settings: {},
+                background: {},
+                languages: [],
+            },
+            global: {
+                stubs: {
+                    ButtonTheme: ButtonThemeStub,
+                },
+            },
+        });
+
+        await wrapper.vm.$nextTick();
+        wrapper.element.scrollLeft = 240;
+
+        await wrapper.setProps({ theme: 'theme-42' });
+
+        expect(wrapper.element.scrollLeft).toBe(240);
+    });
+    it('reveals the selected theme when the worker loads the catalog after mounting', async () => {
+        const wrapper = mount(TabThemes, {
+            props: {
+                code: [],
+                theme: 'theme-40',
+                themes: [],
+                settings: {},
+                background: {},
+                languages: [],
+            },
+            global: { stubs: { ButtonTheme: ButtonThemeStub } },
+        });
+        await wrapper.setProps({
+            themes: Array.from({ length: 80 }, (_, index) => `theme-${index}`),
+        });
+        await new Promise((resolve) => setTimeout(resolve, 30));
+
+        expect(wrapper.findAll('.theme-card').map((card) => card.text())).toContain('theme-40');
+        wrapper.unmount();
+    });
+});
diff --git a/tests/composables/useHighlightedCode.test.js b/tests/composables/useHighlightedCode.test.js
new file mode 100644
index 0000000..1893546
--- /dev/null
+++ b/tests/composables/useHighlightedCode.test.js
@@ -0,0 +1,121 @@
+import { describe, expect, it, vi } from 'vitest';
+import { effectScope, ref } from 'vue';
+import useHighlightedCode from '~/composables/useHighlightedCode';
+
+const buildCodeBlocks = vi.hoisted(() => vi.fn());
+vi.mock('~/composables/useShiki', () => ({ default: () => ({ buildCodeBlocks }) }));
+
+describe('useHighlightedCode', () => {
+    it('ignores old results as soon as code changes, even before the debounce runs', async () => {
+        vi.useFakeTimers();
+        let finishOld;
+        buildCodeBlocks.mockImplementationOnce(
+            () =>
+                new Promise((resolve) => {
+                    finishOld = resolve;
+                })
+        );
+        buildCodeBlocks.mockResolvedValueOnce({ blocks: ['new'] });
+        const code = ref('old');
+        const scope = effectScope();
+        const highlighting = scope.run(() => useHighlightedCode(() => ({ code: code.value })));
+        code.value = 'new';
+        finishOld({ blocks: ['old'] });
+        await Promise.resolve();
+        expect(highlighting.result.value).toBeNull();
+        expect(highlighting.loading.value).toBe(true);
+
+        await vi.advanceTimersByTimeAsync(150);
+        expect(highlighting.result.value.blocks).toEqual(['new']);
+        expect(highlighting.loading.value).toBe(false);
+        scope.stop();
+        vi.useRealTimers();
+    });
+
+    it('waits for the newest request when inputs change during a flush', async () => {
+        let finishOld;
+        buildCodeBlocks.mockImplementationOnce(
+            () =>
+                new Promise((resolve) => {
+                    finishOld = resolve;
+                })
+        );
+        buildCodeBlocks.mockResolvedValueOnce({ blocks: ['new'] });
+        const code = ref('old');
+        const scope = effectScope();
+        const highlighting = scope.run(() => useHighlightedCode(() => ({ code: code.value })));
+        const saving = highlighting.flush();
+        code.value = 'new';
+        finishOld({ blocks: ['old'] });
+
+        await expect(saving).resolves.toEqual({ blocks: ['new'] });
+        expect(highlighting.result.value.blocks).toEqual(['new']);
+        scope.stop();
+    });
+
+    it('keeps separate preview instances independent', async () => {
+        let finishFirst;
+        buildCodeBlocks.mockImplementationOnce(
+            () =>
+                new Promise((resolve) => {
+                    finishFirst = resolve;
+                })
+        );
+        buildCodeBlocks.mockResolvedValueOnce({ blocks: ['second'] });
+        const scope = effectScope();
+        const first = scope.run(() => useHighlightedCode(() => ({ theme: 'first' })));
+        const second = scope.run(() => useHighlightedCode(() => ({ theme: 'second' })));
+        await second.flush();
+        finishFirst({ blocks: ['first'] });
+        await first.flush();
+
+        expect(first.result.value.blocks).toEqual(['first']);
+        expect(second.result.value.blocks).toEqual(['second']);
+        scope.stop();
+    });
+
+    it('cancels delayed work and ignores pending results when disposed', async () => {
+        vi.useFakeTimers();
+        let finish;
+        const calls = buildCodeBlocks.mock.calls.length;
+        buildCodeBlocks.mockImplementationOnce(
+            () =>
+                new Promise((resolve) => {
+                    finish = resolve;
+                })
+        );
+        const code = ref('old');
+        const scope = effectScope();
+        const highlighting = scope.run(() => useHighlightedCode(() => ({ code: code.value })));
+        code.value = 'new';
+        scope.stop();
+        finish({ blocks: ['old'] });
+        await vi.advanceTimersByTimeAsync(1000);
+
+        expect(highlighting.result.value).toBeNull();
+        expect(buildCodeBlocks.mock.calls.length - calls).toBe(1);
+        vi.useRealTimers();
+    });
+
+    it('only highlights visible cards and refreshes their latest language on return', async () => {
+        const visible = ref(false);
+        const language = ref('php');
+        const calls = buildCodeBlocks.mock.calls.length;
+        buildCodeBlocks.mockResolvedValue({ blocks: [] });
+        const scope = effectScope();
+        const highlighting = scope.run(() =>
+            useHighlightedCode(() => ({ language: language.value }), { enabled: visible, limit: 5 })
+        );
+        expect(buildCodeBlocks.mock.calls.length).toBe(calls);
+        visible.value = true;
+        await highlighting.flush();
+        visible.value = false;
+        language.value = 'json';
+        expect(buildCodeBlocks.mock.calls.length - calls).toBe(1);
+        visible.value = true;
+        await highlighting.flush();
+
+        expect(buildCodeBlocks).toHaveBeenLastCalledWith({ language: 'json' }, 5);
+        scope.stop();
+    });
+});
diff --git a/tests/composables/usePreviewCapture.test.js b/tests/composables/usePreviewCapture.test.js
new file mode 100644
index 0000000..427f764
--- /dev/null
+++ b/tests/composables/usePreviewCapture.test.js
@@ -0,0 +1,123 @@
+import { mount, flushPromises } from '@vue/test-utils';
+import { defineComponent, nextTick, ref } from 'vue';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import usePreviewCapture from '~/composables/usePreviewCapture';
+
+const toPng = vi.hoisted(() => vi.fn(async () => 'png'));
+const toJpeg = vi.hoisted(() => vi.fn(async () => 'jpeg'));
+vi.mock('html-to-image', () => ({ toPng, toJpeg }));
+afterEach(() => {
+    vi.clearAllMocks();
+    vi.useRealTimers();
+});
+
+describe('usePreviewCapture', () => {
+    it('waits for highlighting and its DOM update before exporting', async () => {
+        let finish;
+        const text = ref('old');
+        const prepare = vi.fn(
+            () =>
+                new Promise((resolve) => {
+                    finish = () => {
+                        text.value = 'latest';
+                        resolve();
+                    };
+                })
+        );
+        let capture;
+        const wrapper = mount(
+            defineComponent({
+                setup() {
+                    const canvas = ref(null);
+                    capture = usePreviewCapture(() => ({ $el: canvas.value }), {
+                        prepare,
+                        onThumbnail: vi.fn(),
+                    });
+                    return { canvas, text };
+                },
+                template: '<div ref="canvas">{{ text }}</div>',
+            }),
+            { attachTo: document.body }
+        );
+        toPng.mockImplementationOnce(async (element) => element.textContent);
+        const exporting = capture.capture('toPng', 2);
+        await flushPromises();
+        await vi.dynamicImportSettled();
+        expect(toPng).not.toHaveBeenCalled();
+        finish();
+
+        await expect(exporting).resolves.toBe('latest');
+        expect(toPng).toHaveBeenCalledWith(
+            wrapper.element,
+            expect.objectContaining({ pixelRatio: 2 })
+        );
+        wrapper.unmount();
+    });
+
+    it('does not publish a thumbnail after switching away from its tab', async () => {
+        let finish;
+        toJpeg.mockImplementationOnce(
+            () =>
+                new Promise((resolve) => {
+                    finish = resolve;
+                })
+        );
+        const showing = ref(true);
+        const update = vi.fn();
+        let capture;
+        const Child = defineComponent({
+            setup() {
+                const canvas = ref(null);
+                capture = usePreviewCapture(() => ({ $el: canvas.value }), {
+                    prepare: async () => {},
+                    onThumbnail: update,
+                });
+                return { canvas };
+            },
+            template: '<div ref="canvas" />',
+        });
+        const wrapper = mount(
+            defineComponent({
+                components: { Child },
+                setup: () => ({ showing }),
+                template: '<KeepAlive><Child v-if="showing" /></KeepAlive>',
+            }),
+            { attachTo: document.body }
+        );
+        const pending = capture.captureThumbnail();
+        await flushPromises();
+        showing.value = false;
+        await nextTick();
+        finish('stale image');
+        await pending;
+
+        expect(update).not.toHaveBeenCalled();
+        wrapper.unmount();
+    });
+
+    it('cancels scheduled thumbnails when an explicit capture runs', async () => {
+        vi.useFakeTimers();
+        let capture;
+        const wrapper = mount(
+            defineComponent({
+                setup() {
+                    const canvas = ref(null);
+                    capture = usePreviewCapture(() => ({ $el: canvas.value }), {
+                        prepare: async () => {},
+                        onThumbnail: vi.fn(),
+                    });
+                    return { canvas };
+                },
+                template: '<div ref="canvas" />',
+            }),
+            { attachTo: document.body }
+        );
+        capture.scheduleThumbnail();
+        await capture.capture('toPng');
+        await vi.advanceTimersByTimeAsync(10000);
+
+        expect(toPng).toHaveBeenCalledOnce();
+        expect(toJpeg).not.toHaveBeenCalled();
+        wrapper.unmount();
+    });
+});
diff --git a/tests/composables/useShiki.test.js b/tests/composables/useShiki.test.js
new file mode 100644
index 0000000..d31ff0b
--- /dev/null
+++ b/tests/composables/useShiki.test.js
@@ -0,0 +1,38 @@
+import { useNuxtApp } from '#app';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import useShiki from '~/composables/useShiki';
+
+afterEach(() => vi.restoreAllMocks());
+
+describe('useShiki', () => {
+    it('returns a complete highlighted snapshot without mutating the input', async () => {
+        let finish;
+        const tokenize = vi.spyOn(useNuxtApp().$shiki, 'tokenizeBlocks').mockImplementation(
+            () =>
+                new Promise((resolve) => {
+                    finish = resolve;
+                })
+        );
+        const config = {
+            code: [{ id: 'editor', value: 'first\nsecond', added: [1], removed: [], focused: [] }],
+            languages: [{ id: 'editor', name: 'bash' }],
+        };
+        const pending = useShiki().buildCodeBlocks(config, 1);
+        config.code[0].added.push(2);
+        config.code.push({ id: 'later', value: 'unrelated' });
+        const tokens = [[{ content: 'first', color: '#ffffff' }]];
+        finish({
+            blocks: [tokens],
+            theme: { name: 'github-dark', type: 'dark', fg: '#ffffff', bg: '#000000' },
+        });
+        const result = await pending;
+
+        expect(tokenize).toHaveBeenCalledWith({
+            blocks: [{ value: 'first', language: 'shellscript' }],
+            theme: 'github-dark',
+        });
+        expect(result.blocks).toEqual([{ added: [1], removed: [], focused: [], lines: tokens }]);
+        expect(result.themeType).toBe('dark');
+        expect(config).not.toHaveProperty('theme');
+    });
+});
diff --git a/tests/plugins/shiki.test.js b/tests/plugins/shiki.test.js
new file mode 100644
index 0000000..16f0f31
--- /dev/null
+++ b/tests/plugins/shiki.test.js
@@ -0,0 +1,78 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import shikiPlugin from '~/plugins/shiki.client';
+
+const OriginalWorker = globalThis.Worker;
+afterEach(() => vi.stubGlobal('Worker', OriginalWorker));
+
+describe('Shiki worker client', () => {
+    it('matches concurrent replies to their requests', async () => {
+        const worker = new EventTarget();
+        worker.postMessage = vi.fn();
+        vi.stubGlobal('Worker', function () {
+            return worker;
+        });
+        const {
+            provide: { shiki },
+        } = shikiPlugin();
+        worker.dispatchEvent(
+            new MessageEvent('message', {
+                data: { id: 1, result: { languages: ['php'], themes: ['github-dark'] } },
+            })
+        );
+        await shiki.ready;
+        expect(shiki.languages()).toEqual(['php']);
+        const first = shiki.tokenizeBlocks({ theme: 'github-dark', blocks: [] });
+        const second = shiki.tokenizeBlocks({ theme: 'github-light', blocks: [] });
+        await Promise.resolve();
+        worker.dispatchEvent(new MessageEvent('message', { data: { id: 3, result: 'light' } }));
+        worker.dispatchEvent(new MessageEvent('message', { data: { id: 2, result: 'dark' } }));
+
+        await expect(first).resolves.toBe('dark');
+        await expect(second).resolves.toBe('light');
+    });
+
+    it('rejects initialization when the worker cannot load', async () => {
+        const worker = new EventTarget();
+        worker.postMessage = vi.fn();
+        worker.terminate = vi.fn();
+        vi.stubGlobal('Worker', function () {
+            return worker;
+        });
+        const {
+            provide: { shiki },
+        } = shikiPlugin();
+        const ready = expect(shiki.ready).rejects.toThrow('Worker failed to load');
+        worker.dispatchEvent(new ErrorEvent('error', { message: 'Worker failed to load' }));
+
+        await ready;
+        await expect(shiki.tokenizeBlocks({ blocks: [] })).rejects.toThrow('Worker failed to load');
+        expect(worker.terminate).toHaveBeenCalledOnce();
+    });
+
+    it('rejects pending and future requests when the worker stops responding', async () => {
+        const worker = new EventTarget();
+        worker.postMessage = vi.fn();
+        worker.terminate = vi.fn();
+        vi.stubGlobal('Worker', function () {
+            return worker;
+        });
+        const {
+            provide: { shiki },
+        } = shikiPlugin();
+        worker.dispatchEvent(
+            new MessageEvent('message', {
+                data: { id: 1, result: { languages: [], themes: [] } },
+            })
+        );
+        await shiki.ready;
+        const pending = expect(shiki.tokenizeBlocks({ blocks: [] })).rejects.toThrow(
+            'syntax highlighter'
+        );
+        await Promise.resolve();
+        worker.dispatchEvent(new MessageEvent('messageerror'));
+
+        await pending;
+        await expect(shiki.tokenizeBlocks({ blocks: [] })).rejects.toThrow('syntax highlighter');
+        expect(worker.postMessage).toHaveBeenCalledTimes(2);
+    });
+});
diff --git a/tests/setup.js b/tests/setup.js
new file mode 100644
index 0000000..cf582da
--- /dev/null
+++ b/tests/setup.js
@@ -0,0 +1,21 @@
+import { vi } from 'vitest';
+
+// Happy DOM does not implement workers. Component tests mock tokenization separately.
+vi.stubGlobal(
+    'Worker',
+    class extends EventTarget {
+        postMessage({ id, method }) {
+            if (method === 'initialize') {
+                queueMicrotask(() =>
+                    this.dispatchEvent(
+                        new MessageEvent('message', {
+                            data: { id, result: { languages: [], themes: [] } },
+                        })
+                    )
+                );
+            }
+        }
+
+        terminate() {}
+    }
+);
diff --git a/vitest.config.js b/vitest.config.js
index c0e41bb..b5154e2 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -3,6 +3,7 @@ import { defineVitestConfig } from '@nuxt/test-utils/config';
 export default defineVitestConfig({
     test: {
         environment: 'nuxt',
+        setupFiles: ['./tests/setup.js'],
         environmentOptions: {
             nuxt: {
                 mock: {
@@ -13,4 +14,3 @@ export default defineVitestConfig({
         },
     },
 });
-