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/

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.

GitHub

github.com › josdejong › jsoneditor

GitHub - josdejong/jsoneditor: A web-based tool to view, edit, format, and validate JSON · GitHub

A web-based tool to view, edit, format, and validate JSON - josdejong/jsoneditor

Starred by 12.2K users

Forked by 2.1K users

Languages JavaScript 87.7% | SCSS 6.7% | HTML 5.6%

GitHub

github.com › Wirecloud › json-editor-widget

GitHub - Wirecloud/json-editor-widget: JSON editor widget for WireCloud

The JSON Editor widget is a WireCloud widget that provides an easy way for you to view, edit, format and validate JSON structures.

Forked by 2 users

Odoo

apps.odoo.com › apps › modules › 18.0 › json_editor_widget

json_editor_widget | Odoo Apps Store

JSON Editor Widget is a generic JSON editor component specifically designed for Odoo 18, providing powerful and flexible JSON data editing capabilities.

GitHub

github.com › nnseva › django-jsoneditor

GitHub - nnseva/django-jsoneditor: Django JSONEditor input widget to provide javascript online JSON Editor

Django-JSONEditor is an online structured JSON input widget for Django appropriate for various JSONField's provided for Django. Code of the javascript JSONEditor online editor has been got from the http://jsoneditoronline.org/.

Starred by 189 users

Forked by 54 users

Readthedocs

django-jsonform.readthedocs.io › en › stable › fields-and-widgets.html

Fields and Widgets — django-jsonform documentation

class JSONFormWidget(schema, model_name='', file_handler='', validate_on_submit=False, attrs=None)¶ · The widget which renders the editor.

Stack Overflow

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

jquery - GUI-based or Web-based JSON editor that works like property explorer - Stack Overflow

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

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

GitHub

github.com › cantino › jsoneditor

GitHub - cantino/jsoneditor: JavaScript widget for inline JSON editing

JavaScript widget for inline JSON editing. Contribute to cantino/jsoneditor development by creating an account on GitHub.

Starred by 47 users

Forked by 10 users

Find elsewhere

Google Bing Mojeek

PyPI

pypi.org › project › django-json-widget

django-json-widget · PyPI

from django import forms from django_json_widget.widgets import JSONEditorWidget from .models import YourModel class YourForm(forms.ModelForm): class Meta: model = YourModel fields = ('jsonfield',) widgets = { 'jsonfield': JSONEditorWidget } You can customize the JSONEditorWidget with the following options: width: Width of the editor as a string with CSS size units (px, em, % etc).

      » pip install django-json-widget

Published Dec 12, 2025

Version 2.1.1

Homepage https://github.com/jmrivas86/django-json-widget

Pub.dev

pub.dev › packages › json_editor_flutter

json_editor_flutter | Flutter package

June 6, 2024 - Edit your JSON object with this package. Create, edit and format objects using this user friendly widget. See the sample below for an example. Add the package in your flutter project. Run this command in terminal flutter pub add json_editor_flutter.

Published Feb 28, 2023

Version 1.4.2

JupyterLab Documentation

jupyterlab.readthedocs.io › en › 3.6.x › api › classes › codeeditor.jsoneditor-1.html

JSONEditor | @jupyterlab

A widget for editing observable JSON. ... Construct a new JSON editor.

GitHub

github.com › jdorn › json-editor

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

The icon library to use for the editor. See the CSS Integration section below for more info. ... If true, objects can only contain properties defined with the properties keyword. ... An object containing schema definitions for URLs. Allows you to pre-define external schemas. ... If true, all schemas that don't explicitly set the required property will be required. ... If true, makes oneOf copy properties over when switching. ... A valid JSON Schema to use for the editor.

Starred by 5.8K users

Forked by 1.1K users

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

GitHub

github.com › jmrivas86 › django-json-widget

GitHub - jmrivas86/django-json-widget: An alternative widget that makes it easy to edit the new Django's field JSONField (PostgreSQL specific model fields) · GitHub

Starred by 496 users

Forked by 99 users

Languages Python 84.3% | HTML 11.1% | Makefile 4.6%

Oracle

docs.oracle.com › en-us › iaas › management-dashboard › doc › json-editor.html

About JSON Editor

You can use the built-in JSON editor to create and customize widgets and filters in Management Dashboard.

Appsmith

community.appsmith.com › template › json-editorviewer

JSON Editor/Viewer | Appsmith Community Portal

January 19, 2024 - This custom widget was made using the jsoneditor library **https://github.com/josdejong/jsoneditor** It supports taking in an input JSON and returning an edited JSON. It can be very useful for configuration management use cases.

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

reddit.com › r/django › a new jsonfield widget for django

r/django on Reddit: A new JSONField widget for django

January 7, 2024 -

For a long time, the JSONField in django, which is almightily useful, has been neglected in terms of the widgets available. The default is a TextArea (gross!) and the most commonly used widget (django-jsoneditor) uses the now well-out-of-date ACE editor, which crashes with large documents, and reverts to TextArea in readonly mode.

NO LONGER!

Announcing the new django-svelte-jsoneditor. It uses a much newer JS widget (the same as that used by jsoneditoronline), a range of properties are customisable, and it has a readonly mode too. Documentation is complete, and there's a fully working example server in the source code.

PLEASE HELP

Development was sponsored by my organisation, Octue, and we're committed to maintaining it for the foreseeable future. We're an OSS organisation working to fight climate change, by equipping scientists and engineers with the right tools to work much more effectively with data.

The widget is published under MIT so please help yourself. But if you use it commercially, please sponsor us - you know it's the right thing to do if you're getting value from it!! Choose whatever amount you feel it's worth, or sign up to a support tier (at a very attractive daily rate).