I Added Code Folding to My JSON Tool. Long Documents Are Much Easier to Read Now.

A few days ago, I was using my JSON tool to inspect a WebSocket log and ran into a very specific annoyance.

There was a defaultReplyList array containing dozens of reply messages. What I actually needed to check was a few configuration fields below it, but the expanded array filled most of the screen.

So I scrolled down, went back up to find another field, then scrolled down again.

I kept thinking: there should be a little arrow here so I can collapse this whole section. Formatting already makes the hierarchy clear, but the editor still displays everything from top to bottom. Once the data gets long enough, that becomes awkward.

So I added structural folding to Qudo JSON Toolbox (JSON Workbench).

Objects and Arrays Can Now Be Collapsed

There’s now a column of small arrows beside the line numbers. Click one to collapse a JSON object or array that spans multiple lines, and click again to expand it.

Take this example:

{
  "message": {
    "data": [
      {
        "id": "123",
        "defaultReplyList": [
          "Processing messages. I'll reply shortly.",
          "Please wait while I finish what I'm working on.",
          "There are quite a few messages. I'll get back to you."
        ],
        "enabled": true
      }
    ]
  }
}

I can also collapse the surrounding objects and arrays, leaving just the level I’m working on. The context menu now includes Collapse all and Expand all, which are useful when I want to start with an overview.

A Small Feature With a Few Awkward Details

My first thought was simple: find a matching pair of braces and hide the lines between them.

There turned out to be a bit more to it.

For one thing, brackets inside strings shouldn’t count. Log messages can contain { and }, and so can JSONC comments. Matching every bracket blindly would quickly produce the wrong folding regions.

Folding also needs to affect only what’s displayed. Copying, saving, or formatting should still use the complete document. Clicking a folding arrow shouldn’t fill the undo history with extra operations, either.

Then there’s search. I didn’t want the editor to say it had found a field while leaving it hidden somewhere inside a collapsed section.

Now, finding hidden content or jumping to a line automatically expands the sections needed to reveal it.

Nested folds keep their state, too. If I collapse an inner array and then its parent object, expanding the parent leaves that array collapsed. It doesn’t dump dozens of lines back onto the screen.

I Still Want Both the Tree View and Text Folding

The tool already had a tree view for exploring data one level at a time.

But when I’m debugging an API, I usually stay in the text editor. I’ll inspect a field, change a value, copy a snippet, and compare it with the original log. Text mode fits that workflow better.

Switching to the tree view works, of course. But if all I want is to temporarily hide the long array in front of me, clicking an arrow beside the line numbers is quicker.

Going back to that WebSocket log after adding folding felt noticeably better. There wasn’t anything new to learn. I just scrolled less and spent less time hunting for fields.

It’s Included in the Latest Build

I added 14 regression tests for folding, covering nested state, search and navigation, editing, undo, and making sure the original text stays intact. The full test suite and the packaged application’s self-checks passed as well.

The updated portable package is ready. Extract the entire archive and run JSONWorkbench.exe.

The tool still runs completely offline, requires no account, and doesn’t upload your data. If you regularly work with API responses, configuration files, or JSON logs, give it a try.

I’ll keep using it on my own data. When something gets in the way, that’s what I’ll work on next.

https://www.qudo.cc/en/open-source-tools/json-toolbox#/