JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XmlBeautify.js example</title>
    <style>

        textarea.box {
            flex-shrink: 0;
            resize: none;
            width: 300px;
            height: 100px;
        }

        div {
            display: flex;
            align-items: center;
        }

        div.column {
            display: flex;
            flex-direction: column;;
        }

        button {
            margin: 20px;
            width: 120px;
            height: 30px;
        }

    </style>

</head>
<body>

<div class="column">
    xml-beautify demo <br/>
</div>

<div class="column">
    <span>source XML</span>
    <textarea id="text-input" class="box"></textarea>
</div>


<div class="column">
    <button id="button-run">beautify XML</button>
</div>

<div class="column">
    <span>beautified XML</span>
    <textarea id="text-output" class="box" readonly></textarea>
</div>
<script src="https://riversun.github.io/xml-beautify/XmlBeautify.js"/>

</body>
</html>

JavaScript

var xml =
        '<?xml version="1.0" encoding="utf-8"?><example version="2.0">\n' +
        '  <head><title>Original aTitle</title></head>\n' +
        '  <body info="none" ></body>\n' +
        '</example>';

    var textInput = document.querySelector("#text-input");
    var textOutput = document.querySelector("#text-output");
    var buttonRun = document.querySelector("#button-run");

    textInput.textContent = xml;

    var funcRun = function (evt) {

        var resultXmlText = new XmlBeautify().beautify(textInput.value, {
            indent: "  ",  //indent pattern like white spaces
            useSelfClosingElement: true //true:use self-closing element when empty element.
        });

        textOutput.textContent = resultXmlText

    }
    buttonRun.addEventListener("click", funcRun);