Midjourney 工程師開源 Pretext：用 AI 輔助編碼，繞過 DOM 重排

Pretext 是一個幫你搞定網頁文字排版與測量的輕量級工具，能讓你在瀏覽器裡把多行文字玩出動態花樣，而且絲毫不卡頓。

它是 Midjourney 工程師 Cheng Lou 在 2026 年 3 月 27 日開源的。整個庫只有 15KB，沒有任何第三方依賴，採用 MIT 許可證，基於 TypeScript 開發。更有意思的是，作者是藉助 OpenAI Codex 和 Anthropic Claude 這類 AI 輔助程式設計工具把這個底層庫寫出來的。

它能做什麼

在傳統網頁上，想讓文字隨著動態元素靈活變化幾乎是個性能災難，而 Pretext 徹底解決了這個問題。

它把多行文本變成了一個完全動態、能夠即時響應互動的排版空間。文字可以在移動的物體周圍流暢穿梭和環繞，即便你拖動其他元素撞擊文本塊，或者快速拉伸瀏覽器視窗，它也能穩穩維持單詞和行與行之間的間距。

開源剛幾天，社群就用它做出了不少腦洞 demo。有人做了一條在文字方塊裡穿梭噴火的飛龍，火焰噴過時周圍的字元會像被推開一樣即時避讓融化。

還有人做了一個手機應用，使用者必須把手機水平拿穩才能看書，只要機身一傾斜，頁面上的字母就像托盤裡的豆子一樣滑落堆在一角。甚至有人做出了在看電影《Project Hail Mary》的同時同步閱讀原著，所有畫面全是由響應式動態文字拼出來的。

除了這些眼花繚亂的演示，它在實際產品裡也有很實用的場景。比如有開發者正在用它為閱讀障礙者製作定製工具，讓使用者能隨意調節字型大小和字間距而不破壞整體排版。

怎麼做到的

長期以來，網頁要測量一個段落有多高、某一行文字在哪，必須去向瀏覽器的 DOM 發起查詢。

呼叫像 getBoundingClientRect 或 offsetHeight 這類傳統 API，很容易觸發耗時的 DOM 重排。這就像居民每次推開家門，整座城市都必須重新畫一遍地圖一樣昂貴。

Pretext 的聰明之處在於，它把多行文字的測量和排版邏輯全部搬到了前端應用層自己算，徹底繞過了瀏覽器 DOM 和底層的效能瓶頸。

釋出僅僅 48 小時內，Pretext 就在 GitHub 上拿下了超過 1.4 萬顆星，在 X 上的瀏覽量也突破了 1900 萬次。想體驗的話，Pretext 的原始碼已經完整託管在 GitHub 上，開發者可以直接克隆倉庫或跑起 demo。

為什麼重要

如果你是前端開發者、網頁設計師，或者正在做富文本編輯器和創意互動頁面，Pretext 非常值得你現在就去試一試。它把過去需要寫一套極其複雜且不可通用的專用邏輯才能實現的動態排版，變成了一個即插即用的輕量模組。

雖然有人指出很多炫技 demo 讓文字變得難以閱讀，但我們認為這挑錯了重點。這個專案的真正價值在於打破了瀏覽器長期以來的排版效能枷鎖，而且它證明了藉助 AI 輔助編碼，單個開發者也能單槍匹馬攻克底層的架構難題。