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
Powered by CodeX Docs · To get started using Editor.js, follow these steps:
Json-editor
json-editor.github.io › json-editor › wysiwyg.html
JSON Editor WYSIWYG Example
This example demonstrates JSONEditor's integration with SCEditor
Videos
Quill
quilljs.com
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.
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
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.
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);
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%
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%
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.
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
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 › jdorn › json-editor
GitHub - jdorn/json-editor: JSON Schema Based Editor
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 5.8K users
Forked by 1.1K users
Languages JavaScript 83.1% | HTML 16.9% | JavaScript 83.1% | HTML 16.9%
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
Languages JavaScript 66.1% | SCSS 20.2% | HTML 13.7% | JavaScript 66.1% | SCSS 20.2% | HTML 13.7%
App Store
apps.apple.com › us › app › power-json-editor › id499768540
Power JSON Editor 4+ - Mac App Store
Power JSON Editor is a JSON editor for developers with Visual Tree View and multiple plugins like Array Table Editor and jq Processor, also with format converter plugins, it is easy to convert files between JSON, PLIST, YAML and TOML.
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
CleanCSS
cleancss.com › json-editor
JSON Viewer, Editor, Formatter
An Online JSON Editor to help you create, view and edit your json with the help of a treeview to visualize your data.
JSON Formatter
jsonformatter.org › html-editor
Best HTML editor online helps to Create and Edit HTML along with Test HTML output
It's free wysiwyg html editor, very simple and easy way to Edit and Test HTML code and Share with others. ... Best and Secure Online HTML Editor free works well in Windows, Mac, Linux, Chrome, Firefox, Safari and Edge. ... HTML Editor is very unique tool for editing HTML Run and Test. HTML Editor support URL linking for sharing HTML. i.e. https://jsonformatter...
Libhunt
js.libhunt.com › jsoneditor-alternatives
jsoneditor Alternatives - JavaScript Editors | LibHunt
December 17, 2025 - Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution. 8.6 9.2 L1 jsoneditor VS Apache Thrift · Apache Thrift · 8.5 10.0 jsoneditor VS CKEditor 5 · Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.