{"slug": "building-a-privacy-first-resume-editor-with-typst-wasm-and-react", "title": "Building a Privacy-First Resume Editor with Typst WASM and React", "summary": "The article describes SmartResume, a privacy-first resume builder that combines React with Typst compiled to WebAssembly to provide professional typesetting entirely within the browser. The application runs as a single-page app where all data is stored locally in IndexedDB, with compilation handled in a Web Worker to prevent UI blocking. The editor features a block-based interface similar to Notion, with both rich text and raw Typst source editing modes, and uses a message protocol with incrementing IDs to handle stale compilation results.", "body_md": "## The Problem\n\nMost online resume builders fall into two camps:\n\n-\n**SaaS tools** that upload your resume to a server for PDF generation — your most sensitive personal data leaves your machine. -\n**LaTeX/Typst templates** that produce great output but require a local toolchain, package manager, and CLI fluency.\n\nFor non-technical users, option 2 is inaccessible. For privacy-conscious users, option 1 is unacceptable. SmartResume tries to solve both: professional typesetting quality, entirely in the browser.\n\nYou can try it at [resume.kakuti.site](https://resume.kakuti.site/). The source is on [GitHub](https://github.com/kakutixyz-ai/kakuti-resume).\n\n## Architecture at a Glance\n\n```\n┌─────────────────────────────────────────────────┐\n│                   Browser (SPA)                   │\n│                                                   │\n│  ┌──────────┐   ┌───────────┐   ┌─────────────┐ │\n│  │  React   │──▶│  Editor   │──▶│  IndexedDB   │ │\n│  │  Pages   │   │  State    │   │ (localforage)│ │\n│  └──────────┘   └───────────┘   └─────────────┘ │\n│                       │                           │\n│                       ▼                           │\n│              ┌─────────────────┐                  │\n│              │   Web Worker    │                  │\n│              │  ┌────────────┐ │                  │\n│              │  │ Typst WASM │ │                  │\n│              │  │ Compiler + │ │                  │\n│              │  │ Renderer   │ │                  │\n│              │  └────────────┘ │                  │\n│              └─────────────────┘                  │\n└─────────────────────────────────────────────────┘\n                      │\n                ┌─────▼──────┐\n                │   Vercel   │\n                │  /api/     │  ← Discord webhook\n                │  feedback  │     (optional)\n                └────────────┘\n```\n\nThe application is a single-page app (React 18 + Vite 5 + TypeScript). There is one serverless function for optional feedback — everything else runs client-side.\n\n## How Typst Runs in the Browser\n\nTypst is a modern typesetting language, like LaTeX but with a cleaner syntax and faster compilation. The key insight is that Typst's compiler and renderer can be compiled to WebAssembly via [ @myriaddreamin/typst.ts](https://github.com/Myriad-Dreamin/typst.ts).\n\nTwo WASM binaries handle the pipeline:\n\n| Binary | Purpose | Size |\n|---|---|---|\n`typst_ts_web_compiler_bg.wasm` |\nParses `.typ` source, produces a document AST |\n~8 MB |\n`typst_ts_renderer_bg.wasm` |\nRenders the AST to PDF bytes and SVG elements | ~5 MB |\n\nBoth run inside a **Web Worker** to avoid blocking the main thread. This is critical — Typst compilation can take 200-400ms even for a single-page resume, and you don't want that on the UI thread.\n\n### Worker Initialization\n\n``` js\n// frontend/src/features/template-renderer/hooks/useTypstCompiler.ts\nconst workerRef = useRef<Worker>();\n\nuseEffect(() => {\n  const worker = new Worker(\n    new URL('../worker/typst.worker.ts', import.meta.url),\n    { type: 'module' }\n  );\n\n  worker.postMessage({ type: 'init' });\n  workerRef.current = worker;\n\n  return () => worker.terminate();\n}, []);\n```\n\nThe worker loads the WASM binaries, fetches font files from CDN (Roboto, NotoSansCJK, Font Awesome), and preloads Typst template files from the `/public/templates/`\n\ndirectory.\n\n### Compilation Message Protocol\n\nThe main thread and worker communicate via a simple message protocol:\n\n```\nMain Thread                    Web Worker\n     │                              │\n     │──── set_source ────────────▶ │  (update .typ source)\n     │──── compile (id: 7) ───────▶ │  (trigger compilation)\n     │                              │\n     │  ... user types, triggers    │\n     │      another compile ...     │\n     │──── compile (id: 8) ───────▶ │\n     │                              │\n     │◀─── compile_done (id: 7) ─── │  ← stale, ignored\n     │◀─── compile_done (id: 8) ─── │  ← current, rendered\n```\n\nEach `compile`\n\nmessage carries a monotonically incrementing ID. When the worker finishes, it echoes the ID back. If the ID doesn't match the latest request, the result is discarded — a simple form of stale-result rejection without AbortController.\n\n### Template Mock Injection\n\nTypst templates typically use `#import`\n\ndirectives to reference other files. In the WASM sandbox, there's no file system access, so the worker strips these imports and injects mock implementations:\n\n``` js\n// Injected into each template's source before compilation:\n#let fa-icon(name, fill: black) = {\n  // Unicode character mapping — no external font needed\n  let icons = (\n    \"github\": \"\\u{f09b}\",\n    \"linkedin\": \"\\u{f08c}\",\n    \"envelope\": \"\\u{f0e0}\",\n    // ...\n  )\n  text(fill: fill, raw(icons.at(name, default: \"\")))\n}\n\n#let linguify(key, default: none, ..args) = { default }\n```\n\n## The Editor: ContentEditable Meets Markdown\n\nThe editing experience is block-based — similar to Notion. Each block is a heading, list item, or paragraph. The twist is that every block supports **two editing modes**:\n\n### WYSIWYG Mode (contentEditable)\n\nA `contenteditable`\n\ndiv with formatting (bold, color, font size). The challenge with contentEditable is selection preservation across React re-renders. The solution:\n\n```\n// frontend/src/features/editor/utils/domUtils.ts\nfunction saveSelection(container: HTMLElement): SelectionState | null {\n  const selection = window.getSelection();\n  if (!selection || !selection.rangeCount) return null;\n\n  // Walk the DOM tree to find the caret position by character offset\n  const nodeStack: Node[] = [];\n  const walker = document.createTreeWalker(\n    container,\n    NodeFilter.SHOW_TEXT,\n    null\n  );\n  // ... build path to current node and offset within it\n  return { nodePath, offset };\n}\n\nfunction restoreSelection(\n  container: HTMLElement,\n  state: SelectionState\n): void {\n  // Walk the stored path through child nodes to reach the target\n  // Then set the caret at the stored offset\n}\n```\n\n### Raw Markdown Mode\n\nA hidden `<textarea>`\n\nactivates when you click or press Enter in the margin zone next to a block. Type raw markdown, commit with Enter, cancel with Escape.\n\n```\n# Experience | 2020 - Present\n**Senior Engineer** at Acme Corp\n- Led a team of **5 engineers**\n- Built [the platform]{#0075de}\n```\n\nThe format uses custom extensions: `[text]{#color}`\n\nfor colored text and `[text]{size:14pt}`\n\nfor font sizing. These map to Tailwind-style inline styles in the rendered output and to Typst markup in the generated source.\n\n### Auto-Detection on Input\n\nTyping `#`\n\n, `##`\n\n, `###`\n\n, or `-`\n\nat the start of a block converts its type automatically — no toolbar clicks needed.\n\n## Typst Code Generation\n\nThe editor state (a tree of blocks) is converted to Typst source code via template-specific generators:\n\n```\n// frontend/src/features/template-renderer/generators/westernResume.ts\nexport function generateWesternResume(state: EditorState): string {\n  const lines: string[] = [];\n\n  // Header with personal info\n  lines.push(`#set page(margin: (top: 1.5cm, bottom: 1.5cm))`);\n  lines.push(`#align(center)[`);\n  lines.push(`  = ${escape(state.personalInfo.name)}`);\n  lines.push(`  ${escape(state.personalInfo.email)} | ${escape(state.personalInfo.phone)}`);\n  lines.push(`]`);\n\n  // Sections (h1) → entries (h2) → roles (h3)\n  for (const section of state.sections) {\n    lines.push(`== ${escape(section.title)}`);\n    for (const entry of section.entries) {\n      lines.push(`#resume-entry(`);\n      lines.push(`  title: [${escape(entry.title)}],`);\n      lines.push(`  right: [${escape(entry.right)}],`);\n      lines.push(`)`);\n      // Rich text items as Typst markup\n      for (const item of entry.items) {\n        lines.push(`  - ${renderRichText(item.content)}`);\n      }\n    }\n  }\n\n  return lines.join('\\n');\n}\n```\n\nThe generator translates rich text formatting into native Typst markup:\n\n| Editor Format | Typst Output |\n|---|---|\n`**bold text**` |\n`#strong[bold text]` |\n`[colored text]{#0075de}` |\n`#text(fill: rgb(\"#0075de\"))[colored text]` |\n`[text]{size:14pt}` |\n`#text(size: 14pt)[text]` |\n\n## Persistent State Without a Backend\n\nAll state lives in IndexedDB via [localforage](https://github.com/localForage/localForage):\n\n``` python\n// frontend/src/shared/utils/storage.ts\nimport localforage from 'localforage';\n\nconst STATE_KEY = 'current_resume_state_v2';\nconst PHOTO_KEY = 'current_resume_photo';\n\nexport async function saveState(state: EditorState): Promise<void> {\n  await localforage.setItem(STATE_KEY, state);\n}\n\nexport async function loadState(): Promise<EditorState | null> {\n  return await localforage.getItem(STATE_KEY);\n}\n\nexport async function savePhoto(blob: Blob): Promise<void> {\n  await localforage.setItem(PHOTO_KEY, blob);\n}\n```\n\nPhotos are stored separately from state to stay within IndexedDB per-key value limits (large blobs in the same record can cause performance issues). Auto-save fires on every state change with an 800ms debounce — frequent enough to feel instant, sparse enough to avoid thrashing.\n\n## PDF Resume Import\n\nUpload an existing PDF resume and SmartResume parses it back into editable blocks. This is a multi-step pipeline:\n\n```\nPDF File\n  │\n  ▼\npdfjs-dist text extraction ─── text items with (x, y, font, size)\n  │\n  ▼\nLine grouping ──────────────── group text items by y-position proximity\n  │\n  ▼\nHeader/footer removal ─────── detect and strip repeating page elements\n  │\n  ▼\nLine categorization ────────── classify as h1, h2, h3, bullet, or body\n  │\n  ▼\nStructure analysis ─────────── group into sections → entries → items\n  │\n  ▼\nMarkdown assembly ──────────── reconstruct clean markdown from structure\n  │\n  ▼\nEditor state ───────────────── populate blocks in the editor\n```\n\nThe parser uses heuristics rather than ML: font size thresholds for heading detection, position alignment for section boundaries, pattern matching for personal info (email regex, phone number patterns). Each template type (western, Japanese rirekisho, Japanese shokumukeirekisho) has its own parser strategy.\n\n## Design System: Notion-Inspired Warm Neutrals\n\nThe visual design is modeled after Notion's philosophy: a blank canvas that gets out of your way. Key choices:\n\n-\n**Warm grays**(`#f6f5f4`\n\n,`#31302e`\n\n) with yellow-brown undertones instead of cold blue-grays -\n**Near-black text** at`rgba(0,0,0,0.95)`\n\n— softer than`#000`\n\nwithout sacrificing readability -\n**Whisper borders**:`1px solid rgba(0,0,0,0.1)`\n\neverywhere — structure without visual weight -\n**Multi-layer shadows** with individual opacities never exceeding 0.05 — depth that's felt, not seen\n\nThe full design spec is in [markdown/DESIGN.md].\n\n## Trade-offs and Limitations\n\n### What Works Well\n\n-\n**Privacy**: No data leaves the browser. You can verify this in DevTools Network tab — zero requests contain resume content. -\n**PDF quality**: Typst output is genuinely professional, on par with LaTeX. -\n**Startup speed**: No account, no signup. The app loads and you start editing.\n\n### What Could Be Better\n\n-\n**WASM binary size**: The two`.wasm`\n\nfiles total ~13 MB. First load on slow connections is noticeable. HTTP caching and service worker pre-caching mitigate this after the first visit. -\n**Font loading**: Typst needs fonts available in the virtual filesystem. The worker fetches them from CDN on init — on a bad network, this can take tens of seconds. There's a 60-second timeout with a user-facing error about VPN/network issues. -\n**contentEditable**: Like every contentEditable-based editor, there are edge cases with selection, IME input, and copy-paste. The dual-mode (WYSIWYG + raw markdown) is a pragmatic escape hatch: if the rich text editor misbehaves, drop into markdown mode. -\n**No collaboration**: This is deliberate. Real-time collaboration requires a server (or WebRTC signaling), which reintroduces the privacy problem.\n\n## Try It Yourself\n\n```\ngit clone https://github.com/kakutixyz-ai/kakuti-resume.git\ncd kakuti-resume\nnpm install\nnpm run dev\n```\n\nOpen `http://localhost:5173`\n\n. The app requires no environment variables for basic use — only the optional `/api/feedback`\n\nendpoint needs a `DISCORD_WEBHOOK_URL`\n\n.\n\n*Have you built something with WASM in the browser? What challenges did you hit with Web Workers or contentEditable? I'd appreciate your feedback on the approach.*", "url": "https://wpnews.pro/news/building-a-privacy-first-resume-editor-with-typst-wasm-and-react", "canonical_source": "https://dev.to/kakutixyz/building-a-privacy-first-resume-editor-with-typst-wasm-and-react-1d13", "published_at": "2026-05-23 01:23:48+00:00", "updated_at": "2026-05-23 01:31:05.201072+00:00", "lang": "en", "topics": ["open-source", "developer-tools", "products"], "entities": ["React", "Typst", "WASM", "Vite", "TypeScript", "SmartResume", "Vercel", "Discord"], "alternates": {"html": "https://wpnews.pro/news/building-a-privacy-first-resume-editor-with-typst-wasm-and-react", "markdown": "https://wpnews.pro/news/building-a-privacy-first-resume-editor-with-typst-wasm-and-react.md", "text": "https://wpnews.pro/news/building-a-privacy-first-resume-editor-with-typst-wasm-and-react.txt", "jsonld": "https://wpnews.pro/news/building-a-privacy-first-resume-editor-with-typst-wasm-and-react.jsonld"}}