JSONエディター
JSON Editor provides a synchronized dual-surface editing environment featuring an interactive tree view and a live monospace text editor. It supports inline node manipulation, adding, renaming, and deleting keys, array reordering, undo and redo history navigation, and JSONPath property searching with continuous RFC 8259 syntax validation.
このツールの画面は英語表記です。
以下の解説は英語のみでご覧いただけます。
How does JSON Editor work?
Editing nested JSON payloads in raw text often causes syntax corruption: an accidental missing comma or unclosed curly brace breaks the entire file. The ToolsByUs JSON Editor eliminates this by marrying an AST-backed Visual Tree View with a Raw Text Editor:
- Bidirectional Synchronization: Typing in the code pane parses and live-updates the tree hierarchy. Conversely, clicking inline nodes, modifying property names, or adding elements in the tree immediately serializes back to clean, indented JSON text.
- Safe Type-Preserving Mutations: When editing scalar nodes, the editor parses strings, numbers, booleans, and nulls into their exact JavaScript representations without converting numbers to strings.
- JSONPath Property Queries: Filter deeply nested documents instantly using property names or dot-notated paths to focus on relevant keys.
- Infinite Undo/Redo: Every keystroke and tree mutation pushes to an immutable history stack so you can roll back changes with confidence.
Raw JSON Document
{"server": "node-1", "active": false}Example output
// Mutated via Tree: Toggle 'active' to true and add 'port': 8080
{
"server": "node-1",
"active": true,
"port": 8080
}What options and edge cases does JSON Editor support?
| Parameter | Type | Default | Behaviour & edge cases |
|---|---|---|---|
| Inline Key Edit | Action | Click to edit | Click any property key in the tree view to rename it across the document. |
| Inline Value Edit | Action | Click to edit | Edit scalar values directly. Booleans toggle with a click; numbers remain numbers. |
| Add Child | Action | + Button | Adds a new property to objects or appends a new element to arrays. |
| Delete Node | Action | Trash Button | Safely removes a key-value pair or array index without leaving trailing commas. |
| Undo / Redo | History | Linear Stack | Preserves full state history across both text and tree operations. |
Frequently asked questions
Can I switch between tree view and text view freely?
Yes! You can view both simultaneously side-by-side, or toggle between full-screen Tree View and full-screen Text View using the view tabs.
What happens if I type invalid JSON in the text view?
The editor displays an instant syntax error banner with line, column, and caret pointer, while preserving the previous valid tree state so your workflow is never interrupted.
Is my edited JSON stored on any external server?
No. All parsing, tree rendering, and serialization execute entirely inside your browser's memory. No data is ever saved or transmitted remotely.
Why does my JSON fail to parse when it looks correct?
Three causes account for nearly all of it: a trailing comma after the last item, single quotes where JSON requires double, and curly “smart quotes” pasted from a word processor or a chat client. The error banner gives the line and column of the first offending character, which is where to look — the mistake is usually one line above where you expected it.
How large a JSON document can I edit here?
Up to 8 MB. Editing runs on the page's main thread so the tree can follow your typing, and past that size a browser tab stops repainting rather than finishing the work. The tool declines the document with a clear message instead of freezing on you; for something larger, the JSON Diff tool runs in a Web Worker and accepts far more.
Does editing reorder my keys or reformat the document?
No. Keys keep the order they arrived in and the text view hands back exactly what you typed, whitespace included. Reformatting happens only when you ask for it somewhere else — the JSON Formatter is the tool that indents, sorts keys and strips comments deliberately.