JSON Viewer

Somebody drops a 3,000 line API response on you and asks why one number looks wrong. Paste it on the left, read it folded on the right, and the bar above the reading pane always names the path of the line you are looking at.

JSON reading workspace

Open to depth

Source

You are at$

Nothing loaded yet. Paste a document on the left, open a file, or try the checkout response sample.

Paste a document on the left, open a file, or load one of the two samples.
Lines 0Size 0 BDeepest level 0Values 0Click a row to pin its path, double click to copy it, CtrlF to search the text

Reading somebody else's JSON is a different job from formatting your own

When you wrote the document, you already know the shape. When a colleague pastes you a support export or a webhook payload, the first minute goes on questions a formatter never answers. How deep does this go. Is there one customer record in here or four hundred. Where does the field they are asking about actually live.

This page is built for that first minute. Raw text sits on the left, the rendered document on the right, and the right side arrives folded to two levels so the top of the structure fits on one screen instead of scrolling for a page and a half. Above the reading pane, a bar names the path of whichever line is at the top of your viewport.

Fold it down before you read a single line

Full expansion is the wrong default for a document you have never seen. A 40 KB response opens as roughly 1,400 lines of indentation, and the shape gets lost inside the values.

The depth buttons rewrite the whole fold state in one press. Depth 1 leaves the top level keys and nothing else, which is the fastest way to answer whether you have an envelope with a data array inside or a bare list. Depth 2 is the default and usually shows one full record. Depth 3 suits configuration files where the interesting settings sit three levels in. Any single triangle in the gutter still opens or closes its own block, so you keep the whole file shut and open the one branch you care about.

Folded blocks report what they are hiding rather than going blank. A closed object reads { … 8 keys } and a closed array reads [ … 312 items ], which is often the answer on its own.

The line at the top of the screen has lost its parents

Scroll into the middle of a deep document and every line loses its context. You are looking at "tracking": "AB1234567GB" with no way to tell which of the three order items it belongs to, because the parent key scrolled off the top eleven lines ago.

The dark bar above the reading pane fixes that. It follows the scroll and names the path of whichever line currently sits at the top edge, so you always have $.order.items[1].fulfilment.tracking in view. Click any row and the bar pins to that row instead. Double click it and the path lands on your clipboard, ready for a jq filter or a line of application code.

Why the raw text stays beside the render

The JSON Beautifier on this site argues the opposite case and reformats your document in place with no second pane. For formatting, that is the right call. There is one version of the file and splitting the screen only narrows it.

Reading works differently. The two sides hold different things here. On the left is what actually arrived, single line, escaped, the way the server sent it. On the right is a folded reading of the same bytes. Keeping both in view matters more often than it sounds:

The left pane is a plain textarea rather than a code editor. No autocomplete, no bracket matching, no interference with a paste of half a megabyte. Editing values properly belongs in the JSON Editor, and this page never pretends otherwise.

Numbers come out with the digits they went in with

Most browser based viewers run your text through JSON.parse and re-serialise the result. That step quietly rounds any integer longer than about 15 digits, because JavaScript stores every number as a double.

Load the checkout sample and look at order.reference. The value is 1204598877300112233. A viewer built on parse and stringify hands it back as 1204598877300112000, and nothing on screen warns you.

This page reads the document with its own scanner and keeps the original characters of every number as text. Long references, high precision decimals, 1E+5 and -0.0 all display exactly as written. If you are chasing a Discord or Twitter ID that changed value somewhere in your pipeline, this is one of the few browser tools that will not add to the confusion.

Ctrl+F works here, and that decided how the pane is built

Plenty of JSON viewers draw only the twenty or so rows in your viewport and recycle them as you scroll. The scrolling feels lovely and browser search finds nothing, because the text you are searching for was never in the page.

Rows here are real DOM text, rendered in blocks of 1,200 lines with a button for the next block. Browser find works, text selection works, and so does a screen reader. The trade is honest: past roughly 20,000 lines you will feel the render, and a document that size belongs in jq rather than a browser tab.

There is deliberately no search box on this page. Search across keys and values, with match stepping and a filter for matched branches, already lives in the JSON Navigator. Building a second, weaker version of it here would only split the job in half.

Which of these pages you actually want

Four JSON tools on this site overlap on the surface and answer different questions underneath. Pick by the question, not by the name.

Your questionThe page for itWhy that one
What is in this document and whereJSON ViewerRaw text beside a folded reading pane, with a sticky path bar
Where is the field called xJSON NavigatorSearch over keys and values, arrow key movement, path copying
Why will this not parseJSON BeautifierLine, column and a plain description of the mistake
I need to change a valueJSON EditorEditing in place instead of a read only pane
What changed between these twoJSON DiffStructural comparison, so reordered keys stop reading as changes

Where this viewer stops

Everything runs in the tab

Parsing, folding, the path bar and the file open all happen in your browser. There is no upload and no request in the path between your clipboard and the screen. Cut your connection after the page loads and every button still works.

That is not a marketing line, it is the only sane arrangement for this kind of tool. API responses pasted into a viewer routinely carry bearer tokens, connection strings and other people's personal data. None of it should cross a network so you can read it more comfortably.

Questions that come up while reading a document

Folding, paths, long numbers and the size a browser tab will take.

Why does the document open folded instead of fully expanded?

Because the first thing you need from an unfamiliar document is its shape, and full expansion hides the shape inside the values. Two levels usually fit one screen and show you whether you have an envelope, a bare array or a single record. Press All if you want everything open, or click any triangle in the gutter to unfold one branch at a time.

What is the bar above the reading pane showing me?

The path of the line currently at the top of your viewport. Scroll deep into a nested document and the parent keys disappear off the top of the pane, which leaves you looking at a value with no idea what owns it. The bar follows the scroll and names the owner. Click a row to pin the bar to that row instead of the top line.

How do I copy the path to a field?

Double click the row, or single click it and press Copy path in the bar. You get dot notation such as $.order.items[1].fulfilment.tracking, which is what jq, JSONPath and most template languages read. Keys that are not plain identifiers come out bracketed and quoted, so a header name writes as ["content-type"] rather than breaking at the hyphen.

Can I edit the document in the right pane?

No, the reading pane is read only. Edit the raw text on the left and the render rebuilds about a fifth of a second after you stop typing. That split keeps folding, row selection and path copying free of the usual editor problems, since a click in the pane means select rather than place a cursor. For real editing with structural controls, use the JSON Editor.

My long ID numbers keep changing value in other viewers. Why?

Those viewers parse with JSON.parse and print the result. JavaScript numbers are doubles, doubles hold roughly 15 digits, and a 19 digit snowflake ID does not fit, so 1234567890123456789 comes back as 1234567890123456800. The damage happens during parsing, before anything is drawn. This page keeps the characters of every number as text and prints them back untouched.

Can I search inside the document?

Use your browser find. Rows are real text rather than a recycled virtual list, so Ctrl+F and Cmd+F both work on everything currently rendered. For a proper search across keys and values with match stepping and branch filtering, the JSON Navigator is the page built for it.

How big a file will this open?

A few megabytes reads comfortably on a desktop browser. Lines render in blocks of 1,200 with a button for the next block, which keeps the tab responsive on large files at the cost of a click. Past about 20 MB, or 20,000 lines, use jq or a streaming parser instead, since the whole document sits in tab memory and mobile browsers drop background tabs long before that.

Is my JSON uploaded anywhere?

No. Parsing, folding and the file picker all run in the page, and no network request is made once the page has loaded. Switch off your connection and everything keeps working, which matters because pasted API responses so often contain auth tokens and customer records.