A web-based tool to view, edit, format, transform, and validate JSON
npm install vanilla-jsoneditorA web-based tool to view, edit, format, transform, and validate JSON.
Try it out:
This is the vanilla variant of svelte-jsoneditor, which can be used in vanilla JavaScript or frameworks like SolidJS, React, Vue, Angular.
!JSONEditor tree mode screenshot
!JSONEditor text mode screenshot
!JSONEditor table mode screenshot
- View and edit JSON
- Has a low level text editor and high level tree view and table view
- Format (beautify) and compact JSON
- Sort, query, filter, and transform JSON
- Repair JSON
- JSON schema validation and pluggable custom validation
- Color highlighting, undo/redo, search and replace
- Utilities like a color picker and timestamp tag
- Handles large JSON documents up to 512 MB
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:
`ts`
// 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:
`ts`
// 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.
`html
`
Depending on whether you are using JavaScript of TypeScript, create either a JSX or TSX file:
`tsx
//
// JSONEditorReact.tsx
//
import { useEffect, useRef } from 'react'
import { createJSONEditor, JSONEditorPropsOptional } from 'vanilla-jsoneditor'
const JSONEditorReact: React.FC
const refContainer = useRef
const refEditor = useRef
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
export default JSONEditorReact
`
`jsx
//
// 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
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'
`tsx
//
// 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
const handler = useCallback(
(content: Content, previousContent: Content, status: OnChangeStatus) => {
setJsonContent(content)
},
[jsonContent]
)
return (
`tsx
//
// 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 (
The contents of the editor, converted to a text string, are: {toTextContent(content).text}
)
}export default TextContent
``