開發者經常要喺網站展示複雜 JSON 數據，但傳統文字格式令用戶難以一眼睇清結構同關係，特別係 debug API 回應或分享數據時，總要 copy paste 去外部工具先得。JSON Crack 嘅文件頁面（jsoncrack.com/docs）就提供咗幾種簡單方法，直接將呢個強大 JSON 可視化工具嵌入你嘅 web app 或文件網站，面向前端工程師、API 開發者同數據分享者，解決咗數據呈現嘅痛點，讓用戶即時互動式瀏覽 JSON tree。
用 iframe 快速嵌入 JSON Crack 到任何網頁
最簡單嘅起步方式，就係用 iframe 將 JSON Crack 直接嵌入網站。文件頁面教你生成一個指定 JSON 數據嘅 iframe 連結，例如透過 URL parameter 載入預設 JSON，之後 copy 個 embed code 貼落你嘅 HTML 就得。呢個方法唔使寫額外 code，適合靜態網站或 blog 快速展示 API 樣本數據。打開瀏覽器試下，iframe 會自動 render 出互動式樹狀圖，用戶可以 expand / collapse 節點，遠比 raw JSON 易讀。
postMessage API 實現雙向通訊控制 JSON 視圖
如果要更深層整合，postMessage API 就係關鍵。JSON Crack 文件詳細解釋咗如何用 JavaScript 從父頁面發送訊息去 iframe，例如動態更新 JSON 內容、切換主題模式或觸發匯出功能。呢個做法特別適合 dashboard app，開發者可以喺用戶互動時即時 refresh 數據視圖，而唔使重新載入頁面。同類產品入面比較少見嘅一點係，API 支援完整事件監聽，例如 JSON 節點被點擊時回傳路徑資訊，方便建構自訂邏輯。
文件提供咗完整 API 方法列表，包括 loadJson() 同 setTheme() 等，仲有錯誤處理範例。實作起來只需幾行 code，例如 window.parent.postMessage({ action: ‘loadJson’, data: yourJsonObject }, ‘*’)，測試時即見效，確保咗嵌入式視圖同主應用無縫銜接。
React 組件讓前端工程師直接 import JSON Crack
對用 React 框架嘅開發者嚟講，官方 React component 係最 elegant 選擇。文件教你透過 npm 安裝 @jsoncrack/react-json-view，之後 import JsonView 組件，傳入 JSON data 同 props 如 collapsible、theme 等，就喺你嘅 app 內 render 出完整功能。呢個組件支援所有核心互動，例如搜尋、複製路徑同多種佈局模式，仲可以自訂樣式 override CSS variables。
相比純 iframe，React 版無縫融入 component tree，性能更好，特別適合 SPA 或 Next.js 項目。文件仲列咗 props 表格同 playground demo，讓你即時試用唔同設定，加速開發流程。
多種嵌入方式滿足唔同開發場景需求
JSON Crack 文件嘅獨特之處在於，佢唔止講方法，仲提供咗實際 code snippet 同 troubleshooting tips，例如處理大型 JSON 時嘅記憶體優化，或跨域 postMessage 設定。無論你係建 prototype、寫文件 wiki 定係企業 dashboard，都搵到合適方案。總括嚟講，呢個工具將 JSON 可視化從獨立 app 變成 web 原生組件，大大提升數據分享效率。
產品名稱：JSON Crack (Documentation)
官方網站：https://jsoncrack.com/docs
