Registry / web-framework / react-xml-viewer

react-xml-viewer

library3.0.4jsnpmunverified

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.

web-framework serialization

npm install react-xml-viewer

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-XML-VIEWER

react-xml-viewer

web-frameworkjavascriptv3.0.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

XMLViewer

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

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

XMLViewer is a default export, not a named export.

XMLViewer (CommonJS)

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

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

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.

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> ); }

Debug

Known issues

breakingVersion 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).

affects: >=2.0.0

breakingThe `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`.

affects: <2.0.4

gotchaThe 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.

affects: >=1.0.0

breakingA 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.

affects: <3.0.2

gotchaWhile 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.

affects: <2.0.5

Errors

Common errors & fixes

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

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')

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'?

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`.

Upgrade

Version history

3.0.4latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for any React component.

react-domrequiredPeer dependency required for rendering React components to the DOM.

Agent activity

12 hits · last 30 days

node

Resources

githubhttps://github.com/alissonmbr/react-xml-viewer ↗

packagehttps://www.npmjs.com/package/react-xml-viewer ↗