{"id":16714566,"url":"https://github.com/josdejong/svelte-jsoneditor","last_synced_at":"2025-05-13T21:04:26.394Z","repository":{"id":37236495,"uuid":"329252026","full_name":"josdejong/svelte-jsoneditor","owner":"josdejong","description":"A web-based tool to view, edit, format, repair, query, transform, and validate JSON","archived":false,"fork":false,"pushed_at":"2025-04-02T16:05:57.000Z","size":5057,"stargazers_count":1028,"open_issues_count":23,"forks_count":120,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-04-28T12:09:12.102Z","etag":null,"topics":["editor","json","svelte"],"latest_commit_sha":null,"homepage":"https://jsoneditoronline.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/josdejong.png","metadata":{"files":{"readme":"README-VANILLA.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-01-13T09:11:32.000Z","updated_at":"2025-04-28T12:08:02.000Z","dependencies_parsed_at":"2024-01-16T10:14:20.197Z","dependency_job_id":"25395f4d-1cf3-42ce-b2ab-5c313115325b","html_url":"https://github.com/josdejong/svelte-jsoneditor","commit_stats":{"total_commits":1172,"total_committers":19,"mean_commits":61.68421052631579,"dds":"0.020477815699658675","last_synced_commit":"001b590b3aa782c2a689ce5d26b52096b24cd338"},"previous_names":[],"tags_count":211,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josdejong%2Fsvelte-jsoneditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josdejong%2Fsvelte-jsoneditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josdejong%2Fsvelte-jsoneditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josdejong%2Fsvelte-jsoneditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/josdejong","download_url":"https://codeload.github.com/josdejong/svelte-jsoneditor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251311331,"owners_count":21569009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","json","svelte"],"created_at":"2024-10-12T21:05:50.935Z","updated_at":"2025-04-28T12:09:27.349Z","avatar_url":"https://github.com/josdejong.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# vanilla-jsoneditor\n\nA web-based tool to view, edit, format, transform, and validate JSON.\n\nTry it out: \u003chttps://jsoneditoronline.org\u003e\n\nThis is the vanilla variant of `svelte-jsoneditor`, which can be used in vanilla JavaScript or frameworks like SolidJS, React, Vue, Angular.\n\n![JSONEditor tree mode screenshot](https://raw.githubusercontent.com/josdejong/svelte-jsoneditor/main/misc/jsoneditor_tree_mode_screenshot.png)\n![JSONEditor text mode screenshot](https://raw.githubusercontent.com/josdejong/svelte-jsoneditor/main/misc/jsoneditor_text_mode_screenshot.png)\n![JSONEditor table mode screenshot](https://raw.githubusercontent.com/josdejong/svelte-jsoneditor/main/misc/jsoneditor_table_mode_screenshot.png)\n\n## Features\n\n- View and edit JSON\n- Has a low level text editor and high level tree view and table view\n- Format (beautify) and compact JSON\n- Sort, query, filter, and transform JSON\n- Repair JSON\n- JSON schema validation and pluggable custom validation\n- Color highlighting, undo/redo, search and replace\n- Utilities like a color picker and timestamp tag\n- Handles large JSON documents up to 512 MB\n\n## Install\n\nInstall using npm:\n\n```\nnpm install vanilla-jsoneditor\n```\n\nRemark: for usage in a Svelte project, install and use `svelte-jsoneditor` instead of `vanilla-jsoneditor`.\n\n## Use\n\nIf you have a setup for your project with a bundler (like Vite, Rollup, or Webpack), it is best to use the default ES import:\n\n```ts\n// for use in a React, Vue, or Angular project\nimport { createJSONEditor } from 'vanilla-jsoneditor'\n```\n\nIf you want to use the library straight in the browser, use the provided standalone ES bundle:\n\n```ts\n// for use directly in the browser\nimport { createJSONEditor } from 'vanilla-jsoneditor/standalone.js'\n```\n\nThe 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.\n\n## Use (Browser example loading the ES module)\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eJSONEditor\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"jsoneditor\"\u003e\u003c/div\u003e\n\n    \u003cscript type=\"module\"\u003e\n      import { createJSONEditor } from 'vanilla-jsoneditor/standalone.js'\n\n      // Or use it through a CDN (not recommended for use in production):\n      // import { createJSONEditor } from 'https://unpkg.com/vanilla-jsoneditor/index.js'\n      // import { createJSONEditor } from 'https://cdn.jsdelivr.net/npm/vanilla-jsoneditor/index.js'\n\n      let content = {\n        text: undefined,\n        json: {\n          greeting: 'Hello World'\n        }\n      }\n\n      const editor = createJSONEditor({\n        target: document.getElementById('jsoneditor'),\n        props: {\n          content,\n          onChange: (updatedContent, previousContent, { contentErrors, patchResult }) =\u003e {\n            // content is an object { json: JSONData } | { text: string }\n            console.log('onChange', { updatedContent, previousContent, contentErrors, patchResult })\n            content = updatedContent\n          }\n        }\n      })\n\n      // use methods get, set, update, and onChange to get data in or out of the editor.\n      // Use updateProps to update properties.\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Use (React example, including NextJS)\n\n### First, create a React component to wrap the vanilla-jsoneditor\n\nDepending on whether you are using JavaScript of TypeScript, create either a JSX or TSX file:\n\n### TypeScript\n\n```tsx\n//\n// JSONEditorReact.tsx\n//\nimport { useEffect, useRef } from 'react'\nimport { createJSONEditor, JSONEditorPropsOptional } from 'vanilla-jsoneditor'\n\nconst JSONEditorReact: React.FC\u003cJSONEditorPropsOptional\u003e = (props) =\u003e {\n  const refContainer = useRef\u003cHTMLDivElement\u003e(null)\n  const refEditor = useRef\u003cJSONEditor | null\u003e(null)\n\n  useEffect(() =\u003e {\n    // create editor\n    refEditor.current = createJSONEditor({\n      target: refContainer.current!,\n      props: {}\n    })\n\n    return () =\u003e {\n      // destroy editor\n      if (refEditor.current) {\n        refEditor.current.destroy()\n        refEditor.current = null\n      }\n    }\n  }, [])\n\n  useEffect(() =\u003e {\n    // update props\n    if (refEditor.current) {\n      refEditor.current.updateProps(props)\n    }\n  }, [props])\n\n  return \u003cdiv ref={refContainer}\u003e\u003c/div\u003e\n}\n\nexport default JSONEditorReact\n```\n\n### JavaScript\n\n```jsx\n//\n// JSONEditorReact.jsx\n//\nimport { useEffect, useRef } from 'react'\nimport { JSONEditor, JSONEditorPropsOptional } from 'vanilla-jsoneditor'\n\nconst JSONEditorReact = (props) =\u003e {\n  const refContainer = useRef(null)\n  const refEditor = useRef(null)\n\n  useEffect(() =\u003e {\n    // create editor\n    refEditor.current = createJSONEditor({\n      target: refContainer.current,\n      props: {}\n    })\n\n    return () =\u003e {\n      // destroy editor\n      if (refEditor.current) {\n        refEditor.current.destroy()\n        refEditor.current = null\n      }\n    }\n  }, [])\n\n  // update props\n  useEffect(() =\u003e {\n    if (refEditor.current) {\n      refEditor.current.updateProps(props)\n    }\n  }, [props])\n\n  return \u003cdiv ref={refContainer}\u003e\u003c/div\u003e\n}\n\nexport default JSONEditorReact\n```\n\n### Import and use the React component\n\nIf 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.\n\nIf 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'`\n\n```tsx\n//\n// demo.tsx for use with NextJS\n//\nimport dynamic from 'next/dynamic'\nimport { useCallback, useState } from 'react'\n\n//\n// In NextJS, when using TypeScript, type definitions\n// can be imported from 'vanilla-jsoneditor' using a\n// conventional import statement (prefixed with 'type',\n// as shown below), but only types can be imported this\n// way. When using NextJS, React components and helper\n// functions must be imported dynamically using { ssr: false }\n// as shown elsewhere in this example.\n//\nimport type { Content, OnChangeStatus } from 'vanilla-jsoneditor'\n\n//\n// In NextJS, the JSONEditor component must be wrapped in\n// a component that is dynamically in order to turn off\n// server-side rendering of the component. This is neccessary\n// because the vanilla-jsoneditor code attempts to use\n// browser-only JavaScript capabilities not available\n// during server-side rendering. Any helper functions\n// provided by vanilla-jsoneditor, such as toTextContent,\n// must also only be used in dynamically imported,\n// ssr: false components when using NextJS.\n//\nconst JSONEditorReact = dynamic(() =\u003e import('../JSONEditorReact'), { ssr: false })\nconst TextContent = dynamic(() =\u003e import('../TextContent'), { ssr: false })\n\nconst initialContent = {\n  hello: 'world',\n  count: 1,\n  foo: ['bar', 'car']\n}\n\nexport default function Demo() {\n  const [jsonContent, setJsonContent] = useState\u003cContent\u003e({ json: initialContent })\n  const handler = useCallback(\n    (content: Content, previousContent: Content, status: OnChangeStatus) =\u003e {\n      setJsonContent(content)\n    },\n    [jsonContent]\n  )\n\n  return (\n    \u003cdiv\u003e\n      \u003cJSONEditorReact content={jsonContent} onChange={handler} /\u003e\n      \u003cTextContent content={jsonContent} /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n```tsx\n//\n// TextContent.tsx\n//\n// (wrapper around toTextContent for use with NextJS)\n//\nimport { Content, toTextContent } from 'vanilla-jsoneditor'\n\ninterface IOwnProps {\n  content: Content\n}\nconst TextContent = (props: IOwnProps) =\u003e {\n  const { content } = props\n\n  return (\n    \u003cp\u003e\n      The contents of the editor, converted to a text string, are: {toTextContent(content).text}\n    \u003c/p\u003e\n  )\n}\n\nexport default TextContent\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosdejong%2Fsvelte-jsoneditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjosdejong%2Fsvelte-jsoneditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosdejong%2Fsvelte-jsoneditor/lists"}