View Modes
Forge Json offers two ways to view and edit JSON data. Switch between them using the toolbar buttons at the top of each panel.
Tree View
The default view. Displays JSON as a collapsible hierarchical tree where each node shows its key, value, and type.
Best for:
- Exploring deeply nested data
- Editing individual values inline
- Rearranging structure (move, duplicate, delete)
- Viewing diff highlights between two panels
Key features:
- Double-click any value to edit it inline
- Right-click for a context menu with Copy, Paste, Duplicate, Delete, Move, and more
- Expand/Collapse individual nodes or use Expand All / Collapse All from the toolbar
- Pagination — large arrays (100+ items) are automatically paginated with “Show More” controls
- Match highlighting — search matches and filter results are highlighted directly on nodes
Editing in Tree View
| Action | How |
|---|---|
| Edit a value | Double-click the value → type new value → press Enter |
| Edit a key name | Right-click → “Edit Key” → type new name → press Enter |
| Add a sibling | Right-click → “Duplicate” → edit the duplicated node |
| Delete a node | Right-click → “Delete” |
| Move up/down | Right-click → “Move Up” / “Move Down” |
| Copy a value | Right-click → “Copy Value” |
| Paste | Right-click → “Paste” (inserts from clipboard as JSON) |
Type detection
When you edit a value and press Enter, the editor auto-detects the type:
42→ numbertrue/false→ booleannull→ null"hello"orhello→ string{"a": 1}or[1,2,3]→ object/array (parsed as JSON)
Text View
A syntax-highlighted text editor for raw JSON. Behaves like a code editor with line numbers and cursor tracking.
Best for:
- Quick bulk edits
- Copy-pasting large chunks of JSON
- Reading the raw structure
- Regex-based find and replace
Key features:
- Syntax highlighting — keys, strings, numbers, booleans, null, and brackets are color-coded
- Line numbers in the gutter
- Tab indentation — Tab inserts spaces (respects your indent settings), Shift+Tab dedents
- Auto-indent — Enter preserves the current indentation level
- Auto-close brackets — typing
{,[, or"automatically inserts the closing pair - Cursor position shown in the status bar (line:column)
Text view validates JSON on every change. If the JSON is invalid, the status bar shows a red error indicator. You can click the error to jump to the problem line.
Large files
For very large JSON files, the editor automatically switches to a virtualized read-only text view that only renders visible lines. This prevents browser performance issues with files containing thousands of lines.
Switching views
Your view mode preference is preserved per panel and survives page refreshes. Switching views never changes the underlying data — it’s always the same JSON, just displayed differently.
| Shortcut | Action |
|---|---|
| Click Tree button | Switch to tree view |
| Click Text button | Switch to text view |
| Ctrl+1 | Switch to text view |
| Ctrl+2 | Switch to tree view |
Fullscreen / maximize
You can maximize a panel to focus on it, hiding the other panel. Toggle fullscreen from the toolbar or with w f in tree view (vim mode).
Sync scroll
When both panels show the same or related content, enable sync scroll from the toolbar. Both panels scroll together, keeping differences aligned — especially useful when comparing with Diff & Compare.