npm
npmjs.com › package › vanilla-jsoneditor
vanilla-jsoneditor - npm
// // TextContent.tsx // // (wrapper around toTextContent for use with NextJS) // import { Content, toTextContent } from 'vanilla-jsoneditor' interface IOwnProps { content: Content } const TextContent = (props: IOwnProps) => { const { content } = props return ( <p> The contents of the editor, converted to a text string, are: {toTextContent(content).text} </p> ) } export default TextContent · none · npm i vanilla-jsoneditor · github.com/josdejong/svelte-jsoneditor ·
» npm install vanilla-jsoneditor
Published Dec 10, 2025
Version 3.11.0
GitHub
github.com › josdejong › svelte-jsoneditor
GitHub - josdejong/svelte-jsoneditor: A web-based tool to view, edit, format, repair, query, transform, and validate JSON · GitHub
The standalone bundle contains all dependencies of vanilla-jsoneditor, for example lodash-es and Ajv. If you use some of these dependencies in your project too, it means that they will be bundled twice in your web application, leading to a needlessly large application size.
Starred by 1.2K users
Forked by 145 users
Languages TypeScript 53.8% | Svelte 36.8% | SCSS 6.3% | HTML 1.3% | JavaScript 1.2% | CSS 0.6%
GitHub
github.com › josdejong › svelte-jsoneditor › blob › main › README-VANILLA.md
svelte-jsoneditor/README-VANILLA.md at main · josdejong/svelte-jsoneditor
This is the vanilla variant of svelte-jsoneditor, which can be used in vanilla JavaScript or frameworks like SolidJS, React, Vue, Angular. View and edit JSON · Has a low level text editor and high level tree view and table view · Format (beautify) ...
Author josdejong
GitHub
github.com › json-editor › json-editor
GitHub - json-editor/json-editor: JSON Schema Based Editor · GitHub
If true, NON required properties will have an extra toggable checkbox near the title that determines if the value must be included or not in the editor´s value ... If true, displays a dialog box with a confirmation message before node deletion. ... The default value of `format` for objects. If set to table for example, objects will use table layout if `format` is not specified. ... Max depth of the nested properties to be rendered of provided json schema.
Starred by 4.9K users
Forked by 703 users
Languages JavaScript 61.9% | HTML 36.2% | CSS 1.9%
GitHub
github.com › josdejong › jsoneditor › blob › develop › docs › api.md
jsoneditor/docs/api.md at develop · josdejong/jsoneditor
The callback is invoked with three arguments: parent is an HTML element where the color picker can be attached, color is the current color, onChange(newColor) is a callback which has to be invoked with the new color selected in the color picker. JSONEditor comes with a built-in color picker, powered by vanilla-picker.
Author josdejong
GitHub
github.com › josdejong › svelte-jsoneditor › issues › 165
vanilla-jsoneditor in commonjs · Issue #165 · josdejong/svelte-jsoneditor
October 13, 2022 - I would like to be able to import vanilla-jsoneditor in my commonjs project. In the development environment I have been able to workaround this with import() but somehow after building it fails. I have tried to fork the repo and compile ...
Author hacknlove
GitHub
github.com › furkanatilgan › gm-vanilla-jsoneditor
GitHub - furkanatilgan/gm-vanilla-jsoneditor
<!DOCTYPE html> <html lang="en"> <head> <title>JSONEditor</title> </head> <body> <div id="jsoneditor"></div> <script type="module"> import { JSONEditor } from 'vanilla-jsoneditor' let content = { text: undefined, json: { greeting: 'Hello World' } } const editor = new JSONEditor({ target: document.getElementById('jsoneditor'), props: { content, onChange: (updatedContent, previousContent, { contentErrors, patchResult }) => { // content is an object { json: JSONData } | { text: string } console.log('onChange', { updatedContent, previousContent, contentErrors, patchResult }) content = updatedContent } } }) // use methods get, set, update, and onChange to get data in or out of the editor.
Author furkanatilgan
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
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%
CodeSandbox
codesandbox.io › examples › package › vanilla-jsoneditor
vanilla-jsoneditor examples - CodeSandbox
epitelete-perf-editor · abelpz · svelte-jsoneditor react (forked)Demo showing how to use svelte-jsoneditor in React · EddieJamsession · svelte-jsoneditor react (forked)Demo showing how to use svelte-jsoneditor in React · leidsondiasFind more examples or templates · AboutA web-based tool to view, edit, format, transform, and validate JSON140,989Weekly Downloads · Latest version3.11.0 · LicenseISC · External Links · github.com/josdejong/svelte-jsoneditor ·
GitHub
github.com › pardnchiu › NanoJSON
GitHub - pardnchiu/NanoJSON: A lightweight JSON editor based on Vanilla JS and native APIs, provide visual editing, dynamic type switching, and file import/export. Suitable for website integration and JSON data editing.
A lightweight JSON editor based on Vanilla JS and native APIs, provide visual editing, dynamic type switching, and file import/export. Suitable for website integration and JSON data editing. - pard...
Author pardnchiu
GitHub
github.com › pleaseshutup › jsone
GitHub - pleaseshutup/jsone: JSON Editor with custom configuration hinting. Great for providing an easy guided way to edit or view JSON. Vanilla js
JSON Editor with custom configuration hinting. Great for providing an easy guided way to edit or view JSON. Vanilla js - pleaseshutup/jsone
Author pleaseshutup
jsDelivr
jsdelivr.com › package › npm › vanilla-jsoneditor
vanilla-jsoneditor CDN by jsDelivr - A CDN for npm and GitHub
December 10, 2025 - A web-based tool to view, edit, format, transform, and validate JSON · Version 3.11.0 License ISC · INSTALL · Version: Static · Static · Latest Patch · Latest Minor · Latest Major · Learn more · Readme Files Statistics Browse CDN · ...
Published Jul 08, 2022
GitHub
github.com › cloydlau › json-editor-vue
GitHub - cloydlau/json-editor-vue: Vue 2/3 isomorphic JSON editor, viewer, formatter and validator. · GitHub
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="app"> <json-editor-vue v-model="value"></json-editor-vue> </div> <script type="importmap"> { "imports": { "vue": "https://cdn.jsdelivr.net/npm/vue/dist/vue.esm-browser.prod.js", "vue-demi": "https://cdn.jsdelivr.net/npm/vue-demi/lib/v3/index.mjs", "vanilla-jsoneditor": "https://cdn.jsdelivr.net/npm/vanilla-jsoneditor", "json-editor-vue": "https://cdn.jsdelivr.net/npm/json-editor-vue@0.18/dist/json-editor-vue.mjs" } } </script> <script type="module"> import { createApp, ref } from 'vue' import JsonEditorVue from 'json-editor-vue' createApp({ setup: () => ({ value: ref(), }), }) .use(JsonEditorVue) .mount('#app') </script> </body> </html>
Starred by 657 users
Forked by 31 users
Languages TypeScript 90.3% | JavaScript 8.4% | HTML 1.3%
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?
GitHub
github.com › cloydlau › json-editor-vue › releases
Releases · cloydlau/json-editor-vue
Upgrade vanilla-jsoneditor to v2.0 - by @cloydlau (0c22d) cloydlau · Assets 2 · Loading · There was an error while loading. Please reload this page. 11 Oct 08:21 · cloydlau · v0.17.2 · 0ebda26 · Compare · Filter · Loading · There was an error while loading.
Author cloydlau
GitHub
github.com › json-editor › json-editor › issues › 626
Vanilla Picker - thumb nail shows rgb number, not the color · Issue #626 · json-editor/json-editor
August 5, 2019 - Thanks - Adding image of what the vanilla picker looks like. Wandering if we can get the default not to show #0000ff in this case, but the color box that the normal color chooser does. json-editor version: built 2 weeks ago from the latest branch.
Author Lilwolf
GitHub
github.com › josdejong › svelte-jsoneditor › issues › 473
Changing Menu in plain vanilla JS · Issue #473 · josdejong/svelte-jsoneditor
July 29, 2024 - // import { JSONEditor } from 'vanilla-jsoneditor/standalone.js' // Or use it through a CDN (not recommended for use in production): import { JSONEditor } from 'https://unpkg.com/vanilla-jsoneditor/standalone.js' // import { JSONEditor } from 'https://cdn.jsdelivr.net/npm/vanilla-jsoneditor/standalone.js' // import { faFloppyDisk } from 'https://unpkg.com/@fortawesome/free-solid-svg-icons' const faFloppyDisk = { prefix: 'fas', iconName: 'floppy-disk', icon: [448, 512, [128190, 128426, "save"], "f0c7", "M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-242.7c0-1
Author schaefa
GitHub
github.com › josdejong › svelte-jsoneditor › discussions › 196
Should vanilla-jsoneditor export UMD or CommonJS format? · josdejong/svelte-jsoneditor · Discussion #196
For now svelte-jsoneditor & vanilla-jsoneditor export ESM only. For details see #195.
Author josdejong
JSON Editor Online
jsoneditoronline.org › docs
Documentation | JSON Editor Online
The repair features are described in detail at https://github.com/josdejong/jsonrepair . JSON Schema documents can be used to validate the structure of a JSON document. The JSON Editor can not enforce a JSON schema, it will only display warnings when a document doesn’t adhere to the schema.