{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/plus/jsonviewer","result":{"data":{"current":{"frontmatter":{"title":"JsonViewer","order":32,"brief":"Used for displaying and editing JSON data","icon":"doc-jsonviewer"},"fields":{"type":"plus"},"tableOfContents":{"items":[{"url":"#when-to-use","title":"When to use"},{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#differrent-lineheight","title":"Differrent lineHeight"},{"url":"#autowrap","title":"Autowrap"},{"url":"#format-options","title":"Format options"},{"url":"#custom-render-rules","title":"Custom Render Rules"}]},{"url":"#api-reference","title":"API Reference","items":[{"url":"#jsonviewer","title":"JsonViewer"},{"url":"#jsonvieweroptions","title":"JsonViewerOptions"},{"url":"#formattingoptions","title":"FormattingOptions"},{"url":"#customrenderrule","title":"CustomRenderRule"}]},{"url":"#methods","title":"Methods","items":[{"url":"#performance","title":"Performance","items":[{"url":"#bundle-size","title":"Bundle Size"},{"url":"#time-for-rendering-data-of-different-magnitudes","title":"Time for rendering data of different magnitudes."}]}]}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"localeCode\": \"en-US\",\n \"order\": 32,\n \"category\": \"Plus\",\n \"title\": \"JsonViewer\",\n \"icon\": \"doc-jsonviewer\",\n \"dir\": \"column\",\n \"noInline\": true,\n \"brief\": \"Used for displaying and editing JSON data\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"When to use\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The JsonViewer component can be used for the display and editing of JSON data.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Semi mainly referred to the design concept of the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"text-buffer\"), \" data structure of \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/microsoft/vscode\"\n }, \"VS Code\"), \", reused some utilities and data type definitions (Token parsing, language services, etc.), and implemented the JsonViewer component in combination with our functional/style customization requirements. Visually, it will be more coordinated with other components within the Semi Design system, and it will be more convenient for customized rendering and customization of specific data types.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Compared with directly using MonacoEditor, Semi JsonViewer has additional processing in engineering construction, is simpler to use, and there is no need to pay attention to complex configurations such as Webpack plugins and worker loaders. At the same time, since we only focus on the JSON data format, it is more lightweight. While being ready to use out of the box, it has a smaller size \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"(\\uD83D\\uDCE6-96%)\"), \", a more extreme loading speed \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"(\\uD83D\\uDE80 -53.5%)\"), \", and less memory occupation \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"(\\u2B07\\uFE0F71.6% reduction)\"), \". For data with five million lines and below, data loading and parsing can be completed within 1 second.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Detailed comparison data can be referred to in the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#Performance\"\n }, \"Performance\"), \" section.\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"If you only need to preview/edit JSON and don't need to modify other more complex programming languages, we recommend that you choose \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"JsonViewer\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If you also need to handle data/code files in other formats and the full capabilities of a code editor (syntax highlighting, code completion, error prompts, complex editing, etc.) are essential and the build product size is not a key concern, we recommend that you choose \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Monaco Editor\"), \".\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Demos\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"How to import\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"JsonViewer supported from v2.71.0\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"import\",\n \"import\": true\n }, \"import { JsonViewer } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Basic Usage\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Basic usage of JsonViewer. Pass in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"height\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"width\"), \" parameters to set the height, width and initial value of the component. Pass in the JSON string through the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"value\"), \".\\nNote: JsonViewer is an uncontrolled component. If the value prop is passed as a controlled property (i.e., React State), it is not recommended to modify the value prop (setState) in onChange. If you need to get the component's value, you can get it through ref, please refer to \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#Methods\"\n }, \"Methods\"), \" for details.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React from 'react';\\nimport { JsonViewer } from '@douyinfe/semi-ui';\\nconst data = `{\\n \\\"name\\\": \\\"Semi\\\",\\n \\\"version\\\": \\\"0.0.0\\\"\\n}`;\\nfunction SimpleJsonViewer() {\\n return (\\n
\\n \\n
\\n );\\n}\\n\\nrender(SimpleJsonViewer);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Differrent lineHeight\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Configure the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"lineHeight\"), \" parameter of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"options\"), \" to set a fixed line height (unit: px, default 18).\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React from 'react';\\nimport { JsonViewer, Space } from '@douyinfe/semi-ui';\\nconst data = `{\\n \\\"name\\\": \\\"Semi\\\",\\n \\\"version\\\": \\\"0.0.0\\\"\\n}`;\\nfunction SimpleJsonViewerWithLineHeight() {\\n return (\\n
\\n
\\n \\n
\\n
\\n \\n
\\n
\\n \\n
\\n
\\n );\\n}\\n\\nrender(SimpleJsonViewerWithLineHeight);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Autowrap\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Configure the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"autoWrap\"), \" parameter of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"options\"), \". When it is set to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"true\"), \", the component will automatically wrap lines according to the length of the content.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React from 'react';\\nimport { JsonViewer } from '@douyinfe/semi-ui';\\nconst data = `{\\n \\\"name\\\": \\\"Semi\\\",\\n \\\"version\\\": \\\"0.0.0\\\",\\n \\\"description\\\": \\\"Semi Design is a design system that defines a set of mid_back design and front_end basic components.\\\"\\n}`;\\nfunction SimpleJsonViewerWithAutoWrap() {\\n return (\\n
\\n \\n
\\n );\\n}\\n\\nrender(SimpleJsonViewerWithAutoWrap);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Format options\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Configure \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"options.formatOptions\"), \" to set the formatting configuration of the component.\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"tabSize: number\\uFF0Cset the indent size to 4, which means each level of indentation is 4 spaces.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"insertSpaces: boolean\\uFF0Cwhen it is true, it means using spaces for indentation, and when it is false, it means using tabs.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"eol: string\\uFF0Cset the line break character, which can be \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\\\n\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\\\r\\\\n\"), \"\\uFF0C\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React, { useRef } from 'react';\\nimport { JsonViewer, Button } from '@douyinfe/semi-ui';\\nconst data = `{\\n \\\"name\\\": \\\"Semi\\\",\\n \\\"version\\\": \\\"0.0.0\\\"\\n}`;\\nfunction FormatJsonComponent() {\\n const jsonviewerRef = useRef();\\n return (\\n
\\n \\n
\\n \\n
\\n
\\n );\\n}\\n\\nrender(FormatJsonComponent);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom Render Rules\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"By configuring the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"options.customRenderRule\"), \" parameter, you can customize how JSON content is rendered (Note: only works in read-only mode).\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"customRenderRule\"), \" is an array of rules, where each rule contains two properties:\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"match\"), \": Matching condition, can be one of three types:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"String: Exact match\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Regular expression: Match by regex\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Function: Custom matching logic, with signature \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"(value: string, pathChain: string) => boolean\"), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"value\"), \": Value to match (key or value from JSON key-value pairs, as strings since internal processing only filters quotes)\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"path\"), \": Current matching path, format is \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"root.key1.key2.key3[0].key4\")))))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"render\"), \": Custom render function, with signature \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"(content: string) => React.ReactNode\"), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"content\"), \": Matched content. For string values, includes double quotes (e.g., \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\\"name\\\"\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\\"Semi\\\"\"), \")\")))), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React, { useRef } from 'react';\\nimport { JsonViewer, Button, Rating, Popover, Tag, Image } from '@douyinfe/semi-ui';\\nconst data = `{\\n \\\"name\\\": \\\"Semi\\\",\\n \\\"version\\\": \\\"2.7.4\\\",\\n \\\"rating\\\": 5,\\n \\\"tags\\\": [\\\"design\\\", \\\"react\\\", \\\"ui\\\"],\\n \\\"image\\\": \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg\\\"\\n}`;\\nfunction CustomRenderJsonComponent() {\\n const jsonviewerRef = useRef();\\n const customRenderRule = [\\n {\\n match: 'Semi',\\n render: (content) => {\\n return {content};\\n }\\n },\\n {\\n match: (value)=> value == 5,\\n render: (content) => {\\n return ;\\n }\\n },\\n {\\n match: (value, path)=> path === 'root.tags[0]' || path === 'root.tags[1]' || path === 'root.tags[2]',\\n render: (content) => {\\n return {content};\\n }\\n },\\n {\\n match: new RegExp('^http'),\\n render: (content) => {\\n // content is original string with quotes, need to remove quotes for valid URL\\n return } trigger='hover'>{content};\\n }\\n }\\n ];\\n return (\\n