Typst 引擎瀏覽器端即時編譯
PDF 編譯完全在瀏覽器端跑（typst-wasm），不需要伺服器渲染。編輯器頁面掛載後就在背景預熱引擎與字型，實際按下「預覽 PDF」時大多已經預熱完畢。
Manifesto · 理念
編輯器不該綁死輸出格式內容與渲染，本來就是兩件事
01
後端無關
編輯器只負責「使用者怎麼編輯、怎麼設定版面」，完全不知道結果最後會被轉成 PDF、Word 或其他格式，只透過 @wypxital/document-contracts 定義的型別跟外界溝通。
02
泛用進化
這個編輯器移植自一個合約編輯器（LexicalContractEditor），拿掉合約專屬功能後， 聚焦成單純的「任意文本編輯」場景，可以套用到更多文件情境。
03
瀏覽器端渲染
PDF 編譯透過 Typst 引擎（typst-wasm）全部在瀏覽器端完成，不需要伺服器渲染， 靜態託管就能運作。
Features · 功能亮點
寫作與排版，一次到位
交叉引用自動編號
在工具列選一個已標籤的標題／圖片／表格插入引用，實際顯示的編號由 Typst 編譯時即時查找，內容調整順序時編號自動更新，不需要手動維護。
表格儲存格漸層填色
除了純色色票，表格儲存格底色支援漸層模式（起點色／終點色／方向），編輯時即時預覽，匯出後保留同樣的視覺效果。
Stack · 技術棧
- Astro
- React
- TypeScript
- Tailwind CSS
- Lexical
- Typst
- pnpm
Capabilities · 能做什麼
編輯器內建的能力
所見即所得編輯
以 Lexical 為基礎的富文本編輯器，標題、清單、表格、程式碼區塊、圖片皆所見即所得。
版面與頁首頁尾設定
頁面尺寸、邊界、頁首頁尾、背景底色／浮水印皆可調整，並即時反映在 PDF 預覽。
交叉引用
標題、圖片、表格可加標籤，內文插入引用後由 Typst 編譯時自動查找並顯示編號。
表格儲存格漸層填色
表格儲存格底色除了純色，也支援漸層（起點色／終點色／方向），編輯即時預覽。
程式碼區塊語法高亮
內建 16 種語言的程式碼區塊，含 Tab 縮排、方向鍵換行等鍵盤互動。
後端無關架構
編輯器透過 document-contracts 定義的型別跟輸出後端溝通，未來替換輸出格式不需重寫編輯器。
Process · 使用流程
四步驟完成一份文件
撰寫內容
在編輯器裡輸入文字、標題、清單、表格、圖片，格式化工具都在左側工具箱。
調整版面
設定頁面尺寸、頁首頁尾、背景底色與浮水印。
即時預覽 PDF
按下「預覽 PDF」，Typst 引擎即時編譯，調整設定會自動重新編譯。
匯出下載
確認排版無誤後，直接下載編譯完成的 PDF 檔案。