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/

Editor.js

editorjs.io

Editor.js

text: "Classic WYSIWYG editors produce raw HTML-markup with both content data and content appearance. On the contrary, <mark class="cdx-marker">Editor.js outputs JSON object</mark> with data of each Block.", } , } , { id: "XKNT99-qqS", type: "attaches", data: { file: { url: "https://drive.google.com/user/catalog/my-file.pdf", size: 12902, name: "file.pdf", extension: "pdf", } , title: "My file", } , } , { id: "7RosVX2kcH", type: "paragraph", data: { text: "Given data can be used as you want: render with HTML for Web clients, render natively for mobile apps, create the markup for Facebook Insta

Base concepts

Editor.js is a block-style editor for rich media stories. It outputs clean data in JSON instead of heavy HTML markup.

Getting started

Json-editor

json-editor.github.io › json-editor › wysiwyg.html

JSON Editor WYSIWYG Example

This example demonstrates JSONEditor's integration with SCEditor

Discussions

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

WYSIWYG (JSON based) Editor for Frontend - Frontend-React - Strapi Community Forum

Very similar but not the same. I am looking for some WYSIWYG JSON editor, I can install in my app to post content in the format Strapi would understand. It’s for users, who won’t have access to Strapi admin, but still are able to edit or add new content in the UI of the application. More on forum.strapi.io

forum.strapi.io

October 21, 2024

Best Angular JSON editor?

Could use Monaco editor. It's open source and has been easy to work with ime and is feature rich https://github.com/microsoft/monaco-editor Edit: added GitHub link More on reddit.com

r/Angular2

September 6, 2024

Defining a Form UI in JSON schema

Yes but you won't like it. Don't. This idea comes up about once a year and always hits some limit that makes it not work. For normal forma, it's harder than simply wiring them directly, and for complex forms it's impossible. More on reddit.com

r/reactjs

May 6, 2024

Videos

06:09

YouTube

Build a Next.js JSON Editor Offline Web App to Format ...

December 10, 2025

16:41

YouTube

Exploring the JSON Rich Text Editor for developers - YouTube

March 14, 2025

youtube.com

Create you own WYSIWYG Editor using EditorJS | React - YouTube

Quill - Your powerful rich text editor

Quill is a free, open source WYSIWYG editor built for the modern web. Completely customize it for any need with its modular architecture and expressive API.

JSON Editor Online

jsoneditoronline.org

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

In code mode, you can paste a JSON file in the editor, and click the "Format" button from the menu. In tree mode, you can just paste the file and copy it again: the contents will automatically be formatted.

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

GitHub

github.com › jdorn › json-editor › blob › master › examples › wysiwyg.html

json-editor/examples/wysiwyg.html at master · jdorn/json-editor

August 11, 2014 - var editor = new JSONEditor(document.getElementById('editor_holder'),{ schema: { type: "object", title: "Blog Post", properties: { title: { type: "string" }, body: { type: "string", format: "html", options: { wysiwyg: true ·

Author jdorn

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%

Find elsewhere

Google Bing Mojeek

Abdullah Yahya

abdullahyahya.com › 2020 › 10 › editor-js-a-web-based-wysiwyg-editor-that-outputs-json

editor.js - a web-based WYSIWYG editor that outputs JSON - Abdullah Yahya

October 3, 2020 - If you need to create a similar editor for your web project, editor.js offers inline block-style editing and it outputs clean data in json format.

GitHub

github.com › json-editor › json-editor

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

In addition to the standard HTML input formats, JSON Editor can also integrate with several 3rd party specialized editors. These libraries are not included in JSON Editor and you must load them on the page yourself. SCEditor provides WYSIWYG editing of HTML and BBCode.

Starred by 4.9K users

Forked by 702 users

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

Oxygen XML

oxygenxml.com › json_editor.html

Oxygen JSON Editor

Oxygen JSON Editor · Starting from €7/month · Buy Now · Download · Technical Support · User Manual · Upcoming Events · ConVEx Pittsburgh · April 13-15, 2026 Pittsburgh, USA · XML Editor · XML Developer · XML Author · XML Web Author · Content Fusion · Publishing Engine · WebHelp · PDF Chemistry · Feedback · Oxygen Scripting · WYSIWYG Editors ·

GitHub

github.com › sueddeutsche › editron-wysiwyg-editor

GitHub - sueddeutsche/editron-wysiwyg-editor: WYSIWYG editor for the editron JSON-editor

August 10, 2014 - WYSIWYG editor for the editron JSON-editor. Contribute to sueddeutsche/editron-wysiwyg-editor development by creating an account on GitHub.

Starred by 4 users

Forked by 2 users

WYSIWYG Web Builder

wysiwygwebbuilder.com › editable_content.html

Editable Content

Note that the editors are not included in the standard installation of WYSIWYG Web Builder. You will have to install the editors manually! See also "Step 6" of the CMS tutorial. Step 3 When you edit a page, the content you add or change will be stored in a JSON file on your server.

GitHub

github.com › JefMari › awesome-wysiwyg-editors

GitHub - JefMari/awesome-wysiwyg-editors: A curated list of awesome WYSIWYG Editors. · GitHub

Content Tools - A JS library for building WYSIWYG editors for HTML content. 😴 · Editor.js - A block-styled editor with clean JSON output.

Starred by 3.9K users

Forked by 247 users

npm

npmjs.com › package › @json-editor › json-editor

@json-editor/json-editor - npm

February 7, 2026 - In addition to the standard HTML input formats, JSON Editor can also integrate with several 3rd party specialized editors. These libraries are not included in JSON Editor and you must load them on the page yourself. SCEditor provides WYSIWYG editing of HTML and BBCode.

      » 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

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

npm

npmjs.com › package › json-editor-elementui

json-editor-elementui - npm

September 21, 2020 - To use it, set the format to html or bbcode and set the wysiwyg option to true: ... You can configure SCEditor by setting configuration options in JSONEditor.plugins.sceditor. Here's an example: JSONEditor.plugins.sceditor.emoticonsEnabled = ...

      » npm install json-editor-elementui

Published Sep 21, 2020

Version 1.0.6

Author Jeremy Dorn

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

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

HubSpot

blog.hubspot.com › home › website › 20 best wysiwyg html editors for 2026

20 best WYSIWYG HTML editors for 2026

April 22, 2025 - Represents content as JSON for easier processing and format conversion · Cross-platform compatibility across all browsers and devices · Lightweight and fast-loading editor · Considerations · Lacks advanced formatting and editing features compared to feature-rich editors · Doesn't offer real-time collaboration capabilities out of the box · Summernote is a simple WYSIWYG editor that provides a familiar interface resembling Microsoft Word.

GitHub

github.com › jdorn › json-editor

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

Starred by 5.8K users

Forked by 1.1K users

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

Strapi Community

forum.strapi.io › questions and answers › frontend-react

WYSIWYG (JSON based) Editor for Frontend - Frontend-React - Strapi Community Forum

October 21, 2024 - I am migrating a project from Keystone to Strapi 5. They both have very similar WYSIWYG editors (based on JSON, not markdown). However, the JSON output is not exactly the same. Very similar but not the same. I am lookin…

Contentstack

contentstack.com › blog › tech-talk › json-powered-rich-text-editor

Introducing the New JSON-powered, Block-Style Rich Text Editor

July 19, 2021 - The new block-style JSON editor stores and returns data in a structured JSON format.

Awesomeopensource

awesomeopensource.com › project › json-editor › json-editor

Json Editor Alternatives

JSON Schema Based Editor