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

github ↗package ↗

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

XMLViewer is a default export, not a named export.

import XMLViewer from 'react-xml-viewer';

For CommonJS environments, access the default export via `.default`.

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

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

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

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 footguns

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.

breakingThe `initialCollapsedDepth` prop had a typo as `initalCollapsedDepth` in versions prior to 2.0.4. Using the misspelled prop would have no effect.

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.

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.

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.

Upgrade

Version history

Breaking-change detection hasn't run for this library yet.

Audit

Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity

0 hits · last 30 days

No traffic data recorded yet.

Resources

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

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