View on GitHub

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

xml (string)

A xml string to prettify.
Default: undefined
Example: <hello>World</hello>

indentSize (number)

The size of the indentation.
Default: 2

invalidXml (JSX.Element)

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

collapsible (boolean)

Allow collapse/expand tags by click on them. When tag is collapsed its content and attributes are hidden.
Default: false

initialCollapsedDepth (number)

When the collapsible is true, this set the level that will be started as collapsed. For example, if you want to everything starts as collapsed, set 0.
Default: undefined

theme (object)

An object to customize the default theme.

Key	Type	Default	Description
attributeKeyColor	color	#2a7ab0	Set the attribute key color (`<tag attribute-key="hello" />`)
attributeValueColor	color	#008000	Set the attribute value color ( `<tag attr="Attribute value">`)
cdataColor	color	#1D781D	Set the cdata element color (`<![CDATA[some stuff]]>`)
commentColor	color	#aaa	Set the comment color (`<!-- this is a comment -->`)
fontFamily	font	monospace	Set the font family
separatorColor	color	#333	Set the separators colors (`<, >, </, />, =, <?, ?>`)
tagColor	color	#d43900	Set the tag name color (`<tag-name />`)
textColor	color	#333	Set the text color (`<tag>Text</tag>`)

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