{"id":15225,"library":"react-xml-viewer","title":"React XML Viewer","description":"react-xml-viewer is a React component designed for pretty-printing and displaying XML strings in a user-friendly, formatted manner. The current stable version is 3.0.4. The library has an active release cadence, with recent updates addressing security vulnerabilities (CVEs), ensuring compatibility with newer React versions (e.g., React 19), and adding new features like line numbers and improved collapsing functionality. Its key differentiators include extensive customization options for appearance via a theming prop, the ability to make XML collapsible, and a dedicated prop for handling invalid XML input. It also ships with TypeScript types, enhancing developer experience in TypeScript projects. It leverages `fast-xml-parser` for its underlying XML processing, and regular updates help maintain security and performance.","status":"active","version":"3.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/alissonmbr/react-xml-viewer","tags":["javascript","xml","prettify","beautify","viewer","formatter","react","typescript"],"install":[{"cmd":"npm install react-xml-viewer","lang":"bash","label":"npm"},{"cmd":"yarn add react-xml-viewer","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-xml-viewer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for any React component.","package":"react","optional":false},{"reason":"Peer dependency required for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"XMLViewer is a default export, not a named export.","wrong":"import { XMLViewer } from 'react-xml-viewer';","symbol":"XMLViewer","correct":"import XMLViewer from 'react-xml-viewer';"},{"note":"For CommonJS environments, access the default export via `.default`.","wrong":"const XMLViewer = require('react-xml-viewer');","symbol":"XMLViewer (CommonJS)","correct":"const XMLViewer = require('react-xml-viewer').default;"},{"note":"Theme object is passed directly to the `theme` prop for styling.","symbol":"Theme customization","correct":"const customTheme = { tagColor: '#d43900' };\n// ... <XMLViewer theme={customTheme} />"}],"quickstart":{"code":"import React from 'react';\nimport XMLViewer from 'react-xml-viewer';\n\nconst exampleXml = `\n<bookstore>\n  <book category=\"COOKING\">\n    <title lang=\"en\">Everyday Italian</title>\n    <author>Giada De Laurentiis</author>\n    <year>2005</year>\n    <price>30.00</price>\n  </book>\n  <book category=\"CHILDREN\">\n    <title lang=\"en\">Harry Potter</title>\n    <author>J.K. Rowling</author>\n    <year>2005</year>\n    <price>29.99</price>\n  </book>\n</bookstore>\n`;\n\nconst customInvalidXmlMessage = (\n  <div style={{ color: 'red', fontWeight: 'bold' }}>\n    Oops! This XML is malformed.\n  </div>\n);\n\nexport function App() {\n  return (\n    <div style={{ fontFamily: 'monospace', padding: '20px' }}>\n      <h1>My XML Document</h1>\n      <XMLViewer\n        xml={exampleXml}\n        indentSize={4}\n        collapsible={true}\n        initialCollapsedDepth={1}\n        showLineNumbers={true}\n        invalidXml={customInvalidXmlMessage}\n        theme={{\n          tagColor: '#61dafb',\n          textColor: '#212121',\n          attributeKeyColor: '#e91e63',\n          attributeValueColor: '#4caf50'\n        }}\n      />\n    </div>\n  );\n}\n","lang":"typescript","description":"This quickstart demonstrates rendering a complex XML string using `XMLViewer` with various styling, collapsing, and line number options, including custom theme and invalid XML handling."},"warnings":[{"fix":"Consult the `react-xml-viewer` v2.0.0 changelog and update component props and usage patterns accordingly. Ensure `react` and `react-dom` peer dependencies meet the requirements (>=16.8.4).","message":"Version 2.0.0 introduced significant changes, potentially breaking existing implementations built for v1.x. Users upgrading should review the changelog for specific migration steps.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Update `react-xml-viewer` to version 2.0.4 or higher and correct the prop name to `initialCollapsedDepth`.","message":"The `initialCollapsedDepth` prop had a typo as `initalCollapsedDepth` in versions prior to 2.0.4. Using the misspelled prop would have no effect.","severity":"breaking","affected_versions":"<2.0.4"},{"fix":"Ensure the XML string passed to the `xml` prop is well-formed. Consider validating XML on the server-side or providing a custom `invalidXml` component to guide users.","message":"The component requires valid XML. If the `xml` prop contains malformed XML, it will display the content provided by the `invalidXml` prop (defaulting to 'Invalid XML!'). This can lead to unexpected UI if not handled.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade `react-xml-viewer` to version 3.0.2 or newer immediately to mitigate these security risks.","message":"A series of security vulnerabilities (CVE-2026-25896, CVE-2026-26278) related to the underlying `fast-xml-parser` dependency were patched in version 3.0.2.","severity":"breaking","affected_versions":"<3.0.2"},{"fix":"Always use the latest stable version of `react-xml-viewer` to ensure compatibility with the most recent stable React releases. If using an older React version, ensure `react-xml-viewer`'s peer dependencies are met.","message":"While v2.0.5 added compatibility for React 19, earlier versions might not work correctly with React 19. Similarly, v2.0.0 included a fix for React 16 compatibility.","severity":"gotcha","affected_versions":"<2.0.5"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Use `const XMLViewer = require('react-xml-viewer').default;` for CommonJS imports or switch to `import XMLViewer from 'react-xml-viewer';` in an ESM context.","cause":"Attempting to use `require('react-xml-viewer')` directly in a CommonJS module when `react-xml-viewer` is primarily an ESM default export.","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."},{"fix":"Ensure the `xml` prop always receives a valid XML string. For optional XML, use conditional rendering or provide a default empty string: `<XMLViewer xml={xmlString ?? ''} />`.","cause":"Passing a non-string or `null`/`undefined` value to the `xml` prop, which expects a string.","error":"TypeError: Cannot read properties of undefined (reading 'split')"},{"fix":"Update `react-xml-viewer` to version 2.0.4 or higher and correct the prop name to `initialCollapsedDepth`.","cause":"Using the old, misspelled prop `initalCollapsedDepth` in TypeScript projects.","error":"Property 'initalCollapsedDepth' does not exist on type 'IntrinsicAttributes & XMLViewerProps'. Did you mean 'initialCollapsedDepth'?"}],"ecosystem":"npm"}