Buy me a coffee ☕

react-xml-viewer

Simple and configurable React component to prettify XMLs.

Live demo

Install

npm

npm install --save react-xml-viewer

yarn

yarn add react-xml-viewer

Usage

import React, { Component } from 'react';
import XMLViewer from 'react-xml-viewer';

const xml = '<hello>World</hello>';

export function App() {
  return (
    <div>
      <XMLViewer xml={xml} />
    </div>
  );
}

Props

<XMLViewer
  // A xml string to prettify.
  // Default: undefined
  xml="<hello>World</hello>"

  // The size of the indentation.
  // Default: 2
  indentSize={2}

  // When the xml is invalid, invalidXml component will be displayed.
  // Default: <div>Invalid XML!</div>
  invalidXml={<div>Invalid XML!</div>}

  // Enable collapsing or expanding tags by clicking on them.
  // Default: false
  collapsible={false}

  // When collapsible is true, this sets the level that will be started as collapsed.
  // Default: undefined
  initialCollapsedDepth={undefined}

  // Displays line numbers on the left side when set to true.
  // Default: false
  showLineNumbers={false}

  // An object to customize the theme.
  theme=
/>

Example: Changing attribute key and value color

import React, { Component } from 'react';
import XMLViewer from 'react-xml-viewer';

const xml = '<hello attr="World" />';
const customTheme = {
  attributeKeyColor: '#FF0000',
  attributeValueColor: '#000FF',
};

export function App() {
  return (
    <div>
      <XMLViewer xml={xml} theme={customTheme} />
    </div>
  );
}

License

MIT © alissonmbr

Derived Projects

A list of open-source projects using react-xml-viewer:

• panel-xml: An XML widget for interactively exploring XML in Python notebooks and Panel data apps.