Brave Search

GUI-based or Web-based JSON editor that works like property explorer [closed]

stackoverflow.com › questions › 998832 › gui-based-or-web-based-json-editor-that-works-like-property-explorer

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.

Starred by 4.9K users

Forked by 702 users

Languages JavaScript 61.9% | HTML 36.2% | CSS 1.9%

JSON-GUI

json-gui.esstudio.site

JSON GUI

A JSON Viewer and editor for visually editing JSON files. Supported file types for importing and exporting are CSV, YAML, XML etc. You are also able to generate JSON patches (RFC6902).

Videos

youtube.com

Addon Testing/Part Tutorial MCBE: JSON UI PART 1

07:42

YouTube

Cursor Editor - AI generated GUI for locally stored json file - ...

MODIFYING UI'S WITH JSON UI (Minecraft Bedrock Scripting API and ...

nicegui.io › documentation › json_editor

ui.json_editor | NiceGUI

NiceGUI is an easy-to-use, Python-based UI framework, which shows up in your web browser. You can create buttons, dialogs, Markdown, 3D scenes, plots and much more.

JSON Editor Online

jsoneditoronline.org

JSON Editor Online: edit JSON, format JSON, query JSON

Copy and paste your JSON file in the JSON editor, or load it from disk via the menu or via drag-and-drop. Then, you can edit the contents similar to how you use any text editor: enter new content with your keyboard, and right-click to open a context menu with actions like copy/paste, insert, remove.

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 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

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);

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%

Jsonhero

jsonhero.io

JSON Hero - a beautiful JSON viewer for the web

JSON Hero makes reading and understand JSON files easy by giving you a clean and beautiful UI packed with extra features.

Find elsewhere

Google Bing Mojeek

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.

Ogaoga

ogaoga.github.io › json-visual-editor

JSON Visual Editor

JSON Visual Editor, made with React, Redux Toolkit, Bootstrap, etc., enables you to see visualized JSON data as tables.

npm

npmjs.com › package › vue-json-ui-editor

vue-json-ui-editor - npm

A Vue 2 JSON Schema based form editor component with TypeScript support. Latest version: 2.0.0, last published: 3 months ago. Start using vue-json-ui-editor in your project by running `npm i vue-json-ui-editor`. There are 4 other projects in ...

      » npm install vue-json-ui-editor

Published Aug 18, 2025

Version 2.0.0

Author Vue JSON UI Editor Contributors

Repository https://github.com/vue-json-ui-editor/vue-json-ui-editor

Homepage https://github.com/vue-json-ui-editor/vue-json-ui-editor#readme

GitHub

github.com › jdorn › json-editor

GitHub - jdorn/json-editor: JSON Schema Based Editor

You can override the default Ace theme by setting the JSONEditor.plugins.ace.theme variable. ... The default boolean editor is a select box with options "true" and "false". To use a checkbox instead, set the format to checkbox. ... The default array editor takes up a lot of screen real estate. The table and tabs formats provide more compact UIs for editing arrays.

Starred by 5.8K users

Forked by 1.1K users

Languages JavaScript 83.1% | HTML 16.9% | JavaScript 83.1% | HTML 16.9%

Stack Overflow

stackoverflow.com › questions › 66898574 › customisable-gui-for-generating-json

user interface - Customisable GUI for generating JSON - Stack Overflow

Top answer

1 of 2

The answer for this question is already answered here.

Link: GUI-based or Web-based JSON editor that works like property explorer

2 of 2

I created a tool specifically for this purpose called Mock Turtle. It lets you import a JSON Schema and will produce a GUI tree that conforms to the schema.

You can customise the fields in the tree with various data types (e.g. name, address, email, etc.). It will then generate random JSON data based on your tree.

You can also save a tree that you have created/customised and import it again later for reuse.

App Store

apps.apple.com › us › app › json-editor › id567740330

JSON Editor App - App Store

JSON Editor is a tree & text editor for JSON, JSON5 and JSON Lines data formats. In a clean and user-friendly interface, it allows you to create, visualize, modify, validate, format and save your JSON documents.

Rating: 0

Ratatui

ratatui.rs › tutorials › json-editor

JSON Editor | Ratatui

The purpose of this application will be to give the user an interface to create correct json, instead of having to worry about commas and brackets themselves. Here’s a gif of what it will look like if you run this: ... This follows a common approach to small applications in ratatui, where we have a state file, a UI file, and the main file to tie it all together.

Jeremydorn

jeremydorn.com › json-editor

JSON Editor Example

// 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...

UI Bakery

docs.uibakery.io › reference › working-with-components › json-editor

JSON Editor | UI Bakery Docs

JSON Editor provides advanced options to edit JSON.

CodeSandbox

codesandbox.io › examples › package › react-json-editor-ui

react-json-editor-ui examples - CodeSandbox

Use this online react-json-editor-ui playground to view and fork react-json-editor-ui example apps and templates on CodeSandbox.

Node-RED

discourse.nodered.org › developing nodes

JSON-Editor in UI - Developing Nodes - Node-RED Forum

June 27, 2020 - Hello, I am trying to build a node which allows the user to edit a JSON in the UI. To provide the user some visual clues about the structure of the JSON, I wanted to use the same IDE that is used in the node-red function editor: Ace As starting-point, I wanted to include the editor in a template ...

Pmk65

pmk65.github.io › jedemov2 › dist › demo.html

Json-Editor Interactive Playground

The JSON-Editor Interactive Playground is a page where you can test various setups for the OpenSource JSON Schema parser JSON-Editor