使用 Typst 网页汇编和 React 构建隐私优先的简历编辑器

2026西湖龙井茶官网DTC发售：茶农直供，政府溯源防伪到农户家

问题所在

大多数在线简历构建工具分为两类：

软件即服务（SaaS）工具，将您的简历上传到服务器以生成可移植文档格式（PDF）文件——您最敏感的个人数据会离开您的设备。
LaTeX/Typst 模板，能生成高质量的输出，但需要本地工具链、包管理器以及命令行界面（CLI）的熟练使用能力。

对于非技术用户来说，第二种方案难以使用。对于注重隐私的用户来说，第一种方案不可接受。SmartResume 试图同时解决这两个问题：提供专业级的排版质量，且完全在浏览器中运行。

您可以在 resume.kakuti.site 尝试使用。源代码托管在 GitHub 上。

架构概览

┌─────────────────────────────────────────────────┐
│                   浏览器 (单页应用)                │
│                                                   │
│  ┌──────────┐   ┌───────────┐   ┌─────────────┐ │
│  │  React   │──▶│  编辑器   │──▶│  IndexedDB   │ │
│  │  页面    │   │  状态     │   │ (localforage)│ │
│  └──────────┘   └───────────┘   └─────────────┘ │
│                       │                           │
│                       ▼                           │
│              ┌─────────────────┐                  │
│              │   Web Worker    │                  │
│              │  ┌────────────┐ │                  │
│              │  │ Typst WASM │ │                  │
│              │  │ 编译器 +   │ │                  │
│              │  │ 渲染器     │ │                  │
│              │  └────────────┘ │                  │
│              └─────────────────┘                  │
└─────────────────────────────────────────────────┘
                      │
                ┌─────▼──────┐
                │   Vercel   │
                │  /api/     │  ← Discord webhook
                │  feedback  │     (可选)
                └────────────┘

该应用程序是一个单页应用（React 18 + Vite 5 + TypeScript）。仅有一个无服务器函数用于可选的反馈功能——其余所有功能均在客户端运行。

Typst 如何在浏览器中运行

Typst 是一种现代排版语言，类似于 LaTeX，但语法更简洁，编译速度更快。其关键在于，Typst 的编译器和渲染器可以通过 @myriaddreamin/typst.ts 编译为 WebAssembly。

两个 WebAssembly 二进制文件处理整个流程：

二进制文件	用途	大小
`typst_ts_web_compiler_bg.wasm`	解析 `.typ` 源代码，生成文档抽象语法树（AST）	约 8 MB
`typst_ts_renderer_bg.wasm`	将抽象语法树（AST）渲染为可移植文档格式（PDF）字节流和可缩放矢量图形（SVG）元素	约 5 MB

两者均在 Web Worker 中运行，以避免阻塞主线程。这一点至关重要——即使对于单页简历，Typst 编译也可能耗时 200-400 毫秒，您不希望这些计算占用用户界面（UI）线程的资源。