vanilla-jsoneditor
Advanced tools
A web-based tool to view, edit, format, transform, and validate JSON
The vanilla-jsoneditor is a lightweight and flexible JSON editor that allows users to view, edit, and format JSON data. It provides a user-friendly interface for handling JSON data, making it easier to work with complex JSON structures.
JSON Editing
This feature allows users to create an instance of the JSON editor and set JSON data for editing. The editor provides a user-friendly interface to modify JSON objects.
const editor = new JSONEditor(container, options); editor.set({"name": "John", "age": 30});JSON Validation
The JSON editor can validate the JSON data to ensure it is correctly formatted. This feature helps in identifying errors in the JSON structure.
editor.validate();JSON Formatting
This feature allows users to format JSON data for better readability. It automatically indents and organizes the JSON structure.
editor.format();The jsoneditor package is a web-based tool to view, edit, format, and validate JSON data. It offers a rich set of features including a tree view and text view, which makes it more versatile compared to vanilla-jsoneditor.
react-json-view is a React component for displaying and editing JSON data. It provides a more interactive experience with features like inline editing and collapsible nodes, which can be more suitable for React applications compared to vanilla-jsoneditor.
jsoneditor-react is a React wrapper for the jsoneditor library, providing the same functionalities as jsoneditor but specifically designed for React applications. It offers a seamless integration with React projects, unlike vanilla-jsoneditor which is framework agnostic.
A web-based tool to view, edit, format, transform, and validate JSON.
Try it out: https://jsoneditoronline.org
This is the vanilla variant of svelte-jsoneditor, which can be used in vanilla JavaScript or frameworks like SolidJS, React, Vue, Angular.
Install using npm:
npm install vanilla-jsoneditor
Remark: for usage in a Svelte project, install and use svelte-jsoneditor instead of vanilla-jsoneditor.
If you have a setup for your project with a bundler (like Vite, Rollup, or Webpack), it is best to use the default ES import:
// for use in a React, Vue, or Angular project
import { createJSONEditor } from 'vanilla-jsoneditor'
If you want to use the library straight in the browser, use the provided standalone ES bundle:
// for use directly in the browser
import { createJSONEditor } from 'vanilla-jsoneditor/standalone.js'
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. In general, it is preferable to use the default import { createJSONEditor } from 'vanilla-jsoneditor' so dependencies can be reused.
<!doctype html>
<html lang="en">
<head>
<title>JSONEditor</title>
</head>
<body>
<div id="jsoneditor"></div>
<script type="module">
import { createJSONEditor } from 'vanilla-jsoneditor/standalone.js'
// Or use it through a CDN (not recommended for use in production):
// import { createJSONEditor } from 'https://unpkg.com/vanilla-jsoneditor/index.js'
// import { createJSONEditor } from 'https://cdn.jsdelivr.net/npm/vanilla-jsoneditor/index.js'
let content = {
text: undefined,
json: {
greeting: 'Hello World'
}
}
const editor = createJSONEditor({
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.
// Use updateProps to update properties.
</script>
</body>
</html>
Depending on whether you are using JavaScript of TypeScript, create either a JSX or TSX file:
//
// JSONEditorReact.tsx
//
import { useEffect, useRef } from 'react'
import { createJSONEditor, JSONEditorPropsOptional } from 'vanilla-jsoneditor'
const JSONEditorReact: React.FC<JSONEditorPropsOptional> = (props) => {
const refContainer = useRef<HTMLDivElement>(null)
const refEditor = useRef<JSONEditor | null>(null)
useEffect(() => {
// create editor
refEditor.current = createJSONEditor({
target: refContainer.current!,
props: {}
})
return () => {
// destroy editor
if (refEditor.current) {
refEditor.current.destroy()
refEditor.current = null
}
}
}, [])
useEffect(() => {
// update props
if (refEditor.current) {
refEditor.current.updateProps(props)
}
}, [props])
return <div ref={refContainer}></div>
}
export default JSONEditorReact
//
// JSONEditorReact.jsx
//
import { useEffect, useRef } from 'react'
import { JSONEditor, JSONEditorPropsOptional } from 'vanilla-jsoneditor'
const JSONEditorReact = (props) => {
const refContainer = useRef(null)
const refEditor = useRef(null)
useEffect(() => {
// create editor
refEditor.current = createJSONEditor({
target: refContainer.current,
props: {}
})
return () => {
// destroy editor
if (refEditor.current) {
refEditor.current.destroy()
refEditor.current = null
}
}
}, [])
// update props
useEffect(() => {
if (refEditor.current) {
refEditor.current.updateProps(props)
}
}, [props])
return <div ref={refContainer}></div>
}
export default JSONEditorReact
If you are using NextJS, you will need to use a dynamic import to only render the component in the browser (disabling server-side rendering of the wrapper), as shown below in a NextJS TypeScript example.
If you are using React in an conventional non-NextJS browser app, you can import the component using a standard import statement like import JSONEditorReact from '../JSONEditorReact'
//
// demo.tsx for use with NextJS
//
import dynamic from 'next/dynamic'
import { useCallback, useState } from 'react'
//
// In NextJS, when using TypeScript, type definitions
// can be imported from 'vanilla-jsoneditor' using a
// conventional import statement (prefixed with 'type',
// as shown below), but only types can be imported this
// way. When using NextJS, React components and helper
// functions must be imported dynamically using { ssr: false }
// as shown elsewhere in this example.
//
import type { Content, OnChangeStatus } from 'vanilla-jsoneditor'
//
// In NextJS, the JSONEditor component must be wrapped in
// a component that is dynamically in order to turn off
// server-side rendering of the component. This is neccessary
// because the vanilla-jsoneditor code attempts to use
// browser-only JavaScript capabilities not available
// during server-side rendering. Any helper functions
// provided by vanilla-jsoneditor, such as toTextContent,
// must also only be used in dynamically imported,
// ssr: false components when using NextJS.
//
const JSONEditorReact = dynamic(() => import('../JSONEditorReact'), { ssr: false })
const TextContent = dynamic(() => import('../TextContent'), { ssr: false })
const initialContent = {
hello: 'world',
count: 1,
foo: ['bar', 'car']
}
export default function Demo() {
const [jsonContent, setJsonContent] = useState<Content>({ json: initialContent })
const handler = useCallback(
(content: Content, previousContent: Content, status: OnChangeStatus) => {
setJsonContent(content)
},
[jsonContent]
)
return (
<div>
<JSONEditorReact content={jsonContent} onChange={handler} />
<TextContent content={jsonContent} />
</div>
)
}
//
// 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
FAQs
A web-based tool to view, edit, format, transform, and validate JSON
The npm package vanilla-jsoneditor receives a total of 129,374 weekly downloads. As such, vanilla-jsoneditor popularity was classified as popular.
We found that vanilla-jsoneditor demonstrated a healthy version release cadence and project activity because the last version was released less than 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
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.