we have some functionality going

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["resumarkdown", "spacebar", "tablist", "testid"]
+  "cSpell.words": ["doctypes", "rehype", "resumarkdown", "résumé", "spacebar", "tablist", "testid"]
 }

package.json

@@ -15,7 +15,13 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "ua-parser-js": "^1.0.39"
+    "rehype-document": "^7.0.3",
+    "rehype-sanitize": "^6.0.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.1",
+    "ua-parser-js": "^1.0.39",
+    "unified": "^11.0.5"
   },
   "devDependencies": {
     "@playwright/test": "^1.28.1",

src/lib/components/preview.svelte

@@ -1,4 +1,11 @@
 <script lang="ts">
+  import rehypeDocument from 'rehype-document';
+  import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
+  import rehypeStringify from 'rehype-stringify';
+  import remarkParse from 'remark-parse';
+  import remarkRehype from 'remark-rehype';
+  import { unified } from 'unified';
+
   import { pane } from '$lib/stores/nav.js';
 
   interface Props {
@@ -10,6 +17,26 @@
   let { mobile = true, markdown, stylesheet }: Props = $props();
 
   let hidden: boolean = $derived(mobile ? $pane !== 'preview' : true);
+
+  let output: Promise<string> = $derived.by(async () => {
+    let allowedTags: string[] = ['body', 'head', 'html', 'style'];
+    if (defaultSchema.tagNames) {
+      allowedTags = [...defaultSchema.tagNames, ...allowedTags];
+    }
+    return String(
+      await unified()
+        .use(remarkParse)
+        .use(remarkRehype)
+        .use(rehypeDocument, { style: stylesheet })
+        .use(rehypeSanitize, {
+          ...defaultSchema,
+          allowDoctypes: true,
+          tagNames: allowedTags,
+        })
+        .use(rehypeStringify)
+        .process(markdown),
+    );
+  });
 </script>
 
 <main class:hidden class:mobile data-testid="preview-pane">
@@ -17,6 +44,14 @@
   <code>{markdown}</code>
   <h2>stylesheet:</h2>
   <code>{stylesheet}</code>
+  <h2>output:</h2>
+  {#await output}
+    <p>processing...</p>
+  {:then result}
+    <iframe title="résumé preview" srcdoc={result}></iframe>
+  {:catch err}
+    <p style:color="red">error: {err}!</p>
+  {/await}
 </main>
 
 <style lang="less">