jsoneditor-yaml-v2
Advanced tools
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. The library can be loaded as CommonJS module, AMD module, or as a regular javascript file.
Supported browsers: Chrome, Firefox, Safari, Opera, Edge, Internet Explorer 11.
Cross browser testing for JSONEditor is generously provided by BrowserStack
JSONEditor has various modes, with the following features.
with npm (recommended):
npm install jsoneditor
Note that to use JSONEditor in Internet Explorer 11, it is necessary to load a polyfill for
Promisein your application.
<!DOCTYPE HTML>
<html>
<head>
<!-- when using the mode "code", it's important to specify charset utf-8 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="jsoneditor/dist/jsoneditor.min.js"></script>
</head>
<body>
<div id="jsoneditor" style="width: 400px; height: 400px;"></div>
<script>
// create the editor
const container = document.getElementById("jsoneditor")
const options = {}
const editor = new JSONEditor(container, options)
// set json
const initialJson = {
"Array": [1, 2, 3],
"Boolean": true,
"Null": null,
"Number": 123,
"Object": {"a": "b", "c": "d"},
"String": "Hello World"
}
editor.set(initialJson)
// get json
const updatedJson = editor.get()
</script>
</body>
</html>
The code of the JSON Editor is located in the folder ./src. To build
jsoneditor:
Install dependencies:
npm install
Build JSON Editor:
npm run build
This will generate the files ./jsoneditor.js, ./jsoneditor.css, and
minified versions in the dist of the project.
To automatically build when a source file has changed:
npm start
This will update ./jsoneditor.js and ./jsoneditor.css in the dist folder
on every change, but it will NOT update the minified versions as that's
an expensive operation.
Run unit tests:
npm test
Run code linting (JavaScript Standard Style):
npm run lint
The source code of JSONEditor consists of CommonJS modules. JSONEditor can be bundled in a customized way using a module bundler like browserify or webpack. First, install all dependencies of jsoneditor:
npm install
To create a custom bundle of the source code using browserify:
browserify ./index.js -o ./jsoneditor.custom.js -s JSONEditor
The Ace editor, used in mode code, accounts for about one third of the total
size of the library. To exclude the Ace editor from the bundle:
browserify ./index.js -o ./jsoneditor.custom.js -s JSONEditor -x brace -x brace/mode/json -x brace/ext/searchbox
To minify the generated bundle, use uglifyjs:
uglifyjs ./jsoneditor.custom.js -o ./jsoneditor.custom.min.js -m -c
FAQs
A web-based tool to view, edit, format, and validate JSON
We found that jsoneditor-yaml-v2 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Research
A malicious npm campaign is targeting Ethereum developers by impersonating Hardhat plugins and the Nomic Foundation, stealing sensitive data like private keys.