方法論

1. 編輯器架構

工作區為 HTML、CSS 和 JavaScript 提供三個文字編輯器，支援行號邊欄、Tab 縮排處理、字級控制與可選自動換行。

2. HTML 處理

HTML 面板中的 HTML 會放入產生文件的 body 中。此工具不會將 HTML 作為父頁面 UI 執行。

3. CSS 注入

CSS 會插入產生文件 head 中的 style 元素，使規則僅套用至預覽文件。

4. JavaScript 執行

JavaScript 會放入預覽文件內的 script 元素中。按下 Run 後，它會在 iframe 瀏覽環境中執行。

5. iframe 渲染

組合後的文件會指派給 iframe.srcdoc，從而建立新的預覽文件，而不會導覽父頁面。

6. sandbox 隔離

iframe 使用 sandbox 屬性（允許預覽腳本）。父層 DOM API 不會暴露供使用者程式碼執行。

7. 控制台處理

預覽內的小型橋接透過 postMessage 將 console.log/info/warn/error 與執行階段錯誤轉送至父頁面以供顯示。

8. 瀏覽器 API

腳本能做什麼取決於瀏覽器政策與 sandbox 權限。某些 API 在 iframe 中的行為與頂層頁面不同。

9. 本地儲存

編輯器狀態可寫入限定於此來源的 localStorage 鍵，以便重新整理不會清除進行中的工作。

10. 限制

標準 HTML/CSS/JS 沒有伺服器端編譯。複雜的建置管線、私有套件與特權裝置 API 不在範圍內。

11. 隱私考量

預覽組裝在用戶端完成。除非您匯出或將內容複製到其他地方，否則本地持久化會保留在瀏覽器中。