Let's JSON

About

Let's JSON — 讓 JSON 閱讀成為一種享受。

當你在開發過程中面對亂成一團的原始 JSON 字串時，Let's JSON 能瞬間將其轉化為清晰、可互動且易於導覽的樹狀結構。專為前端開發者與架構師打造，這是一個兼具效能與美感的 Chrome 擴充功能。

核心功能：
✨ 自動偵測：智慧辨識 application/json 或純文字頁面中的 JSON 內容。
🌈 語法高亮：精準區分鍵名、字串、數字、布林值與 Null。
🌳 互動式樹狀結構：一鍵摺疊/展開節點，輕鬆導覽複雜的巢狀資料。
🔍 關鍵字過濾：即時搜尋鍵名或數值，精準定位目標節點。
📋 強大複製功能：支援複製「原始數值」或「點記法路徑」（如 data.users[0].id）。
📥 一鍵匯出：將格式化後的內容直接下載為 .json 檔案。

為什麼選擇 Let's JSON？

🚀 效能極致：針對大型文件優化，超過 500KB 自動啟用延遲渲染，告別瀏覽器卡頓。
🛡️ 樣式隔離：使用 Shadow DOM 技術封裝 CSS，保證絕不干擾原始網頁的樣式。
🔒 隱私優先：所有處理皆在本地端完成，無需讀取網路權限，我們絕不蒐集任何資料。
💻 現代技術：基於 Manifest V3 開發，穩定且符合最新瀏覽器規範。

讓 Let's JSON 成為你開發工作流程中最得力的助手。

---

English Version

Let's JSON — Make JSON readable again.

When you're faced with a wall of messy JSON strings during development, Let's JSON instantly transforms them into a clean, interactive, and easy-to-navigate tree structure. Built for developers who value performance and precision.

Key Features:
✨ Smart Detection: Automatically identifies JSON content-type and heuristic JSON structures in plain text pages.
🌈 Syntax Highlighting: Beautifully color-coded keys, strings, numbers, booleans, and nulls.
🌳 Interactive Tree View: Collapse/expand nodes with a click. Includes "Collapse All" and "Expand All" for quick navigation.
🔍 Instant Filtering: Live search to highlight matching keys or values with result counts.
📋 Advanced Copy: Copy raw values or precise dot-notation paths (e.g., data.users[0].id) directly to your clipboard.
📥 One-Click Export: Download the formatted content as a .json file instantly.

Why Let's JSON?
🚀 Performance Optimized: Handles large files with ease. Lazy rendering triggers for 500+ nodes to keep your browser snappy.
🛡️ Visual Isolation: Uses Shadow DOM to encapsulate styles, ensuring no CSS conflicts with the original page.
🔒 Privacy First: All processing happens locally on your machine. No tracking, no data collection, and no external API calls.
💻 Modern Tech Stack: Built with Manifest V3 and TypeScript for a faster, more secure experience.

Level up your debugging workflow with Let's JSON.