index.html

<!DOCTYPE html>
<html>
    <head>
        <title>KaTeX Demo Editor</title>
        <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@0.13.0/dist/katex.min.css" integrity="sha384-t5CR+zwDAROtph0PXGte6ia8heboACF9R5l/DiY+WZ3P2lxNgvJkQk5n7GPvLMYw" crossorigin="anonymous">
        <script src="//cdn.jsdelivr.net/npm/katex@0.13.0/dist/katex.min.js" integrity="sha384-FaFLTlohFghEIZkw6VGwmf9ISTubWAVYW8tG8+w2LAIftJEULZABrF9PPFv+tVkH" crossorigin="anonymous"></script>
        <script src="//cdn.jsdelivr.net/npm/katex@0.13.0/dist/contrib/auto-render.min.js" integrity="sha384-bHBqxz8fokvgoJ/sc17HODNxa42TlaEhB+w8ZJXTc2nZf1VgEaFZeZvT4Mznfz0v" crossorigin="anonymous"></script>
    </head>
    <body>
        <label>Enter KaTeX here:</label> <br/>
        <textarea id="katex-editor" rows="6" cols="50">\(x^2+y^2=1\)</textarea>  <br/>
        <button onclick="renderKaTeX()">Render!</button> <br/>
        <br/>

        <div id="katex-output"></div>

        <script>
            function renderKaTeX() {
                var katexOutputDiv = document.getElementById("katex-output");
                katexOutputDiv.innerHTML = document.getElementById("katex-editor").value.replaceAll("\n", "<br/>");

                renderMathInElement(katexOutputDiv);
            }
        </script>
    </body>
</html>