Editing Data

JSONFiddle is not just a viewer -- it is an editor. You can modify data from any visual view without touching the raw JSON in the code editor. Every edit updates the source JSON in real time, and all views refresh to reflect the change.

Prerequisites

• Valid JSON, YAML, XML, or CSV content in the editor.
• At least one visual view open (Graph, Explorer, or Grid).
• Auto Sync enabled (for real-time updates across views).

Edit Field Modal

The Edit Field modal appears when you edit a single primitive value (string, number, boolean, or null).

How to Open

• From Graph view: Right-click a field row in a node and select Edit field.
• From Explorer view: Right-click a value and select Edit.
• From Grid view: Double-click a cell (opens inline editing, not the modal).

Modal Layout

The Path Accordion

The accordion at the bottom shows the exact path to the field in three query languages, with syntax highlighting.

• Copy the path to use in the Query tab.
• Use the path in external tools (e.g., jq on the command line).

Type Selector

Warning: Changing a type may cause validation errors if the data is used by a system that expects a specific type.

Edit Object Modal

The Edit Object modal appears when you edit an entire object or array node.

How to Open

• From Graph view: Right-click a node header and select Edit.
• From Explorer view: Right-click an object or array node and select Edit.

Modal Layout

Note: If the JSON in the editor is invalid, the Save button shows an error message and does not apply the change.

Editing from Graph View

Edit a Field (Primitive Value)

1. Right-click on a field row inside a node card (e.g., the row showing name: "Alice").
2. Click Edit field in the context menu.
3. Change the value and click Save.

Edit a Node (Object or Array)

1. Right-click on a node's header bar.
2. Click Edit in the context menu.
3. Modify the JSON and click Save.

Delete a Field

1. Right-click on a field row.
2. Click Delete field.

Warning: Deleting a field is immediate and cannot be undone from the modal. Use Cmd+Z in the code editor to undo.

Insert a Field

1. Right-click on a field row.
2. Click Insert field.
3. A new empty field is added to the parent object.

Copy Value

1. Right-click on a field row.
2. Click Copy value.

Screenshot: The Graph view context menu with editing options visible.

Editing from Grid View

Inline Cell Editing

1. Double-click any cell.
2. Type the new value.
3. Press Enter to confirm, or Escape to cancel.

The source JSON updates in real time.

Data Type Preservation

Note: Only primitive cells are directly editable. Cells containing nested objects or arrays -- expand them and edit individual fields, or use the Graph view.

Editing from Explorer View

1. Right-click on a key or value.
2. Click Edit in the context menu.
3. The Edit Field modal (for primitives) or Edit Object modal (for objects/arrays) opens.
4. Make your change and click Save.

Screenshot: The Explorer view tree with the context menu visible.

Editing Workflow: Real-World Example

Scenario: You have an API response and need to change a user's email address.

1. Paste the JSON into the editor.
2. Press Alt+1 to open the Graph view.
3. Navigate to the user node. Right-click the email field row.
4. Click Edit field.
5. Change the value from alice@old.com to alice@new.com.
6. Click Save.
7. Export the modified JSON using Export icon > Export file.

How Edits Flow Through the System

When you edit a value from any visual view:

Visual Edit (Graph/Grid/Explorer)
  |
  v
Update the parsed JSON in memory
  |
  v
Serialize back to the current format (JSON/YAML/XML/CSV)
  |
  v
Update the code editor content
  |
  v
All views re-render from the updated content

Undo (Cmd+Z) in the code editor undoes the last edit, regardless of which view made it.

Troubleshooting

"I cannot find the Edit option in the context menu"

Make sure you are right-clicking on the correct element:

• Graph view: Right-click on a field row (not the node background or edge).
• Explorer view: Right-click on a key or value (not the whitespace).
• Grid view: Double-click a cell instead of right-clicking.

"The Save button shows an error"

In the Edit Object modal, the Save button validates the JSON you entered. Fix the JSON syntax and try again.

"My edit did not appear in the code editor"

Check if Auto Sync is enabled (bottom bar). If it is off, the editor may not update until you switch tabs or trigger a re-render.

"I want to undo an edit"

Press Cmd+Z (Mac) or Ctrl+Z (Windows/Linux) in the code editor. The undo history tracks all changes, including those made from visual views.

FAQ

Q: Can I undo a visual edit? A: Yes. Press Cmd+Z in the code editor.

Q: Can I edit keys (not just values)? A: Not from the visual views directly. Edit the key in the code editor.

Q: Can I batch-edit multiple values at once? A: Not from the edit modals. Use the Query tab with a JQ or JSONata transformation to batch-modify values.

Q: Does editing work in YAML mode? A: Yes. The edit updates the structured value and then writes it back in the active format, such as YAML.

Q: Can I add a new key to an object from the grid? A: Not directly. Use the Graph view's "Insert field" context menu option, or edit the code editor.

Related Guides

• Graph View -- context menu and field-level editing.
• Grid View -- inline cell editing with double-click.
• Explorer View -- editing from the tree context menu.
• Query & Transform -- batch transformations as an alternative to manual editing.
• Keyboard Shortcuts -- Cmd+Z for undo.