HTML 即時預覽
左側編寫 HTML，右側沙箱 iframe 即時渲染，支援內嵌樣式，指令碼停用以確保安全。
HTML 程式碼
預覽效果
沙箱隔離 · 指令碼不執行
使用說明
📖 工具介紹
HTML 即時預覽是一款面向前端初學者、郵件模板除錯與靜態頁面草稿情境的免費線上渲染工具。很多時候我們只想快速看一段 HTML 片段在瀏覽器裡長什麼樣子：一段標題加配色、一個郵件中的列表樣式、或者原型裡的卡片佈局，卻又不想為此新建檔案、開啟編輯器再切換瀏覽器。本工具採用左右分欄佈局，左側是等寬字型程式碼編輯區，右側是一塊獨立的沙箱預覽窗。你每敲幾個字，預覽就會在短暫防動後自動重新整理，樣式調整即時可見。預覽透過帶 sandbox 屬性的 iframe 實現，指令碼被徹底停用，因此即使貼上來自郵件或網頁的可疑程式碼，也不會觸發任何彈窗、跳轉或資料竊取；內嵌 style 與常用標籤全部正常生效，足以除錯視覺效果。工具提供自動渲染開關，關閉後可以手動點渲染，適合除錯較長程式碼時避免頻繁重新整理；一鍵複製程式碼、下載完整 .html 檔案到本機開啟也都齊備。全部處理在瀏覽器本機完成，程式碼不會上傳。
✨ 功能特點
- 左右分欄：左側寫程式碼，右側同步渲染，所見即所得
- 自動渲染：輸入後約 0.4 秒防動重新整理，也可手動渲染
- 沙箱隔離：iframe 帶 sandbox，指令碼停用，貼上陌生程式碼也安全
- 樣式生效：內嵌 style 正常解析，便於除錯配色與佈局
- 程式碼重用：一鍵複製程式碼或下載為完整 .html 檔案
- 本機執行：程式碼全程不出瀏覽器，隱私安全
📝 使用方式
- 在左側編輯區輸入或貼上 HTML 片段，無需 html/body 標籤
- 保持「自動渲染」勾選，右側預覽會自動更新
- 若程式碼較長，可關閉自動渲染，改點「渲染」按鈕手動重新整理
- 調整標籤與內嵌樣式，直到視覺效果符合預期
- 複製程式碼或下載 .html 檔案在正式專案中使用
⚠️ 注意事項
- 指令碼停用：預覽 iframe 不帶 allow-scripts，script 不會執行，屬於刻意的安全設計
- 外部資源：外鏈圖片、字型與 CDN 樣式需要連網，離線環境可能不顯示
- 文件片段：直接貼上片段即可，不需要包覆完整 html 文件結構
- 佈局差異：預覽窗尺寸有限，固定寬度佈局請在真實瀏覽器中再確認
- 效能提示：超大 HTML 自動渲染可能略卡，建議關閉自動渲染手動重新整理