hterm.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TerminalFX</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #terminal {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="terminal"></div>
<script src="hterm_all.js"></script>
<script>

    function updatePrefs(prefs) {
        var prefsObject = JSON.parse(prefs);
        for (var key in prefsObject) {
            var value = prefsObject[key];
            if (window.t) {
                t.getPrefs().set(key, value);
            }
        }
    }

    function startTerminal() {
        hterm.defaultStorage = new lib.Storage.Memory();
        hterm.copySelectionToClipboard = function (document) {
            app.copy(document.getSelection().toString());
        };
        hterm.msg = function (name, args = [], string) {
            return string;
        };
        window.t = new hterm.Terminal("myterm");
        // t.getPrefs().set("send-encoding", "raw");
        // t.getPrefs().set("receive-encoding", "utf-8");
        //    t.getPrefs().set("use-default-window-copy", true);
        //    t.getPrefs().set("clear-selection-after-copy", true);
        //    t.getPrefs().set("copy-on-select", false);
        //    t.getPrefs().set("ctrl-c-copy", true);
        //    t.getPrefs().set("ctrl-v-paste", true);
        //    t.getPrefs().set("cursor-color", "black");
        //    t.getPrefs().set("background-color", "white");
        //    t.getPrefs().set("font-size", 12);
        //    t.getPrefs().set("foreground-color", "black");
        //    t.getPrefs().set("cursor-blink", false);
        //    t.getPrefs().set("scrollbar-visible", true);
        //    t.getPrefs().set("scroll-wheel-move-multiplier", 0.1);
        //    t.getPrefs().set("user-css", "/afx/resource/?p=css/hterm.css");
        //    t.getPrefs().set("enable-clipboard-notice",true);

        updatePrefs(app.getPrefs());

        t.onTerminalReady = function () {

            app.onTerminalInit();

            var io = t.io.push();

            io.onVTKeystroke = function (str) {
                app.command(str);
            };

            io.sendString = io.onVTKeystroke;

            io.onTerminalResize = function (columns, rows) {
                app.resizeTerminal(columns, rows);
            };

            t.installKeyboard();
            app.onTerminalReady();

        };

        t.decorate(document.querySelector('#terminal'));
    }

    document.addEventListener("DOMContentLoaded", function (event) {
        lib.init(startTerminal);
    });

</script>
</body>
</html>