{"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-xml-viewer"],"cli":null},"imports":["import XMLViewer from 'react-xml-viewer';","const XMLViewer = require('react-xml-viewer').default;","const customTheme = { tagColor: '#d43900' };\n// ... <XMLViewer theme={customTheme} />"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}