# Changelog (/docs/changelog) ## v0.1.0 — Best JSON Viewer — 2025-05-02 [#v010--best-json-viewer--2025-05-02] Initial release. Five view modes, JSONata query engine, element picker, Shadow DOM isolation, and zero telemetry. ### Views [#views] * Tree view with color-coded types and child count badges * Raw view with Shiki syntax highlighting (adaptive rendering for large files) * Table view for arrays of objects, primitives, and plain objects * Visualize view — interactive node graph via `jsoncrack-react` * Edit view — live validation, tab-to-spaces, pretty-print, revert-to-original ### Query & Data [#query--data] * Full JSONata expression support with 8 context-aware presets * Paginated results (50 per page, smart array extraction) * Result propagation across all view modes ### Detection & Activation [#detection--activation] * Manual mode (context menu) and auto-detect mode (optional ``) * Element picker for embedded JSON with Shadow DOM piercing * Secondary iframe viewer for element-picked JSON ### UX [#ux] * Dark, Light, and System themes with OKLCH color system * Copy to clipboard and export as `.json` (smart filenames) * Status badge with color-coded state * Shadow DOM isolation with `bwe:` CSS prefix * Cross-browser: Chrome MV3 + Firefox via WXT # Documentation (/docs) Welcome to the BestWebExtension documentation. Each extension is built with the same philosophy: minimal UI, maximum utility, zero telemetry. ## Why BestWebExtension? [#why-bestwebextension] * **Privacy-first** — No telemetry, no tracking, no data collection. Your data stays in your browser. * **Minimal permissions** — Only the permissions strictly needed, requested at runtime when possible. * **Cross-browser** — Works on Chrome and Firefox with identical functionality. * **Open source** — Every extension is open source and auditable. Ready to get started? Pick an extension above or read on. # Roadmap (/docs/roadmap) BestWebExtension ships on a weekly release cadence. Each week brings a new extension or major feature update. Here's what's in the pipeline. ## Upcoming Releases [#upcoming-releases] | Week | Extension | Status | | ------ | --------------- | -------------- | | May 5 | Markdown Viewer | In development | | May 12 | BYOK AI | Planned | ### Markdown Viewer [#markdown-viewer] Interactive markdown viewer and editor right in your browser. * Live preview & editing * Syntax highlighting for code blocks * Auto-generated table of contents * Dark / light themes * Export & copy rendered HTML ### BYOK AI [#byok-ai] Bring your own key AI assistant. Use any model and API for in-page intelligence. * OpenAI, Anthropic, Google, and custom API endpoints * In-page chat with context-aware responses * Conversation history stored locally * Privacy-first: API keys never leave the browser * Multiple model support ## Long-Term [#long-term] After the core trio ships, the focus shifts to depth — new views, query improvements, cross-extension integrations, and community-requested features. ## Have a Suggestion? [#have-a-suggestion] Open an issue or discussion on [GitHub](https://github.com/purplecandy/bestwebextension). Bug reports, feature requests, and PRs are welcome. # BYOK AI (/docs/byok-ai/getting-started) BYOK AI is currently in development. This page will be updated with documentation when the extension is available. ## What to Expect [#what-to-expect] * **Any LLM provider** — OpenAI, Anthropic, Google, local models, and more. If it has an API, you can use it. * **In-page AI assistant** — Ask questions about the page you're on without switching tabs. * **Context-aware responses** — The assistant reads the current page content so answers are relevant. * **Privacy-first design** — Your API key stays in your browser. No intermediary servers. Requests go directly from your browser to the provider. * **Multiple model support** — Switch between models for different tasks without reconfiguring. BYOK AI is coming soon. Star the repo on GitHub or join the waitlist to be notified. # Comparison (/docs/json-viewer/compare) Choosing a JSON viewer extension comes down to what you need. This page gives you an honest, feature-by-feature comparison with the most popular options on the Chrome Web Store so you can make an informed decision. ## Feature Comparison [#feature-comparison] | Feature | Best JSON Viewer | JSON Formatter | JSON Viewer | JSON Beautifier & Editor | | ----------------------------- | :---------------------------: | :------------: | :---------: | :----------------------: | | **Tree view** | Yes | Yes | Yes | Yes | | **Raw / syntax highlight** | Yes (Shiki) | Yes | Yes | Yes | | **Table view** | Yes | No | No | No | | **Graph / visualize** | Yes | No | No | No | | **Inline editing** | Yes (live validation) | No | No | Yes | | **JSONata queries** | Yes (8 presets) | No | No | No | | **Pagination** | Yes (50 per page) | No | No | No | | **Dark mode** | Yes | Yes | Yes | Yes | | **Code folding** | Yes | Yes | Yes | Yes | | **Clickable URLs** | Yes | Yes | Yes | Yes | | **Copy to clipboard** | Yes | Yes | Yes | Yes | | **Export as file** | Yes (smart filename) | No | No | Yes | | **Element picker** | Yes (Shadow DOM) | No | No | No | | **Element picker** | (extracts JSON from any page) | | | | | **Secondary viewer (iframe)** | Yes | No | No | No | | **Auto-detect JSON** | Yes (optional) | Yes | Yes | No | | **Virtual scrolling** | Yes (all views) | No | No | No | | **Search / filter** | Via JSONata | Yes | Yes | Yes | | **Cross-browser** | Chrome + Firefox | Chrome only | Chrome only | Chrome only | | **Zero telemetry** | Yes | No | Yes | No | | **Open source** | Yes | Yes | Yes | No | | **Size** | \~Small | 77 KB | \~Small | \~Medium | ## Where We Shine [#where-we-shine] ### JSONata Query Language [#jsonata-query-language] No other JSON viewer offers a built-in query language. Best JSON Viewer embeds full JSONata support with 8 context-aware presets — filter, map, search, slice, sort, count, pick fields, and custom expressions. Results propagate into every view mode. ### Table View [#table-view] Render any JSON as a virtual-scrolled table. Arrays of objects get dynamic columns; nested values expand inline. No other viewer does this. ### Graph Visualization [#graph-visualization] Explore JSON structure as an interactive node graph powered by `jsoncrack-react`. Immediately see relationships and hierarchies. ### Virtual Scrolling [#virtual-scrolling] Every view mode — Tree, Raw, Table — uses `@tanstack/react-virtual` for virtual scrolling. Multi-megabyte files render instantly without blocking the browser. Most alternatives load the entire DOM and choke on large files. ### Element Picker & Secondary Viewer [#element-picker--secondary-viewer] Found JSON embedded in an HTML page? Activate the element picker, hover to highlight elements, and click to extract JSON — even from inside Shadow DOM. Extracted JSON opens in a floating iframe modal with the full viewer. ### Privacy-First Architecture [#privacy-first-architecture] * Static permissions are minimal (`storage`, `contextMenus`, `scripting`, `activeTab`, `tabs`). * The `` permission is only requested at runtime if you enable auto-detection. * Zero telemetry. Zero tracking. No data ever leaves your browser. ## When to Choose Another Extension [#when-to-choose-another-extension] Best JSON Viewer is focused on developer ergonomics and privacy. It may not be the right fit if: * You need **Chrome DevTools integration** (DevTools extensions are a different category). * You want a **standalone app** rather than a content-script viewer. * You prefer the simplest possible formatter with no bells and whistles — JSON Formatter is a great minimal option. ## The Bottom Line [#the-bottom-line] If you work with JSON regularly and want a viewer that handles large files, offers multiple views, supports querying, and respects your privacy — Best JSON Viewer is the most feature-complete option available. # Features (/docs/json-viewer/features) ## Five View Modes [#five-view-modes] Best JSON Viewer renders JSON in five interchangeable views, all built on virtual scrolling for instant performance even on multi-megabyte files. ### Tree View [#tree-view] Collapsible, expandable JSON tree with color-coded value types: | Type | Color | | --------- | ---------- | | `null` | Muted gray | | `boolean` | Blue | | `number` | Orange | | `string` | Green | Collapsed nodes show a child count badge. Navigate large structures without expanding everything. ### Raw View [#raw-view] Syntax-highlighted raw JSON using the Shiki `github-dark` theme. Three rendering strategies based on file size: | Lines | Strategy | | -------------- | ----------------------------------------------- | | Under 2,000 | Full syntax highlighting | | 2,000 – 10,000 | Deferred highlighting via `requestIdleCallback` | | Over 10,000 | Plain text with notice bar | Line numbers are always visible. ### Table View [#table-view] Renders JSON as an interactive, virtual-scrolled table. Supports three data shapes: * **Array of objects** — dynamic columns from union of all keys, row-index gutter. * **Array of primitives** — single "Value" column. * **Plain object** — two-column key/value table. Nested objects and arrays expand inline within cells. ### Visualize (Graph) View [#visualize-graph-view] Interactive node-graph visualization powered by `jsoncrack-react`. Explore relationships and structure at a glance. ### Edit View [#edit-view] Full-screen JSON editor with: * **Live validation** on every keystroke with inline error messages (line and column). * **Tab key** inserts 2 spaces instead of shifting focus. * **Update button** active only when JSON is valid and different from current data. * **Revert to original** restores the source JSON after any mutation. *** ## JSONata Query Language [#jsonata-query-language] Best JSON Viewer embeds full JSONata support in the toolbar: * **Expression input** — Type any JSONata expression; evaluation is debounced at 300ms. * **Preset dropdown** — Context-aware templates that auto-populate from your data's keys: * Map field (`$.fieldName`) * Filter (`$[fieldName = "value"]`) * Pick fields (`$.{ "id": id, "name": name }`) * Search (`$[fieldName ~> /pattern/i]`) * Array slice (`$[0:10]`) * Count (`$count($)`) * Sort (`$sort($, function($a, $b) { ... })`) * **Result propagation** — JSONata results flow into all view modes (tree, table, raw, graph). ### Pagination [#pagination] Large array results from JSONata queries are automatically paginated at 50 items per page. Smart extraction unwraps single-key wrapper objects (e.g. `{ users: [...] }`) automatically. *** ## Theme System [#theme-system] Three themes: **Dark**, **Light**, and **System** (follows OS preference). Cycle between them with the toolbar button. Your choice is persisted to `localStorage`. Colors use the OKLCH color system for perceptual consistency across themes. *** ## Export & Copy [#export--copy] * **Copy to clipboard** — Copies the currently visible data (original JSON, or JSONata result if active). Toast notification on success. * **Export as .json file** — Opens a dialog with a smart default filename derived from the URL pathname or page title. Downloads as a `.json` blob. *** ## Element Picker [#element-picker] When the viewer is activated on a non-JSON page, it enters **element picker mode**: * Crosshair cursor replaces the default. * Blue highlight overlay tracks the hovered element. * Tooltip shows the tag name and text snippet. * **Click to extract** — Extracts JSON from `textContent`, `value` (inputs), HTML attributes, and walks up the DOM tree. Shadow DOM is pierced via `elementsFromPoint`. * **Escape** cancels the picker. Extracted JSON opens in the **secondary viewer** — a floating iframe modal with the full viewer (minus Visualize mode). *** ## Privacy & Permissions [#privacy--permissions] Best JSON Viewer follows least-privilege principles: | Permission | When Requested | Purpose | | -------------- | -------------- | ---------------------------------------- | | `storage` | Install | Theme & settings persistence | | `contextMenus` | Install | "View in JSON Viewer" menu item | | `scripting` | Install | Inject content script on demand | | `activeTab` | Install | Access current tab for manual activation | | `tabs` | Install | Read tab URL for smart filenames | | `` | Runtime only | Auto-detection mode (optional) | No telemetry. No tracking. No data leaves your browser. # Getting Started (/docs/json-viewer/getting-started) ## Installation [#installation] Install Best JSON Viewer from the Chrome Web Store: A Firefox version is also available. Visit the extension page for the latest download links. ## Activation Modes [#activation-modes] Best JSON Viewer offers two activation modes: ### Manual (Default) [#manual-default] Click the extension icon or right-click and select **View in JSON Viewer** on any page. The viewer activates only when you choose. ### Auto [#auto] Enable auto-detection in the extension settings and grant the optional `` permission. Any page served with a JSON content type (`application/json`, `text/plain`, etc.) will automatically be formatted and displayed in the viewer. Auto mode requires the `` host permission, which is requested at runtime — not at install time. You stay in control. ## Quick Tour [#quick-tour] Once activated, you'll see the viewer toolbar at the top of the page: 1. **View switcher** — Toggle between Tree, Raw, Table, Visualize, and Edit views. 2. **JSONata input** — Type a JSONata expression to query, filter, or transform your data. 3. **Theme toggle** — Cycle between Dark, Light, and System themes. 4. **Copy / Export** — Copy the current data to your clipboard or download it as a `.json` file. That's it. No signup, no configuration files, no accounts. # Markdown Viewer (/docs/markdown-viewer/getting-started) Markdown Viewer is currently in development. This page will be updated with documentation when the extension is available. ## What to Expect [#what-to-expect] * **Live preview & editing** — Write markdown and see rendered output in real time. * **Syntax highlighting** — Code blocks with language-aware syntax coloring. * **Table of contents** — Auto-generated navigation from your headings. * **Dark / light themes** — Match your browsing preferences. * **Export & copy** — Copy rendered HTML or export to file. Markdown Viewer is coming soon. Star the repo on GitHub or join the waitlist to be notified.