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 › json-editor › json-editor
GitHub - json-editor/json-editor: JSON Schema Based Editor · GitHub
A valid JSON Schema to use for the editor. Version 3 and Version 4 of the draft specification are supported. ... When to show validation errors in the UI. Valid values are interaction, change, always, and never. ... Seed the editor with an initial value. This should be valid against the editor's schema. ... The JS template engine to use.
Starred by 4.9K users
Forked by 703 users
Languages JavaScript 61.9% | HTML 36.2% | CSS 1.9%
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.
[AskJS] Does anyone know of any local JSON editor with GUI? (Windows)
Vscode More on reddit.com
33
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
JSON Studio | A minimalist JSON Viewer & Editor
Works great even on mobile. How ca i reuse this in my website? More on reddit.com
3
3
June 13, 2018Creating a gui or html or something to edit a json file
Electron seems to be a good choice. More on reddit.com
11
3
March 31, 2016Videos
04:10
Build a JSON Editor to Format, Validate & Minify JSON in ...
04:08
Build a React.js JSON Editor Web App in Browser to Format,Validate ...
06:09
Build a Next.js JSON Editor Offline Web App to Format ...
02:30
What Are Some Good JSON Editors? - The Friendly Statistician - YouTube
06:43
Using the Online JSON Editor - YouTube
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%
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
Repository https://github.com/josdejong/jsoneditor
Homepage https://jsoneditoronline.org
Reddit
reddit.com › r/javascript › [askjs] does anyone know of any local json editor with gui? (windows)
r/javascript on Reddit: [AskJS] Does anyone know of any local JSON editor with GUI? (Windows)
February 7, 2025 -
I'd like to be able to view and edit the entries on a local JSON file, including adding and removing entries.
Some of the fields are paths to images or videos (they're stored in the same folder as the JSON file). I'd like those to be shown in the editor.
Is there an app that does that?
Top answer 1 of 5
9
Vscode
2 of 5
7
not sure exactly what you are asking for, but notepad++ plus the json extensions works pretty good for me. but json files are straight text files you can edit in any text editor. Are you looking for something to give you like an edit grid so you aren't directly editing the text?
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
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
Repository https://github.com/json-editor/json-editor
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
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%
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);
Editor.js
editorjs.io
Editor.js
Free block-style editor with a universal JSON output
jsDelivr
jsdelivr.com › package › npm › react-json-editor-alt
react-json-editor-alt CDN by jsDelivr - A CDN for npm and GitHub
October 13, 2024 - A free, fast, and reliable CDN for react-json-editor-alt. The React JSON Editor is a flexible and easy-to-use library for rendering and editing JavaScript objects or JSON data in React applications.
Published Oct 06, 2024
CiviCRM
civicrm.org › extensions › json-editor
Json Editor | CiviCRM
JSON Editor is a extensions that includes the JS library https://github.com/json-editor/json-editor, to be used as part of any dynamic-generated form in any other extension.
Tangramjs
json-editor.tangramjs.com
JSON Editor - About
Json Editor is a schema-aware editor for JSON document. It provides a tree view to present the structure of JSON document, user could manipulate the JSON from context menu. There is a text view to present the content of JSON document, user may edit JSON within.
Panel
panel.holoviz.org › reference › widgets › JSONEditor.html
JSONEditor — Panel v1.8.9
The JSONEditor widget provides a visual editor for JSON-serializable datastructures, e.g.
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
Retool
docs.retool.com › build apps › reference › components › text inputs › json editor
JSON Editor | Retool Docs
An interface to edit and validate JSON.
Oxygen XML
oxygenxml.com › json_editor.html
Oxygen JSON Editor
The OxygenText mode provides a simple editor where you can work with JSON documents, providing standard editing capabilities such as undo/redo, copy/paste, find/replace, and drag/drop, as well as more complex features, such as content completion, format and indent, and structure validation.
Anvil
useanvil.com › help › tutorials › advanced-json-editor
Using the advanced JSON editor
We’ll go over specific examples on how to use the JSON editor and custom JavaScript snippets to get more out of your Workflows. For examples of what our JSON editor is capable of and a high level overview of how it works, please see our [blog post](/blog/product-news/anvils-advanced-editor/) ...
GitConnected
levelup.gitconnected.com › simplest-way-to-add-json-editor-to-nextjs-application-6baa71b5b4dd
How to Add a JSON Editor to a React + Next.js Application | by Hoang Subin | Level Up Coding
May 30, 2020 - A simple guide to adding a JSON Editor to a server-side rendered application built with React and Next.js