XmlView

The XmlView widget displays XML data in a formatted, human-readable view. It automatically pretty-prints raw XML strings using configurable indentation and line separator settings.

Example configuration

This example shows the XmlView widget configured in a React application to display an XML document returned from a MarkLogic search result:

import { XmlView } from "ml-fasttrack";

function App() {

  const xmlData = `<person>
  <name>
    <givenName>Uri</givenName>
    <surname>Capponeer</surname>
  </name>
  <email classification="C" restricted="false">twhannel0@toplist.cz</email>
  <phone>803-271-2715</phone>
  <addresses>
    <address>
      <street>09537 Becker Junction</street>
      <city>Evanston</city>
      <state>IL</state>
      <postal>60208</postal>
      <country>United States</country>
    </address>
  </addresses>
</person>`;

  return (
    <div className="App">
      <XmlView
        data={xmlData}
        maxHeight="480px"
        config={{
          indentation: '  ',
          lineSeparator: '\n',
          collapseContent: true,
        }}
      />
    </div>
  );
}

export default App;

Code explanation

The configured XmlView widget includes:

• The data prop accepts any XML string. If the XML is malformed, the widget falls back to displaying the raw input string.

• The maxHeight prop controls the scrollable height of the widget. When the formatted XML exceeds this height, the container becomes vertically scrollable.

• The config prop controls formatting behavior. The default settings use two-space indentation, newline separators, and collapsed inline content.

Example rendering

The XmlView widget renders the XML string as formatted, indented text inside a scrollable container. Element names, attribute names, attribute values, and text content are each styled distinctly to improve readability.

API

config API