diff --git a/index.html b/index.html
index de141959..c0179f3e 100644
--- a/index.html
+++ b/index.html
@@ -1,17 +1,15 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Squint</title>
-    <meta content="width=device-width, initial-scale=1" name="viewport" />
-    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
-    <meta content="utf-8" http-equiv="encoding" />
-    <script src="https://unpkg.com/node-inspect-extracted/dist/inspect.js"></script>
-    <script
-      async
-      src="https://ga.jspm.io/npm:es-module-shims@1.8.2/dist/es-module-shims.js"
-      crossorigin="anonymous"
-    ></script>
-    <script type="importmap">
+
+<head>
+  <title>Squint</title>
+  <meta content="width=device-width, initial-scale=1" name="viewport" />
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
+  <meta content="utf-8" http-equiv="encoding" />
+  <script src="https://unpkg.com/node-inspect-extracted/dist/inspect.js"></script>
+  <script async src="https://ga.jspm.io/npm:es-module-shims@1.8.2/dist/es-module-shims.js"
+    crossorigin="anonymous"></script>
+  <script type="importmap">
       {
         "imports": {
           "squint-cljs": "https://unpkg.com/squint-cljs@0.6.88/index.js",
@@ -19,12 +17,15 @@
           "squint-cljs/string.js": "https://unpkg.com/squint-cljs@0.6.88/string.js",
           "squint-cljs/src/squint/string.js": "https://unpkg.com/squint-cljs@0.6.88/src/squint/string.js",
           "squint-cljs/src/squint/set.js": "https://unpkg.com/squint-cljs@0.6.88/src/squint/set.js",
-          "@codemirror/language": "https://ga.jspm.io/npm:@codemirror/language@6.9.2/dist/index.js",
-          "@codemirror/state": "https://ga.jspm.io/npm:@codemirror/state@6.3.1/dist/index.js",
-          "@codemirror/view": "https://ga.jspm.io/npm:@codemirror/view@6.21.4/dist/index.js",
+          "@codemirror/language": "https://ga.jspm.io/npm:@codemirror/language@6.10.0/dist/index.js",
+          "@codemirror/lang-javascript": "https://ga.jspm.io/npm:@codemirror/lang-javascript@6.2.1/dist/index.js",
+          "@codemirror/state": "https://ga.jspm.io/npm:@codemirror/state@6.4.0/dist/index.js",
+          "@codemirror/view": "https://ga.jspm.io/npm:@codemirror/view@6.23.0/dist/index.js",
           "@codemirror/commands": "https://ga.jspm.io/npm:@codemirror/commands@6.3.0/dist/index.js",
+          "@codemirror/autocomplete": "https://ga.jspm.io/npm:@codemirror/autocomplete@6.11.1/dist/index.js",
           "@lezer/highlight": "https://ga.jspm.io/npm:@lezer/highlight@1.1.6/dist/index.js",
-          "@lezer/common": "https://ga.jspm.io/npm:@lezer/common@1.1.0/dist/index.js",
+          "@lezer/common": "https://ga.jspm.io/npm:@lezer/common@1.2.0/dist/index.js",
+          "@lezer/javascript": "https://ga.jspm.io/npm:@lezer/javascript@1.4.12/dist/index.js",
           "@nextjournal/lezer-clojure": "https://ga.jspm.io/npm:@nextjournal/lezer-clojure@1.0.0/dist/index.es.js",
           "@nextjournal/clojure-mode": "https://unpkg.com/@nextjournal/clojure-mode@0.3.1/dist/nextjournal/clojure_mode.mjs",
           "@nextjournal/clojure-mode/extensions/eval-region": "https://unpkg.com/@nextjournal/clojure-mode@0.3.1/dist/nextjournal/clojure_mode/extensions/eval_region.mjs",
@@ -39,203 +40,235 @@
         }
       }
     </script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css" />
-    <style>
-      :root {
-        --teal-color: #31afd0;
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css" />
+  <style>
+    :root {
+      --teal-color: #31afd0;
+    }
+
+    body {
+      max-width: inherit;
+    }
+
+    #main {
+      display: flex;
+      flex-direction: column;
+      max-height: 90dvh;
+
+      @media screen and (min-width: 768px) {
+        overflow: auto;
+        flex-direction: row;
       }
-
-      body {
-        max-width: inherit;
+    }
+
+    #editor {
+      width: 100%;
+      max-height: 90dvh;
+      max-width: calc(100dvw - 20px);
+      border: 1px solid grey;
+      border-radius: 10px;
+      overflow: auto;
+
+      @media screen and (min-width: 768px) {
+        margin-bottom: 10px;
+        width: 50%;
       }
-
-      #main {
-        display: flex;
-        flex-direction: column;
-        max-height: 90dvh;
-
-        @media screen and (min-width: 768px) {
-          overflow: auto;
-          flex-direction: row;
-        }
+    }
+
+    #sidebar {
+      width: 100%;
+      max-height: 90dvh;
+      max-width: calc(100dvw - 40px);
+      border: 1px solid grey;
+      border-radius: 10px;
+      padding: 10px;
+      margin-top: 10px;
+      overflow: auto;
+
+      @media screen and (min-width: 768px) {
+        margin-top: 0px;
+        margin-left: 10px;
+        margin-bottom: 10px;
+        width: 50%;
       }
+    }
+  </style>
+
+  <script type="module">
+    import { default_extensions, complete_keymap } from '@nextjournal/clojure-mode';
+    import { history, historyKeymap } from '@codemirror/commands';
+    import * as eval_region from '@nextjournal/clojure-mode/extensions/eval-region';
+    import { EditorView, drawSelection, keymap } from '@codemirror/view';
+    import { EditorState } from '@codemirror/state';
+    import { syntaxHighlighting, defaultHighlightStyle, foldGutter } from '@codemirror/language';
+    import { javascript } from "@codemirror/lang-javascript";
+    import * as prettier from "https://unpkg.com/prettier@3.1.1/standalone.mjs";
+    import prettierPluginJS from "https://unpkg.com/prettier@3.1.1/plugins/estree.mjs";
+    import prettierPluginBabel from "https://unpkg.com/prettier@3.1.1/plugins/babel.mjs";
+    let url = new URL(window.location.href);
+
+    let theme = EditorView.theme({
+      '.cm-content': {
+        whitespace: 'pre-wrap',
+        passing: '10px 0',
+        flex: '1 1 0',
+      },
+
+      '&.cm-focused': { outline: '0 !important' },
+      '.cm-line': {
+        padding: '0 9px',
+        'line-height': '1.6',
+        'font-size': '16px',
+        'font-family': 'var(--code-font)',
+      },
+      '.cm-matchingBracket': {
+        'border-bottom': '1px solid var(--teal-color)',
+        color: 'inherit',
+      },
+      '.cm-gutters': {
+        background: 'transparent',
+        border: 'none',
+      },
+      '.cm-gutterElement': { 'margin-left': '5px' },
+      // only show cursor when focused
+      '.cm-cursor': { visibility: 'hidden' },
+      '&.cm-focused .cm-cursor': { visibility: 'visible' },
+    });
+
+    let squintExtension = (opts) => {
+      return keymap.of([
+        { key: 'Alt-Enter', run: evalCell },
+        {
+          key: opts.modifier + '-Enter',
+          run: evalAtCursor,
+          shift: evalToplevel,
+        },
+      ]);
+    };
 
-      #editor {
-        width: 100%;
-        max-height: 90dvh;
-        max-width: calc(100dvw - 20px);
-        border: 1px solid grey;
-        border-radius: 10px;
-        overflow: auto;
+    let urlParams = new URLSearchParams(window.location.search);
+    var repl = urlParams.get('repl') !== 'false';
 
-        @media screen and (min-width: 768px) {
-          margin-bottom: 10px;
-          width: 50%;
-        }
+    class LazyIterable extends Array {
+      constructor(arr) {
+        super(arr);
       }
+    }
 
-      #sidebar {
-        width: 100%;
-        max-height: 90dvh;
-        max-width: calc(100dvw - 40px);
-        border: 1px solid grey;
-        border-radius: 10px;
-        padding: 10px;
-        margin-top: 10px;
-        overflow: auto;
+    let compilerState = null;
 
-        @media screen and (min-width: 768px) {
-          margin-top: 0px;
-          margin-left: 10px;
-          margin-bottom: 10px;
-          width: 50%;
+    let jsEditor = null;
+
+    async function JSEditor(js) {
+      js = await prettier.format(js, {parser: "babel", plugins: [prettierPluginJS, prettierPluginBabel]});
+      js = js.trim();
+      const elt = document.querySelector('#compiledCode');
+      const fontSizeTheme = EditorView.theme({
+        $: {
+          fontSize: "5pt"
         }
+      });
+      let extensions = [javascript({}).language, fontSizeTheme, foldGutter(), syntaxHighlighting(defaultHighlightStyle),
+      EditorView.editable.of(false)];
+      let state = EditorState.create({
+        doc: js,
+        extensions: extensions,
+      });
+      if (jsEditor) {
+        jsEditor.destroy();
       }
-    </style>
-
-    <script type="module">
-      import { default_extensions, complete_keymap } from '@nextjournal/clojure-mode';
-      import { history, historyKeymap } from '@codemirror/commands';
-      import * as eval_region from '@nextjournal/clojure-mode/extensions/eval-region';
-      import { EditorView, drawSelection, keymap } from '@codemirror/view';
-      import { EditorState } from '@codemirror/state';
-      import { syntaxHighlighting, defaultHighlightStyle, foldGutter } from '@codemirror/language';
-      let url = new URL(window.location.href);
-
-      let theme = EditorView.theme({
-        '.cm-content': {
-          whitespace: 'pre-wrap',
-          passing: '10px 0',
-          flex: '1 1 0',
-        },
-
-        '&.cm-focused': { outline: '0 !important' },
-        '.cm-line': {
-          padding: '0 9px',
-          'line-height': '1.6',
-          'font-size': '16px',
-          'font-family': 'var(--code-font)',
-        },
-        '.cm-matchingBracket': {
-          'border-bottom': '1px solid var(--teal-color)',
-          color: 'inherit',
-        },
-        '.cm-gutters': {
-          background: 'transparent',
-          border: 'none',
-        },
-        '.cm-gutterElement': { 'margin-left': '5px' },
-        // only show cursor when focused
-        '.cm-cursor': { visibility: 'hidden' },
-        '&.cm-focused .cm-cursor': { visibility: 'visible' },
+      let editor = new EditorView({
+        state: state,
+        parent: elt,
+        extensions: extensions,
       });
-
-      let squintExtension = (opts) => {
-        return keymap.of([
-          { key: 'Alt-Enter', run: evalCell },
-          {
-            key: opts.modifier + '-Enter',
-            run: evalAtCursor,
-            shift: evalToplevel,
-          },
-        ]);
-      };
-
-      let urlParams = new URLSearchParams(window.location.search);
-        var repl = urlParams.get('repl') !== 'false';
-
-        class LazyIterable extends Array {
-        constructor(arr) {
-        super(arr);
-        }
+      jsEditor = editor;
+    }
+
+    let evalCode = async (code) => {
+      try {
+        let importSource = url.searchParams.get('jsx.import-source') || 'react';
+        let opts = { repl: repl, 'elide-exports': repl, context: repl ? 'return' : 'statement', "jsx-runtime": { "import-source": importSource, development: true } };
+        compilerState = compileStringEx(`(do ${code}\n)`, opts, compilerState);
+        let js = compilerState.javascript;
+        if (dev) {
+          js = js.replaceAll("'squint-cljs/", "'http://" + window.location.host + '/');
         }
-
-      let compilerState = null;
-        let evalCode = async (code) => {
-        try {
-          let importSource = url.searchParams.get('jsx.import-source') || 'react';
-          let opts = { repl: repl, 'elide-exports': repl, context: repl ? 'return' : 'statement', "jsx-runtime": {"import-source": importSource, development: true} };
-          compilerState = compileStringEx(`(do ${code}\n)`, opts, compilerState);
-          let js = compilerState.javascript;
-          if (dev) {
-            js = js.replaceAll("'squint-cljs/", "'http://" + window.location.host + '/');
+        JSEditor(js);
+        if (!repl) {
+          const encodedJs = encodeURIComponent(js);
+          const dataUri =
+            'data:text/javascript;charset=utf-8;eval=' + Date.now() + ',' + encodedJs;
+          let result = await import(dataUri);
+        } else {
+          let result = await eval(`(async function() { ${js} })()`);
+          if (result && result?.constructor?.name === 'LazyIterable') {
+            let stdlib = (await import("squint-cljs/core.js"));
+            let take_fn = stdlib.take;
+            let concat_fn = stdlib.concat;
+            let end = {};
+            result = [...take_fn(10, concat_fn(result, [end]))];
+            let isEnd = result[result.length - 1] !== end;
+            if (isEnd) result.push('...')
+            else result.pop();
+            result = new LazyIterable(result);
           }
-          document.querySelector('#compiledCode').innerText = js;
-          if (!repl) {
-            const encodedJs = encodeURIComponent(js);
-            const dataUri =
-              'data:text/javascript;charset=utf-8;eval=' + Date.now() + ',' + encodedJs;
-            let result = await import(dataUri);
-          } else {
-            let result = await eval(`(async function() { ${js} })()`);
-        if (result && result?.constructor?.name === 'LazyIterable') {
-        let stdlib = (await import("squint-cljs/core.js"));
-        let take_fn = stdlib.take;
-        let concat_fn = stdlib.concat;
-        console.log(take_fn);
-        let end = {};
-        result = [...take_fn(10, concat_fn(result, [end]))];
-        let isEnd = result[result.length - 1] !== end;
-        if (isEnd) result.push('...')
-        else result.pop();
-        result = new LazyIterable(result);
-        }
-            document.querySelector('#result').innerText = util.inspect(result);
-            if (docChanged) {
-              url.searchParams.delete('src');
-              window.history.replaceState(null, null, url);
-              localStorage.setItem('document', editor.state.doc.toString());
-              docChanged = false;
-            }
+          document.querySelector('#result').innerText = util.inspect(result);
+          if (docChanged) {
+            url.searchParams.delete('src');
+            window.history.replaceState(null, null, url);
+            localStorage.setItem('document', editor.state.doc.toString());
+            docChanged = false;
           }
-        } catch (e) {
-          document.querySelector('#result').innerText =
-            e.message + '\n\n' + decodeURIComponent(util.inspect(e));
-          console.error(e);
         }
-      };
-
-      let evalCell = (opts) => {
-        let js = opts.state.doc.toString();
-        evalCode(js);
-        return true;
-      };
-
-      let evalAtCursor = (opts) => {
-        if (!repl) return;
-        let js = eval_region.cursor_node_string(opts.state).toString();
-        evalCode(js);
-        return true;
-      };
-
-      let docChanged = false;
-
-      let evalToplevel = (js) => {
-        if (!repl) return;
-        return true;
-      };
-      let updateExt = EditorView.updateListener.of((update) => {
-        if (update.docChanged) docChanged = true;
-        });
-      const platform = navigator.platform;
-      const isMac = platform.startsWith('Mac') || platform.startsWith('iP');
-      let modifier = localStorage.getItem("editor.modifier") || (isMac ? 'Meta' : 'Ctrl');
-      if (!isMac || modifier === 'Ctrl') document.getElementById('modifierDesc').innerText = 'Ctrl'
-      let extensions = [
-        history(),
-        theme,
-        foldGutter(),
-        syntaxHighlighting(defaultHighlightStyle),
-        drawSelection(),
-        keymap.of(complete_keymap),
-        keymap.of(historyKeymap),
-        squintExtension({ modifier: modifier }),
-        eval_region.extension({ modifier: modifier }),
-        updateExt,
-        ...default_extensions,
-      ];
-
-      let doc = `
+      } catch (e) {
+        document.querySelector('#result').innerText =
+          e.message + '\n\n' + decodeURIComponent(util.inspect(e));
+        console.error(e);
+      }
+    };
+
+    let evalCell = (opts) => {
+      let js = opts.state.doc.toString();
+      evalCode(js);
+      return true;
+    };
+
+    let evalAtCursor = (opts) => {
+      if (!repl) return;
+      let js = eval_region.cursor_node_string(opts.state).toString();
+      evalCode(js);
+      return true;
+    };
+
+    let docChanged = false;
+
+    let evalToplevel = (js) => {
+      if (!repl) return;
+      return true;
+    };
+    let updateExt = EditorView.updateListener.of((update) => {
+      if (update.docChanged) docChanged = true;
+    });
+    const platform = navigator.platform;
+    const isMac = platform.startsWith('Mac') || platform.startsWith('iP');
+    let modifier = localStorage.getItem("editor.modifier") || (isMac ? 'Meta' : 'Ctrl');
+    if (!isMac || modifier === 'Ctrl') document.getElementById('modifierDesc').innerText = 'Ctrl'
+    let extensions = [
+      history(),
+      theme,
+      foldGutter(),
+      syntaxHighlighting(defaultHighlightStyle),
+      drawSelection(),
+      keymap.of(complete_keymap),
+      keymap.of(historyKeymap),
+      squintExtension({ modifier: modifier }),
+      eval_region.extension({ modifier: modifier }),
+      updateExt,
+      ...default_extensions,
+    ];
+
+    let doc = `
       (comment
   (fizz-buzz 1)
   (fizz-buzz 3)
@@ -258,7 +291,7 @@
   (+ 1 2 3))
 `.trim();
 
-      const aocDoc = `
+    const aocDoc = `
 ;; Helper functions:
 ;; (fetch-input year day) - get AOC input
 ;; (append str) - append str to DOM
@@ -290,116 +323,120 @@
 
 (time (part-1))
 #_(time (part-2))`.trim();
-      const aocBoilerplateUrl = 'https://gist.githubusercontent.com/borkdude/cf94b492d948f7f418aa81ba54f428ff/raw/a6e9992b079e20e21d753e8c75a7353c5908b225/aoc_ui.cljs';
-
-      let boilerplate = urlParams.get('boilerplate');
-      let boilerplateSrc;
-      if (boilerplate) {
-        boilerplateSrc = await fetch(boilerplate).then((p) => p.text());
-      }
-      let src = urlParams.get('src');
-      if (src) {
-        if (/http(s)?:\/\/.*/.test(src)) {
-          src = await fetch(src).then((p) => p.text());
-        } else {
-          src = atob(src);
-        }
-        doc = src;
+    const aocBoilerplateUrl = 'https://gist.githubusercontent.com/borkdude/cf94b492d948f7f418aa81ba54f428ff/raw/a6e9992b079e20e21d753e8c75a7353c5908b225/aoc_ui.cljs';
+
+    let boilerplate = urlParams.get('boilerplate');
+    let boilerplateSrc;
+    if (boilerplate) {
+      boilerplateSrc = await fetch(boilerplate).then((p) => p.text());
+    }
+    let src = urlParams.get('src');
+    if (src) {
+      if (/http(s)?:\/\/.*/.test(src)) {
+        src = await fetch(src).then((p) => p.text());
       } else {
-        doc = localStorage.getItem('document') || doc;
+        src = atob(src);
       }
-      let state = EditorState.create({
-        doc: doc,
-        extensions: extensions,
-      });
-      let editorElt = document.querySelector('#editor');
-      let editor = new EditorView({
-        state: state,
-        parent: editorElt,
-        extensions: extensions,
-      });
-      globalThis.editor = editor;
-      var dev = JSON.parse(urlParams.get('dev')) ?? location.hostname === 'localhost';
-
-      var squintUrl;
-      if (dev) {
-        console.log('Loading development squint.js');
-        squintUrl = '/index.js';
+      doc = src;
+    } else {
+      doc = localStorage.getItem('document') || doc;
+    }
+    let state = EditorState.create({
+      doc: doc,
+      extensions: extensions,
+    });
+    let editorElt = document.querySelector('#editor');
+    let editor = new EditorView({
+      state: state,
+      parent: editorElt,
+      extensions: extensions,
+    });
+    globalThis.editor = editor;
+    var dev = JSON.parse(urlParams.get('dev')) ?? location.hostname === 'localhost';
+
+    var squintUrl;
+    if (dev) {
+      console.log('Loading development squint.js');
+      squintUrl = '/index.js';
+    } else {
+      squintUrl = 'squint-cljs';
+    }
+    var squint = await import(squintUrl);
+    var compileStringEx = squint.compileStringEx;
+    window.compile = () => {
+      let code = editor.state.doc.toString();
+      code = (boilerplateSrc || '') + '\n\n' + code;
+      evalCode(code);
+    };
+    window.share = () => {
+      let code = editor.state.doc.toString().trim();
+      code = btoa(code);
+      url.searchParams.set('src', code);
+      window.location = url;
+    };
+    window.blankAOC = () => {
+      const code = btoa(aocDoc);
+      const url = new URL(window.location);
+      url.searchParams.set('src', code);
+      url.searchParams.set('boilerplate', aocBoilerplateUrl);
+      url.searchParams.set('repl', true);
+
+      window.location = url;
+    }
+
+    window.changeREPL = (target) => {
+      document.getElementById('result').innerText = '';
+      if (target.checked) {
+        repl = true;
+        compile();
       } else {
-        squintUrl = 'squint-cljs';
-      }
-      var squint = await import(squintUrl);
-      var compileStringEx = squint.compileStringEx;
-      window.compile = () => {
-        let code = editor.state.doc.toString();
-        code = (boilerplateSrc || '') + '\n\n' + code;
-        evalCode(code);
-      };
-      window.share = () => {
-        let code = editor.state.doc.toString().trim();
-        code = btoa(code);
-        url.searchParams.set('src', code);
-        window.location = url;
-      };
-      window.blankAOC = () => {
-        const code = btoa(aocDoc);
-        const url = new URL(window.location);
-        url.searchParams.set('src', code);
-        url.searchParams.set('boilerplate', aocBoilerplateUrl);
-        url.searchParams.set('repl', true);
-
-        window.location = url;
+        repl = false;
+        compile();
       }
-
-      window.changeREPL = (target) => {
-        document.getElementById('result').innerText = '';
-        if (target.checked) {
-          repl = true;
-          compile();
-        } else {
-          repl = false;
-          compile();
-        }
-        url.searchParams.set('repl', repl);
-        window.history.replaceState(null, null, url);
-      };
-      if (repl) {
-        document.getElementById('replCheckBox').checked = true;
-      }
-      compile();
-    </script>
-  </head>
-
-  <body>
-    <div id="main">
-      <div style="position: absolute; right: 0px; top: 0px; margin: 2px">
-      <a href="https://gitHub.com/squint-cljs/squint"><img src="https://img.shields.io/github/stars/squint-cljs/squint.svg?style=social&label=Star"></a></div>
-      <div id="editor">
-      </div>
-      <div id="sidebar">
-              <button onClick="compile()">
+      url.searchParams.set('repl', repl);
+      window.history.replaceState(null, null, url);
+    };
+    if (repl) {
+      document.getElementById('replCheckBox').checked = true;
+    }
+    compile();
+  </script>
+</head>
+
+<body>
+  <div id="main">
+    <div style="position: absolute; right: 0px; top: 0px; margin: 2px">
+      <a href="https://gitHub.com/squint-cljs/squint"><img
+          src="https://img.shields.io/github/stars/squint-cljs/squint.svg?style=social&label=Star"></a>
+    </div>
+    <div id="editor">
+    </div>
+    <div id="sidebar">
+      <button onClick="compile()">
         Compile!
-              </button>
-              <button onClick="share()" title="When sharing, the window URL will be updated to encode the code in the text editor. Copy it and share it with your friends!">
-                Share!
-              </button>
-                              <button style="margin-bottom: 10px;" onClick="blankAOC()">
-          Create blank AOC Playground!
-        </button>
-
-              <br>
-              <label>REPL-mode
-                <input type="checkbox" id="replCheckBox" name="repl" onChange="changeREPL(this)" />
-              </label>
-              <br>
-              In REPL-mode you can evaluate individual expression with <span id="modifierDesc">⌘</span> + Enter. The result will appear below.
-              To evaluate the whole program at once, use Alt + Enter;
-              <pre><code style="white-space: pre-wrap;max-width:80%;" id="result"></code>
-              </pre>
-              Compiled code:
-              <pre><code style="white-space: pre-wrap;max-width:80%;" id="compiledCode"></code>
+      </button>
+      <button onClick="share()"
+        title="When sharing, the window URL will be updated to encode the code in the text editor. Copy it and share it with your friends!">
+        Share!
+      </button>
+      <button style="margin-bottom: 10px;" onClick="blankAOC()">
+        Create blank AOC Playground!
+      </button>
+
+      <br>
+      <label>REPL-mode
+        <input type="checkbox" id="replCheckBox" name="repl" onChange="changeREPL(this)" />
+      </label>
+      <br>
+      In REPL-mode you can evaluate individual expression with <span id="modifierDesc">⌘</span> + Enter. The result will
+      appear below.
+      To evaluate the whole program at once, use Alt + Enter;
+      <pre><code style="white-space: pre-wrap;max-width:80%;" id="result"></code>
               </pre>
-      </div>
+      Compiled code:
+      <div id="compiledCode"></div>
     </div>
-  </body>
-</html>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
