static/editor.html

<html>
  <head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css"></link>
    <style>
      #editor {
        height: 300px;
      }
    </style>
  </head>
  <body style="padding:60px;">
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Editor</h3>
            </div>
            <div class="panel-body">
              <div id="editor">function foo(items) {
                  var x = "All this is syntax highlighted";
                  return x;
              }</div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="bundle.js"></script>
    <script>
      var editor = ace.edit("editor");
      editor.$blockScrolling = Infinity
      editor.setTheme("ace/theme/monokai");
      editor.getSession().setMode("ace/mode/javascript");
      var grtcID = GRTC.queryParameter(window.location.search);
      if (grtcID.length == 0) {
        var grtcID = GRTC.uuid();
        window.history.pushState('', '', '?collaborate=' + grtcID);
        var grtc = new GRTC(grtcID, window.location.origin,  true);
      } else {
        var grtc = new GRTC(grtcID, window.location.origin, false);
      }
      var inserting = false;
      grtc.on('peerConnected', function(){
        console.log('secret acknowledged confirmed');
        editor.getSession().on('change', function(e) {
          window.x = e;
          if(!inserting) {
            grtc.send(e);
            console.log('changed', e);
          }
      });
      });

      grtc.on('peerConnected', function(l) {
        grtc.on('peerEncryptedData', function(d){
          console.log(d);
        });
        grtc.on('peerData', function(d){
          console.log(d);
          inserting = true;
          editor.getSession().getDocument().applyDeltas([d]);
          inserting = false;
        });
      });
    </script>
  </body>
</html>