The Perl Advent Calendar needs more articles for 2022. Submit your idea today!
    <title>[% title | html %]</title>
        .plain {
            color: gray;
        .color {
            color: green;
            border: red dotted 1px;
        .error {
            color: red;
    <script lang="javascript" src="[% root | html %]/main.js">
    <script lang="javascript">
        "use strict";
        function upd() {
            document.getElementById("reply").innerHTML = 'Waiting...';
            document.getElementById("raw_reply").innerHTML = 'Waiting...';

            var form = document.forms['request'];
            var data = {
                regex:  form.regex.value,
                sample: form.sample.value

            do_request("[% root | html %]/backend", data,
                function(text) {
                    document.getElementById("raw_reply").innerHTML = text;
                    document.getElementById("reply").innerHTML =
                        colorize_nested( JSON.parse( text ), 'plain', 'color' );
                function(err) {
                    document.getElementById("reply").innerHTML =
                        '<span class="error">Error '+err+'</span>'
            return false;
<h1>[% title | html %]</h1>
<h2>Enter a regular expression and several example strings below</h2>
<form name="request" onSubmit="return upd()" onLoad="return upd()">
    Regex: <input name="regex" onChange="return upd()">
    <input type="submit" value="Run"><br>
    <textarea name="sample" cols=80 rows=10 onChange="return upd()"></textarea>
<div id="reply">
<h2>Raw reply</h2>
<tt id="raw_reply">