{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/json-and-xml-viewer/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"JSON and XML viewer\"\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `When you open a JSON or XML file in Polypane (either from a URL, or as a .json/.xml file on disk) it is shown in a viewer that shows the JSON or XML in a collapsible tree. The viewer works in all panes as well as in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/browse/\"\n  }), `browse`), ` panel.`), mdx(\"p\", null, `When opening a JSON or XML file from disk, the viewer will automatically use the full layout.`), mdx(\"h2\", {\n    \"id\": \"json-viewer\"\n  }, `JSON viewer`), mdx(\"p\", null, `The JSON viewer shows a styled tree view of your JSON data with the options to filter and expand/collapse the data. You can also toggle to a raw data view that shows the JSON as it's sent by the server.`), mdx(\"p\", null, `The parsed JSON is also made available in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/console/\"\n  }), `console`), ` and can be accessed by using `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `window.json`), ` as well as the alias `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `window.data`), `.`), mdx(\"h3\", {\n    \"id\": \"tree\"\n  }, `Tree`), mdx(\"p\", null, `The JSON tree shows you the data in a formatted tree. From the top bar you can save the json file or copy the json to the clipboard.`), mdx(\"img\", {\n    src: tree,\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"h4\", {\n    \"id\": \"rich-data-view\"\n  }, `Rich data view`), mdx(\"p\", null, `Each entry has a type, like number, url, text or datetime with an associated icon and color.`), mdx(\"p\", null, `For specific types we add more information, like the length for objects and arrays or a pretty-print of the date for datetime fields.`), mdx(\"p\", null, `Urls show a favicon and clicking them opens them in a new tab.`), mdx(\"img\", {\n    src: rich,\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"h4\", {\n    \"id\": \"filtering\"\n  }, `Filtering`), mdx(\"p\", null, `Filter your JSON file with plain text that will be matched against both the properties and values, and only show the entries that match.`), mdx(\"img\", {\n    src: filter,\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"h4\", {\n    \"id\": \"expand-and-collapse\"\n  }, `Expand and collapse`), mdx(\"p\", null, `Quickly expand or collapse all objects and arrays with the \"Expand all\" and \"Collapse all\" buttons.`), mdx(\"p\", null, `Click the down arrow next to the expand or collapse buttons to show a list of properties that you can expand or collapse individually. This makes it easy to navigate large JSON files and see only the parts you care about without repeatedly having to expand or collapse the same data types.`), mdx(\"img\", {\n    src: expand,\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"h3\", {\n    \"id\": \"raw-data-view\"\n  }, `Raw data view`), mdx(\"p\", null, `Toggle to the raw data to see the json as it's sent by the server. Click the format button to format the raw data using `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `JSON.stringify`), `. The save and copy buttons will use the data as shown in this overview.`), mdx(\"img\", {\n    src: raw,\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"h2\", {\n    \"id\": \"xml-viewer\"\n  }, `XML viewer`), mdx(\"p\", null, `The XML viewer works the same as the JSON viewer, but with XML data. It shows the XML in a collapsible tree and allows you to filter, expand and collapse the data.`), mdx(\"h3\", {\n    \"id\": \"tree-1\"\n  }, `Tree`), mdx(\"p\", null, `The XML tree shows you the data in a formatted tree. From the top bar you can save the XML file or copy the XML to the clipboard. It highlights attributes and automatically detects URLs and shows their favicon.`), mdx(\"img\", {\n    src: xmltree,\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"p\", null, `The same filtering and expand/collapse options are available as in the JSON viewer.`), mdx(\"h3\", {\n    \"id\": \"raw-data-view-1\"\n  }, `Raw data view`), mdx(\"p\", null, `Toggle to the raw data to see the XML as it's sent by the server.`), mdx(\"img\", {\n    src: xmlraw,\n    className: \"imgshadow\",\n    alt: \"\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"excerpt":"When you open a JSON or XML file in Polypane (either from a URL, or as a .json/.xml file on disk) it is shown in a viewer that shows the…","frontmatter":{"title":"JSON and XML viewer","cover":null,"date":null,"beta":null},"fields":{"nextTitle":"Layout debugging","nextSlug":"/docs/layout-debugging/","prevTitle":"Review and approval by IT and Security","prevSlug":"/docs/review-and-approval-by-it-and-security/","slug":"/docs/json-and-xml-viewer/","date":null,"ogFileName":"json-and-xml-viewer"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/docs/1-password-setup-instructions/"},"frontmatter":{"title":"1Password setup instructions"}}},{"node":{"fields":{"slug":"/docs/accessibility-audit-workflow/"},"frontmatter":{"title":"Accessibility audit workflow"}}},{"node":{"fields":{"slug":"/docs/accessibility-overview/"},"frontmatter":{"title":"Accessibility overview"}}},{"node":{"fields":{"slug":"/docs/accessibility-panel/"},"frontmatter":{"title":"Accessibility panel"}}},{"node":{"fields":{"slug":"/docs/application-folder/"},"frontmatter":{"title":"Application folder"}}},{"node":{"fields":{"slug":"/docs/brand-guidelines/"},"frontmatter":{"title":"Brand guidelines"}}},{"node":{"fields":{"slug":"/docs/breakpoints/"},"frontmatter":{"title":"Breakpoints"}}},{"node":{"fields":{"slug":"/docs/browse/"},"frontmatter":{"title":"Browse"}}},{"node":{"fields":{"slug":"/docs/browser-extensions/"},"frontmatter":{"title":"Browser extensions"}}},{"node":{"fields":{"slug":"/docs/browser-features/"},"frontmatter":{"title":"Browser features"}}},{"node":{"fields":{"slug":"/docs/browsersync-and-polypane/"},"frontmatter":{"title":"Browsersync and Polypane"}}},{"node":{"fields":{"slug":"/docs/color-picker/"},"frontmatter":{"title":"Color Picker"}}},{"node":{"fields":{"slug":"/docs/command-bar/"},"frontmatter":{"title":"Command Bar"}}},{"node":{"fields":{"slug":"/docs/command-line-options/"},"frontmatter":{"title":"Command line options"}}},{"node":{"fields":{"slug":"/docs/configuring-logitech-mouses/"},"frontmatter":{"title":"Configuring Logitech mouses"}}},{"node":{"fields":{"slug":"/docs/configuring-webstorm-to-work-with-polypane/"},"frontmatter":{"title":"Configuring WebStorm to work with Polypane"}}},{"node":{"fields":{"slug":"/docs/console/"},"frontmatter":{"title":"Console"}}},{"node":{"fields":{"slug":"/docs/customizing-polypane/"},"frontmatter":{"title":"Customizing Polypane"}}},{"node":{"fields":{"slug":"/docs/dark-and-light-mode/"},"frontmatter":{"title":"Dark and light mode"}}},{"node":{"fields":{"slug":"/docs/data-processing-agreement/"},"frontmatter":{"title":"Data Processing Agreement"}}},{"node":{"fields":{"slug":"/docs/debug-tools/"},"frontmatter":{"title":"Debug tools"}}},{"node":{"fields":{"slug":"/docs/detecting-polypane/"},"frontmatter":{"title":"Detecting Polypane"}}},{"node":{"fields":{"slug":"/docs/developer-tools/"},"frontmatter":{"title":"Developer tools"}}},{"node":{"fields":{"slug":"/docs/device-presets/"},"frontmatter":{"title":"Device presets"}}},{"node":{"fields":{"slug":"/docs/devtools-panel/"},"frontmatter":{"title":"Devtools Panel"}}},{"node":{"fields":{"slug":"/docs/elements-panel/"},"frontmatter":{"title":"Elements Panel"}}},{"node":{"fields":{"slug":"/docs/emulation/"},"frontmatter":{"title":"Emulation"}}},{"node":{"fields":{"slug":"/docs/experimental-chromium-features/"},"frontmatter":{"title":"Experimental Chromium features"}}},{"node":{"fields":{"slug":"/docs/find-elements/"},"frontmatter":{"title":"Find elements"}}},{"node":{"fields":{"slug":"/docs/form-autofill/"},"frontmatter":{"title":"Form autofill"}}},{"node":{"fields":{"slug":"/docs/global-zoom/"},"frontmatter":{"title":"Global zoom"}}},{"node":{"fields":{"slug":"/docs/helper-extension-for-other-browsers/"},"frontmatter":{"title":"Helper extension for other browsers"}}},{"node":{"fields":{"slug":"/docs/horizontal-overflow/"},"frontmatter":{"title":"Horizontal overflow detection"}}},{"node":{"fields":{"slug":"/docs/integrations/"},"frontmatter":{"title":"Integrations"}}},{"node":{"fields":{"slug":"/docs/intro-to-panel/"},"frontmatter":{"title":"Intro to panel"}}},{"node":{"fields":{"slug":"/docs/intro-to-panes/"},"frontmatter":{"title":"Intro to panes"}}},{"node":{"fields":{"slug":"/docs/json-and-xml-viewer/"},"frontmatter":{"title":"JSON and XML viewer"}}},{"node":{"fields":{"slug":"/docs/known-issues/"},"frontmatter":{"title":"Known issues"}}},{"node":{"fields":{"slug":"/docs/layout-debugging/"},"frontmatter":{"title":"Layout debugging"}}},{"node":{"fields":{"slug":"/docs/layouts/"},"frontmatter":{"title":"Layouts"}}},{"node":{"fields":{"slug":"/docs/link/"},"frontmatter":{"title":"Share panel"}}},{"node":{"fields":{"slug":"/docs/list-of-shortcuts/"},"frontmatter":{"title":"List of shortcuts"}}},{"node":{"fields":{"slug":"/docs/live-auto-reloading/"},"frontmatter":{"title":"Live/auto reloading"}}},{"node":{"fields":{"slug":"/docs/making-screenshots/"},"frontmatter":{"title":"Making screenshots"}}},{"node":{"fields":{"slug":"/docs/measure-text-length/"},"frontmatter":{"title":"Measure text length"}}},{"node":{"fields":{"slug":"/docs/mental-model/"},"frontmatter":{"title":"Mental model of Polypane's browser contexts"}}},{"node":{"fields":{"slug":"/docs/message-bus/"},"frontmatter":{"title":"Message Bus"}}},{"node":{"fields":{"slug":"/docs/meta-information/"},"frontmatter":{"title":"Meta information"}}},{"node":{"fields":{"slug":"/docs/network-panel/"},"frontmatter":{"title":"Network panel"}}},{"node":{"fields":{"slug":"/docs/other-tools/"},"frontmatter":{"title":"Polypane and local servers"}}},{"node":{"fields":{"slug":"/docs/outline-panel/"},"frontmatter":{"title":"Outline Panel"}}},{"node":{"fields":{"slug":"/docs/pane-management/"},"frontmatter":{"title":"Manage panes"}}},{"node":{"fields":{"slug":"/docs/pane-sizes/"},"frontmatter":{"title":"Pane sizes"}}},{"node":{"fields":{"slug":"/docs/performance/"},"frontmatter":{"title":"Performance"}}},{"node":{"fields":{"slug":"/docs/pitching-polypane/"},"frontmatter":{"title":"Pitching Polypane"}}},{"node":{"fields":{"slug":"/docs/polypane-peek/"},"frontmatter":{"title":"Polypane Peek"}}},{"node":{"fields":{"slug":"/docs/portal/"},"frontmatter":{"title":"Polypane Portal"}}},{"node":{"fields":{"slug":"/docs/projects/"},"frontmatter":{"title":"Projects"}}},{"node":{"fields":{"slug":"/docs/recording/"},"frontmatter":{"title":"Recording"}}},{"node":{"fields":{"slug":"/docs/reference-image/"},"frontmatter":{"title":"Reference image"}}},{"node":{"fields":{"slug":"/docs/reload-css/"},"frontmatter":{"title":"Reload CSS"}}},{"node":{"fields":{"slug":"/docs/responsive-debugging-workflow/"},"frontmatter":{"title":"Responsive debugging workflow"}}},{"node":{"fields":{"slug":"/docs/review-and-approval-by-it-and-security/"},"frontmatter":{"title":"Review and approval by IT and Security"}}},{"node":{"fields":{"slug":"/docs/rulers-grids-and-guides/"},"frontmatter":{"title":"Rulers, grids and guides"}}},{"node":{"fields":{"slug":"/docs/sales-and-procurement/"},"frontmatter":{"title":"Sales and Procurement"}}},{"node":{"fields":{"slug":"/docs/security-policy/"},"frontmatter":{"title":"Security Policy"}}},{"node":{"fields":{"slug":"/docs/security/"},"frontmatter":{"title":"Security"}}},{"node":{"fields":{"slug":"/docs/session-management/"},"frontmatter":{"title":"Session management"}}},{"node":{"fields":{"slug":"/docs/setup/"},"frontmatter":{"title":"Setup"}}},{"node":{"fields":{"slug":"/docs/showing-multiple-urls/"},"frontmatter":{"title":"Showing multiple URLs"}}},{"node":{"fields":{"slug":"/docs/simulators/"},"frontmatter":{"title":"Simulators"}}},{"node":{"fields":{"slug":"/docs/snippets/"},"frontmatter":{"title":"Snippets"}}},{"node":{"fields":{"slug":"/docs/social-card-and-open-graph-workflow/"},"frontmatter":{"title":"Social card and Open Graph workflow"}}},{"node":{"fields":{"slug":"/docs/source-panel/"},"frontmatter":{"title":"Source panel"}}},{"node":{"fields":{"slug":"/docs/storage-panel/"},"frontmatter":{"title":"Storage panel"}}},{"node":{"fields":{"slug":"/docs/switching-to-polypane/"},"frontmatter":{"title":"Switching to Polypane"}}},{"node":{"fields":{"slug":"/docs/synced-interactions/"},"frontmatter":{"title":"Synced interactions"}}},{"node":{"fields":{"slug":"/docs/tab-customization/"},"frontmatter":{"title":"Tab customization"}}},{"node":{"fields":{"slug":"/docs/team-workflows/"},"frontmatter":{"title":"Team workflows"}}},{"node":{"fields":{"slug":"/docs/ui-overview/"},"frontmatter":{"title":"Polypane UI overview"}}},{"node":{"fields":{"slug":"/docs/web-vitals/"},"frontmatter":{"title":"Web Vitals"}}},{"node":{"fields":{"slug":"/docs/website-issues-you-could-encounter/"},"frontmatter":{"title":"Website issues you could encounter"}}},{"node":{"fields":{"slug":"/docs/workspace-management/"},"frontmatter":{"title":"Workspace management"}}},{"node":{"fields":{"slug":"/docs/workspaces/"},"frontmatter":{"title":"Workspaces"}}}]}},"pageContext":{"slug":"/docs/json-and-xml-viewer/"}},"staticQueryHashes":["4164364741","425175329"]}