JSON Viewer & Formatter: Pretty Print, Tree, Chart, YAML, XML & JSONPath

JSON Viewer & Formatter pretty-prints and beautifies JSON, YAML, and XML, turning a raw API response into a structured document instead of a wall of text. Built for REST and GraphQL testing, it lets you inspect nested objects in a collapsible Tree View or an SVG Chart View, run JSONPath queries to jump straight to a node, and convert config and markup files in the same workspace. A local editor is included for paste, file drop, and sample data when you're not looking at a live URL. It's written for developers, QA engineers, technical writers, support teams, and anyone who regularly opens raw data in a browser tab. 👉 Who It's For If you test REST or GraphQL endpoints, you already know the problem: the browser shows one long line, or a barely indented block inside a pre tag. Finding a nested field means scanning by eye. Comparing two payloads means copying into another tool. Sharing a readable version means extra steps. JSON Viewer is built for that workflow. Open the response in a tab and the document becomes readable at once. Use the outline when you need to fold objects. Use the diagram when you need a map of the structure. Use the local editor when the data is on disk or in your clipboard rather than on a public URL. The same tools work when a teammate sends a dump in another structured format and you don't want to convert the file by hand first. 👉 What Happens When a Data Page Loads After install, the JSON Formatter watches for documents that look like structured data: Pages served as application/json, text/json, or application/hal+json A tab whose body is a single object or array of keys and values Markup when the content type is XML or the address ends with .xml Indented config when the address ends with .yaml or .yml When a match is found, the page is replaced with a clean workspace: header, view tabs, path search, and the formatted document. No click needed for that first pass. If the tab is a normal website, the page is left alone. You stay in control. The toolbar popup can disable auto-format globally. The current domain can be added to an ignore list so that site never gets rewritten. Those choices persist in the browser until you change them. 👉 Tree View, Chart View, and Raw Text The default inspection surface is Tree View. Objects and arrays become expandable branches. Keys, indexes, strings, numbers, booleans, and nulls use distinct coloring so types are obvious at a glance. Use Expand All for the full document, Collapse All for a compact outline, or click a branch to open just that node. Breadcrumbs always show where you are relative to the root. A highlight field filters the outline as you type, with a match count. For formal queries, use the path bar instead. Chart View draws the same document as an SVG diagram. Each node is a box; parent and child relationships become lines. This helps when a payload is wide rather than deep, or when you need to explain structure on a call. The Raw tab shows indented, pretty-printed text ready for tickets or pull requests. Copy Raw places the formatted string on the clipboard. 👉 JSONPath Search Above the views is a path bar. Enter a query such as $.store.book[0] and run Query — the workspace resolves that path and focuses the matching node instantly. Clear returns you to the full document. If a path can't be resolved, an error tells you to check key names rather than failing silently. This is built for API authors, contract testers, and anyone following a field name from documentation. 👉 Local Editor and File Import Not every payload lives at a URL. Open Editor Playground from the popup (also the options page) for a split workspace: paste area plus drag-and-drop on the left, the same outline, diagram, and Raw views on the right. Drop .json, .yaml, .yml, or .xml files, or paste mixed text and run Parse & Visualize. Files you drop are read in the browser — they are not uploaded anywhere by this extension. Load Sample JSON fills the editor with an example so you can learn the views without bringing your own file. 👉 Toolbar Popup and Ignore List Click the extension icon for a compact control panel: enable or disable the Global JSON Formatter, ignore or re-enable the current domain, switch light/dark appearance, or launch the Editor Playground. Some hosts should stay untouched — a docs site that already formats output, or a staging tool with its own inspector. Add the current domain from the popup in one click, or maintain a full list from Settings on a formatted page. 👉 Appearance, Export, and Settings 👉 Light and dark palettes cover most reading conditions, remembered across sessions. Settings also includes a custom CSS box for teams that want the inspector to match an internal style guide. 👉 Export options: Copy JSON copies the parsed document, Download saves a formatted file, Copy Formatted / Copy Raw copies the indented string, and right-clicking a formatted page gives you Download Formatted JSON from the context menu. 👉 How to Use It - Install and pin the icon for one-click access. - Open a URL that returns a data body, or a matching .xml/.yaml/.yml file — formatting starts automatically. - Use the outline to fold and highlight, the diagram to see the graph, and Raw to copy indented text. - Enter a JSONPath query when you know the field location. - Click the toolbar icon to disable globally or ignore this domain. - Open the local editor to paste text or drop a file, then Parse & Visualize. - Copy or download when you need the result outside the browser. No account required, no external dashboard. 👉 Privacy Preferences stay on your device: on/off state, ignore list, theme, and custom CSS. The extension does not upload page content, dropped files, clipboard text, or browsing history to a remote server. Host access exists only so the formatter can run on whatever data URL you open — the ignore list and global switch mean that access doesn't mean every site gets rewritten. 👉 Limits This is a viewer and form…