Gathering detailed insights and metrics for chinese-vanilla-jsoneditor
Gathering detailed insights and metrics for chinese-vanilla-jsoneditor
A web-based tool to view, edit, format, repair, query, transform, and validate JSON
0.23.10
1
NOASSERTION
TypeScript
2.06 MB
Installations
npm install chinese-vanilla-jsoneditorDeveloper Guide
BETA
Typescript
Yes
Module System
ESM, UMD
Node Version
18.20.2
NPM Version
10.5.0
Releases
Unable to fetch releases
Languages
7
TypeScript
Svelte
SCSS
HTML
JavaScript
CSS
Shell
TypeScript (52.53%)
Svelte (37.74%)
SCSS (6.57%)
HTML (1.45%)
JavaScript (1.09%)
CSS (0.61%)
Shell (0.01%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
NOASSERTION License
1 Stars
1,117 Commits
1 Branches
1 Contributors
Updated on Dec 21, 2024
Maintainers
1
Package Meta Information
Latest Version
0.23.10
Package Id
chinese-vanilla-jsoneditor@0.23.10
Unpacked Size
2.06 MB
Size
582.57 kB
File Count
11
NPM Version
10.5.0
Node Version
18.20.2
Published on
Sep 14, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
27
@codemirror/autocomplete@codemirror/commands@codemirror/lang-json@codemirror/language@codemirror/lint@codemirror/search@codemirror/state@codemirror/view@fortawesome/fontawesome-common-types@fortawesome/free-regular-svg-icons@fortawesome/free-solid-svg-icons@lezer/highlight@replit/codemirror-indentation-markersajvcodemirror-wrapped-line-indentdiff-sequencesimmutable-json-patchjmespathjson-source-mapjsonrepairlodashlodash-esmemoize-onenatural-compare-litesassvanilla-pickersvelte
vanilla-jsoneditor
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.
Features
- 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
Install using npm:
npm install vanilla-jsoneditor
Remark: for usage in a Svelte project, install and use svelte-jsoneditor instead of vanilla-jsoneditor.
Use
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:
1// for use in a React, Vue, or Angular project 2import { JSONEditor } from 'vanilla-jsoneditor'
If you want to use the library straight in the browser, use the provided standalone ES bundle:
1// for use directly in the browser 2import { JSONEditor } 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 { JSONEditor } from 'vanilla-jsoneditor' so dependencies can be reused.
Use (Browser example loading the ES module):
1<!doctype html> 2<html lang="en"> 3 <head> 4 <title>JSONEditor</title> 5 </head> 6 <body> 7 <div id="jsoneditor"></div> 8 9 <script type="module"> 10 import { JSONEditor } from 'vanilla-jsoneditor/standalone.js' 11 12 // Or use it through a CDN (not recommended for use in production): 13 // import { JSONEditor } from 'https://unpkg.com/vanilla-jsoneditor/index.js' 14 // import { JSONEditor } from 'https://cdn.jsdelivr.net/npm/vanilla-jsoneditor/index.js' 15 16 let content = { 17 text: undefined, 18 json: { 19 greeting: 'Hello World' 20 } 21 } 22 23 const editor = new JSONEditor({ 24 target: document.getElementById('jsoneditor'), 25 props: { 26 content, 27 onChange: (updatedContent, previousContent, { contentErrors, patchResult }) => { 28 // content is an object { json: JSONData } | { text: string } 29 console.log('onChange', { updatedContent, previousContent, contentErrors, patchResult }) 30 content = updatedContent 31 } 32 } 33 }) 34 35 // use methods get, set, update, and onChange to get data in or out of the editor. 36 // Use updateProps to update properties. 37 </script> 38 </body> 39</html>
Use (React example, including NextJS)
First, create a React component to wrap the vanilla-jsoneditor
Depending on whether you are using JavaScript of TypeScript, create either a JSX or TSX file:
TypeScript:
1// 2// JSONEditorReact.tsx 3// 4import { useEffect, useRef } from 'react' 5import { JSONEditor, JSONEditorPropsOptional } from 'vanilla-jsoneditor' 6 7const JSONEditorReact: React.FC<JSONEditorPropsOptional> = (props) => { 8 const refContainer = useRef<HTMLDivElement>(null) 9 const refEditor = useRef<JSONEditor | null>(null) 10 11 useEffect(() => { 12 // create editor 13 refEditor.current = new JSONEditor({ 14 target: refContainer.current!, 15 props: {} 16 }) 17 18 return () => { 19 // destroy editor 20 if (refEditor.current) { 21 refEditor.current.destroy() 22 refEditor.current = null 23 } 24 } 25 }, []) 26 27 useEffect(() => { 28 // update props 29 if (refEditor.current) { 30 refEditor.current.updateProps(props) 31 } 32 }, [props]) 33 34 return <div ref={refContainer} /> 35} 36 37export default JSONEditorReact
JavaScript
1// 2// JSONEditorReact.jsx 3// 4import { useEffect, useRef } from 'react' 5import { JSONEditor, JSONEditorPropsOptional } from 'vanilla-jsoneditor' 6 7const JSONEditorReact = (props) => { 8 const refContainer = useRef(null) 9 const refEditor = useRef(null) 10 11 useEffect(() => { 12 // create editor 13 refEditor.current = new JSONEditor({ 14 target: refContainer.current, 15 props: {} 16 }) 17 18 return () => { 19 // destroy editor 20 if (refEditor.current) { 21 refEditor.current.destroy() 22 refEditor.current = null 23 } 24 } 25 }, []) 26 27 // update props 28 useEffect(() => { 29 if (refEditor.current) { 30 refEditor.current.updateProps(props) 31 } 32 }, [props]) 33 34 return <div ref={refContainer} /> 35} 36 37export default JSONEditorReact
Import and use the React component
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'
1// 2// demo.tsx for use with NextJS 3// 4import dynamic from 'next/dynamic' 5import { useCallback, useState } from 'react' 6 7// 8// In NextJS, when using TypeScript, type definitions 9// can be imported from 'vanilla-jsoneditor' using a 10// conventional import statement (prefixed with 'type', 11// as shown below), but only types can be imported this 12// way. When using NextJS, React components and helper 13// functions must be imported dynamically using { ssr: false } 14// as shown elsewhere in this example. 15// 16import type { Content, OnChangeStatus } from 'vanilla-jsoneditor' 17 18// 19// In NextJS, the JSONEditor component must be wrapped in 20// a component that is dynamically in order to turn off 21// server-side rendering of the component. This is neccessary 22// because the vanilla-jsoneditor code attempts to use 23// browser-only JavaScript capabilities not available 24// during server-side rendering. Any helper functions 25// provided by vanilla-jsoneditor, such as toTextContent, 26// must also only be used in dynamically imported, 27// ssr: false components when using NextJS. 28// 29const JSONEditorReact = dynamic(() => import('../JSONEditorReact'), { ssr: false }) 30const TextContent = dynamic(() => import('../TextContent'), { ssr: false }) 31 32const initialContent = { 33 hello: 'world', 34 count: 1, 35 foo: ['bar', 'car'] 36} 37 38export default function Demo() { 39 const [jsonContent, setJsonContent] = useState<Content>({ json: initialContent }) 40 const handler = useCallback( 41 (content: Content, previousContent: Content, status: OnChangeStatus) => { 42 setJsonContent(content) 43 }, 44 [jsonContent] 45 ) 46 47 return ( 48 <div> 49 <JSONEditorReact content={jsonContent} onChange={handler} /> 50 <TextContent content={jsonContent} /> 51 </div> 52 ) 53}
1// 2// TextContent.tsx 3// 4// (wrapper around toTextContent for use with NextJS) 5// 6import { Content, toTextContent } from 'vanilla-jsoneditor' 7 8interface IOwnProps { 9 content: Content 10} 11const TextContent = (props: IOwnProps) => { 12 const { content } = props 13 14 return ( 15 <p> 16 The contents of the editor, converted to a text string, are: {toTextContent(content).text} 17 </p> 18 ) 19} 20 21export default TextContent
No vulnerabilities found.
No security vulnerabilities found.