JSON Online Formatter Editor

🚦 Precise Error Location

Enable "Syntax validation" in Settings; errors are highlighted with red squiggly lines as a visual cue.

Combine that with the "Jump to error" button at the bottom-right of the Editor pane status bar to instantly jump to the broken line — a lifesaver when dealing with complex JSON where the bug is not visually obvious, or with thousands of lines of dirty data that simply will not format. The most tedious part of debugging shrinks down to a single click.

📊 Status Bar Live Info

Each pane has its own bottom status bar, intelligently switching based on cursor and selection state:

• Cursor / selection basics: line, column, total lines, selected lines and characters.
• Whole-document match counter: if the selection has duplicates elsewhere, "N matches" is appended — no search panel needed.
• On Select All, file size shows up — computed in UTF-8 bytes (3B per CJK char, 4B per emoji), no external tool required.
• In Diff mode, the two sides refresh independently.

🗂️ Folding Summary at a Glance

In the Preview pane, when you fold any JSON node, the trailing label automatically shows the size of that node:

• Objects show "N keys" once folded — i.e. the object contains N keys
• Arrays show "N items" once folded — i.e. the array contains N elements
• You can size up every object or array without ever expanding them. When facing a deeply nested JSON of tens of thousands of lines, paired with Monaco's indentation guides, you can build a top-down structural understanding of the entire payload extremely fast — the most efficient way to explore large JSON.

🎯 AST-based Smart Selection · One-click Base64 / URL Encode-Decode

Double-click in either the Editor pane or the Preview pane is powered by AST tokenization, so it cleanly selects entire string boundaries even across quotes and escape sequences — completely different from the traditional "select word" behavior.

• Double-click a string in the Editor pane: select only, no copy (handy for editing)
• Double-click a string in the Preview pane: select and auto-copy to clipboard (handy for grabbing values)
• Right-click on a selection: encode / decode the selected text in place as Base64 or URL — no need to switch to a separate tool when working with tokens, signatures, or URL params.
• Available in Diff mode too: both the left and right editors support smart double-click selection plus right-click Base64 / URL encode-decode, so you can debug API request/response differences without leaving the diff view.

🧰 Editor Context Menu: common transformations next to the cursor

The Editor pane context menu is more than copy and paste. It puts the most common local JSON debugging actions right next to the cursor; with a selection it works on the selected text first, and without a selection it can process the current editor content and write the result to the Preview pane.

• Clipboard and paths: Cut, Copy, Paste, and Copy Path let you copy the current field path in one click — useful for locating API fields, writing masking rules, or preparing sort paths.
• Send to Diff: send the current editor content directly to the left or right side of JSON Diff. The action is shown only when the target side is empty, so existing diff content is not overwritten accidentally.
• Encoding actions: Base64 encode / decode and URL encode / decode selected text in place, ideal for tokens, signatures, cookies, and URL parameters.
• Array actions: sort arrays, deduplicate arrays, convert arrays to text lines, or extract values by key — fast for ID lists, enums, and API response arrays.
• Text-line actions: sort lines, deduplicate lines, convert text lines to an array, remove blank lines, trim every line, and batch add / remove prefixes or suffixes — handy for turning logs, CSV fragments, or field lists into JSON-ready data.

🔄 One-click Content Transfer (preserves folding state)

Above the draggable splitter between the Editor and Preview panes there is a square button with an arrow icon (pointing toward the Editor pane). Clicking it transfers the processed result from the Preview pane back into the Editor pane.

Not only the data is transferred — the folded state of nodes in the Preview pane is preserved too. So when working with large, complex JSON you can stay focused on the layer you are currently analyzing, without having everything re-expanded after each format pass.

📐 Double-click the pane header: toggle 50% / 100% width

Double-clicking the title bar above the Editor or Preview pane toggles between "50/50 split" and "100% full width". This is especially handy when working with very long lines or extremely dense JSON.

📋 Multi-format Auto-folding

The Editor pane recognizes more than just JSON — when you paste YAML / TOML / XML / CSS / HTML, it automatically provides folding by indentation or tag structure, making it a fine general-purpose structured-text viewer.

⌨️ Full Monaco Shortcuts

A complete set of VS Code-compatible shortcuts — zero learning curve for veteran developers.