Update: In an effort to answer my own question, here is what I've been able to uncover so far. If anyone else out there has something, I'd still be interested to find out more.

  • http://knockoutjs.com/documentation/plugins-mapping.html ;; knockoutjs.com nice
  • http://jsonviewer.arianv.com/ ;; Cute minimal one that works offline
  • http://www.alkemis.com/jsonEditor.htm ; this one looks pretty nice
  • http://json.bubblemix.net/ Visualise JSON structute, edit inline and export back to prettified JSON.
  • http://jsoneditoronline.org/ Example added by StackOverflow thread participant. Source: https://github.com/josdejong/jsoneditor
  • http://jsonmate.com/
  • http://jsonviewer.stack.hu/
  • mb21.github.io/JSONedit, built as an Angular directive

Based on JSON Schema

  • https://github.com/json-editor/json-editor
  • https://github.com/mozilla-services/react-jsonschema-form
  • https://github.com/json-schema-form/angular-schema-form
  • https://github.com/joshfire/jsonform
  • https://github.com/gitana/alpaca
  • https://github.com/marianoguerra/json-edit
  • https://github.com/exavolt/onde
  • Tool for generating JSON Schemas: http://www.jsonschema.net
  • http://metawidget.org
  • Visual JSON Editor, Windows Desktop Application (free, open source), http://visualjsoneditor.org/

Commercial (No endorsement intended or implied, may or may not meet requirement)

  • Liquid XML - JSON Schema Editor Graphical JSON Schema editor and validator.
  • http://www.altova.com/download-json-editor.html
  • XML ValidatorBuddy - JSON and XML editor supports JSON syntax-checking, syntax-coloring, auto-completion, JSON Pointer evaluation and JSON Schema validation.

jQuery

  • formbuilder jQuery drag and drop
  • formeo
  • shalotelli form_builder

YAML

  • Konstellate Reddit Post

See Also

  • Google blockly
  • Is there a JSON api based CMS that is hosted locally?
  • cms-based concept ;; http://www.webhook.com/
  • tree-based widget ;; http://mbraak.github.io/jqTree/
  • http://mjsarfatti.com/sandbox/nestedSortable/
  • http://jsonviewer.codeplex.com/
  • http://xmlwebpad.codeplex.com/
  • http://tadviewer.com/
  • https://studio3t.com/knowledge-base/articles/visual-query-builder/
🌐
GitHub
github.com › josdejong › jsoneditor
GitHub - josdejong/jsoneditor: A web-based tool to view, edit, format, and validate JSON · GitHub
JSON Editor is a web-based tool to view, edit, format, and validate JSON. It has various modes such as a tree editor, a code editor, and a plain text editor. The editor can be used as a component in your own web application.
Starred by 12.2K users
Forked by 2.1K users
Languages   JavaScript 87.7% | SCSS 6.7% | HTML 5.6%
🌐
Json-editor
json-editor.github.io › json-editor
JSON Editor Interactive Example
You can also make changes to the JSON here and set the value in the editor by clicking "Update Form" Update Form
Discussions

[AskJS] Does anyone know of any local JSON editor with GUI? (Windows)
🌐 r/javascript
33
0
February 7, 2025
jquery - GUI-based or Web-based JSON editor that works like property explorer - Stack Overflow
Background: This is a request for something that may not exist yet, but I've been meaning to build one for a long time. First I will ask if anyone has seen anything like it yet. Suppose you have an More on stackoverflow.com
🌐 stackoverflow.com
JSON editor that lets me delete whole fields,merge etc.
Assuming you are already working with a programming language - I see no other reason to work with JSON - you could parse it, drop the field and serialize it back to a string. If you know a bit of JS, this may do the trick. If the json is not too big, you can paste it into your browsers console. Attention, typed on my phone :) JSON.stringify(JSON.parse(yourJsonString).map(d => { delete d.name; return d; })) More on reddit.com
🌐 r/software
7
11
March 1, 2021
Is there an easy to use JSON editor that doesn't suck ass? (Win11)

Aren't .jsons compiled Java files? You would need to decompile them into .java or equivalent files to edit them. Otherwise you'd need a bit editor and to be careful not to violate the checksum...

More on reddit.com
🌐 r/NoStupidQuestions
4
1
August 30, 2021
🌐
npm
npmjs.com › package › vanilla-jsoneditor
vanilla-jsoneditor - npm
December 10, 2025 - <!doctype html> <html lang="en"> <head> <title>JSONEditor</title> </head> <body> <div id="jsoneditor"></div> <script type="module"> import { createJSONEditor } from 'vanilla-jsoneditor/standalone.js' // Or use it through a CDN (not recommended for use in production): // import { createJSONEditor } from 'https://unpkg.com/vanilla-jsoneditor/index.js' // import { createJSONEditor } from 'https://cdn.jsdelivr.net/npm/vanilla-jsoneditor/index.js' let content = { text: undefined, json: { greeting: 'Hello World' } } const editor = createJSONEditor({ target: document.getElementById('jsoneditor'), pro
      » npm install vanilla-jsoneditor
    
Published   Dec 10, 2025
Version   3.11.0
🌐
Editor.js
editorjs.io
Editor.js
Free block-style editor with a universal JSON output
🌐
JSON Editor Online
jsoneditoronline.org
JSON Editor Online: edit JSON, format JSON, query JSON
JSON Editor Online is the original and most copied JSON Editor on the web. Use it to view, edit, format, repair, compare, query, transform, validate, and share your JSON data.
🌐
GitHub
github.com › tangram-js › json-editor
GitHub - tangram-js/json-editor: A JSON schema based editor for JSON document. It provides a tree view to present the structure of JSON document, user could manipulate the JSON from context menu. It also has a text view to present the content of JSON document, user may edit JSON within. Develop with Vue.js 2. · GitHub
A JSON schema based editor for JSON document. It provides a tree view to present the structure of JSON document, user could manipulate the JSON from context menu. It also has a text view to present the content of JSON document, user may edit ...
Starred by 249 users
Forked by 45 users
Languages   Vue 54.2% | JavaScript 45.6% | HTML 0.2%
Find elsewhere
🌐
GitHub
github.com › json-editor › json-editor
GitHub - json-editor/json-editor: JSON Schema Based Editor · GitHub
Watching fields by itself doesn't do anything. For the example above, you need to tell JSON Editor that full_name should be fname [space] lname. JSON Editor uses a javascript template engine to accomplish this.
Starred by 4.9K users
Forked by 702 users
Languages   JavaScript 61.9% | HTML 36.2% | CSS 1.9%
Top answer
1 of 2
402

Update: In an effort to answer my own question, here is what I've been able to uncover so far. If anyone else out there has something, I'd still be interested to find out more.

  • http://knockoutjs.com/documentation/plugins-mapping.html ;; knockoutjs.com nice
  • http://jsonviewer.arianv.com/ ;; Cute minimal one that works offline
  • http://www.alkemis.com/jsonEditor.htm ; this one looks pretty nice
  • http://json.bubblemix.net/ Visualise JSON structute, edit inline and export back to prettified JSON.
  • http://jsoneditoronline.org/ Example added by StackOverflow thread participant. Source: https://github.com/josdejong/jsoneditor
  • http://jsonmate.com/
  • http://jsonviewer.stack.hu/
  • mb21.github.io/JSONedit, built as an Angular directive

Based on JSON Schema

  • https://github.com/json-editor/json-editor
  • https://github.com/mozilla-services/react-jsonschema-form
  • https://github.com/json-schema-form/angular-schema-form
  • https://github.com/joshfire/jsonform
  • https://github.com/gitana/alpaca
  • https://github.com/marianoguerra/json-edit
  • https://github.com/exavolt/onde
  • Tool for generating JSON Schemas: http://www.jsonschema.net
  • http://metawidget.org
  • Visual JSON Editor, Windows Desktop Application (free, open source), http://visualjsoneditor.org/

Commercial (No endorsement intended or implied, may or may not meet requirement)

  • Liquid XML - JSON Schema Editor Graphical JSON Schema editor and validator.
  • http://www.altova.com/download-json-editor.html
  • XML ValidatorBuddy - JSON and XML editor supports JSON syntax-checking, syntax-coloring, auto-completion, JSON Pointer evaluation and JSON Schema validation.

jQuery

  • formbuilder jQuery drag and drop
  • formeo
  • shalotelli form_builder

YAML

  • Konstellate Reddit Post

See Also

  • Google blockly
  • Is there a JSON api based CMS that is hosted locally?
  • cms-based concept ;; http://www.webhook.com/
  • tree-based widget ;; http://mbraak.github.io/jqTree/
  • http://mjsarfatti.com/sandbox/nestedSortable/
  • http://jsonviewer.codeplex.com/
  • http://xmlwebpad.codeplex.com/
  • http://tadviewer.com/
  • https://studio3t.com/knowledge-base/articles/visual-query-builder/
2 of 2
4

Generally when I want to create a JSON or YAML string, I start out by building the Perl data structure, and then running a simple conversion on it. You could put a UI in front of the Perl data structure generation, e.g. a web form.

Converting a structure to JSON is very straightforward:

use strict;
use warnings;
use JSON::Any;

my $data = { arbitrary structure in here };
my $json_handler = JSON::Any->new(utf8=>1);
my $json_string = $json_handler->objToJson($data);
🌐
Jeremydorn
jeremydorn.com › json-editor
JSON Editor Example - Jeremy Dorn
// Set default options JSONEditor.defaults.options.theme = 'bootstrap2'; // Initialize the editor var editor = new JSONEditor(document.getElementById("editor_holder"),{ schema: { type: "object", properties: { name: { "type": "string" } } } }); // Set the value editor.setValue({ name: "John Smith" }); // Get the value var data = editor.getValue(); console.log(data.name); // "John Smith" // Validate var errors = editor.validate(); if(errors.length) { // Not valid } // Listen for changes editor.on("change", function() { // Do something...
🌐
npm
npmjs.com › package › @json-editor › json-editor
@json-editor/json-editor - npm
February 7, 2026 - JSON Schema based editor. Latest version: 2.16.0, last published: a month ago. Start using @json-editor/json-editor in your project by running `npm i @json-editor/json-editor`. There are 29 other projects in the npm registry using @json-editor/json-editor.
      » npm install @json-editor/json-editor
    
Published   Feb 07, 2026
Version   2.16.0
Author   Jeremy Dorn
🌐
Pmk65
pmk65.github.io › jedemov2 › dist › demo.html
Json-Editor Interactive Playground - GitHub Pages
Upload - Upload a local JSON file in example format, into the Playground. You can also Drag'n'Drop the file directly onto the Playground. (Not available on Form Tab) - Display List of external JavaScript and CSS files used in current example. Load Example - Opens panel with list of predefined examples to load. In the JavaScript editor, the instance of the form is available in the variable jseditor and the schema and startval (if present) are available in the variable jedata Also the global instance of the JSON-Editor is available in the variable JSONEditor
🌐
Daviddurman
daviddurman.com › jquery-json-editor-plugin.html
JSON editor and viewer jQuery plugin
Turn your JSON objects into a visual tree viewer and editor with JSONMate and its jQuery plugin.
🌐
Anvil
useanvil.com › help › tutorials › advanced-json-editor
Using the advanced JSON editor - Anvil
Advanced JSON editor tutorial: We walk you through writing a PDF (cast) field expression to calculate an submission field multiplied by another value. MDN Web Docs: an open-source guide covering various Web platform technologies. MDN Web Docs is particularly helpful in getting a high level understanding of JavaScript expressions.
🌐
jsDelivr
jsdelivr.com › package › npm › json-text-editor
json-text-editor CDN by jsDelivr - A CDN for npm and GitHub
April 2, 2022 - A free, fast, and reliable CDN for json-text-editor. Native JSON text editor with indentation and syntax highlighting on the fly.
Published   Jan 16, 2021
🌐
npm
npmjs.com › package › jsoneditor
jsoneditor - npm
JSON Editor is a web-based tool to view, edit, format, and validate JSON. It has various modes such as a tree editor, a code editor, and a plain text editor. The editor can be used as a component in your own web application.
      » npm install jsoneditor
    
Published   Oct 15, 2025
Version   10.4.2
Author   Jos de Jong
🌐
Chrome Web Store
chromewebstore.google.com › detail › json-editor › jcamcakkifmbkjcfejgboieeliaomkab
JSON Editor - Chrome Web Store
July 23, 2023 - * Search and replace * Undo and redo actions * Edit the JSON keys, and values, copy, paste, duplicate, insert, or remove * JSON formatting and minifying * Query JSON with plain JavaScript or using the built-in form * Sort, filter, and transform JSON * Handle large JSON documents up to 512 MB It uses the powerful https://github.com/josdejong/svelte-jsoneditor/ and the Manifest V3 for enhanced security, privacy, and performance.
🌐
npm
npmjs.com › package › svelte-jsoneditor
svelte-jsoneditor - npm
December 10, 2025 - A web-based tool to view, edit, format, transform, and validate JSON. Latest version: 3.11.0, last published: 2 months ago. Start using svelte-jsoneditor in your project by running `npm i svelte-jsoneditor`. There are 7 other projects in the ...
      » npm install svelte-jsoneditor
    
Published   Dec 10, 2025
Version   3.11.0
🌐
JSONLint
jsonlint.com
JSONLint - The JSON Validator
Copy and paste, directly type, or input a URL in the editor above and let JSONLint tidy and validate your messy JSON code. JSON (pronounced as Jason), stands for "JavaScript Object Notation," is a human-readable and compact solution to represent a complex data structure and facilitate data interchange between systems.
🌐
Retool
docs.retool.com › build apps › reference › components › text inputs › json editor
JSON Editor | Retool Docs
An interface to edit and validate JSON. ... All properties for this object with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.