React XML Viewer

Common errors

• Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

  cause Attempting to use `require('react-xml-viewer')` directly in a CommonJS module when `react-xml-viewer` is primarily an ESM default export.
  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.

• TypeError: Cannot read properties of undefined (reading 'split')

  cause Passing a non-string or `null`/`undefined` value to the `xml` prop, which expects a string.
  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 ?? ''} />`.

• Property 'initalCollapsedDepth' does not exist on type 'IntrinsicAttributes & XMLViewerProps'. Did you mean 'initialCollapsedDepth'?

  cause Using the old, misspelled prop `initalCollapsedDepth` in TypeScript projects.
  fix Update `react-xml-viewer` to version 2.0.4 or higher and correct the prop name to `initialCollapsedDepth`.

Warnings

• breaking 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.
  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).
• breaking The `initialCollapsedDepth` prop had a typo as `initalCollapsedDepth` in versions prior to 2.0.4. Using the misspelled prop would have no effect.
  Fix: Update `react-xml-viewer` to version 2.0.4 or higher and correct the prop name to `initialCollapsedDepth`.
• gotcha 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.
  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.
• breaking 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.
  Fix: Upgrade `react-xml-viewer` to version 3.0.2 or newer immediately to mitigate these security risks.
• gotcha 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.
  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.

Install

• npm install react-xml-viewer npm
• yarn add react-xml-viewer yarn
• pnpm add react-xml-viewer pnpm

Imports

• XMLViewer
  wrong:

  import { XMLViewer } from 'react-xml-viewer';

  correct:

  import XMLViewer from 'react-xml-viewer';

  XMLViewer is a default export, not a named export.
• XMLViewer (CommonJS)
  wrong:

  const XMLViewer = require('react-xml-viewer');

  correct:

  const XMLViewer = require('react-xml-viewer').default;

  For CommonJS environments, access the default export via `.default`.
• Theme customization

  const customTheme = { tagColor: '#d43900' };
  // ... <XMLViewer theme={customTheme} />

  Theme object is passed directly to the `theme` prop for styling.

Quickstart

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.

import React from 'react';
import XMLViewer from 'react-xml-viewer';

const exampleXml = `
<bookstore>
  <book category="COOKING">
    <title lang="en">Everyday Italian</title>
    <author>Giada De Laurentiis</author>
    <year>2005</year>
    <price>30.00</price>
  </book>
  <book category="CHILDREN">
    <title lang="en">Harry Potter</title>
    <author>J.K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
  </book>
</bookstore>
`;

const customInvalidXmlMessage = (
  <div style={{ color: 'red', fontWeight: 'bold' }}>
    Oops! This XML is malformed.
  </div>
);

export function App() {
  return (
    <div style={{ fontFamily: 'monospace', padding: '20px' }}>
      <h1>My XML Document</h1>
      <XMLViewer
        xml={exampleXml}
        indentSize={4}
        collapsible={true}
        initialCollapsedDepth={1}
        showLineNumbers={true}
        invalidXml={customInvalidXmlMessage}
        theme={{
          tagColor: '#61dafb',
          textColor: '#212121',
          attributeKeyColor: '#e91e63',
          attributeValueColor: '#4caf50'
        }}
      />
    </div>
  );
}