diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9554c717..0be52447 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ Unreleased
 ### Breaking changes
 
 ### New features
+- [#509](https://github.com/peggyjs/peggy/pull/509) Add and implement ES6 export button
 
 ### Bug fixes
 - [#507](https://github.com/peggyjs/peggy/pull/507) Remove stray semicolon in CSS
diff --git a/docs/css/content.css b/docs/css/content.css
index 0bc4eb7d..a4848fb2 100644
--- a/docs/css/content.css
+++ b/docs/css/content.css
@@ -139,7 +139,7 @@
 #content #settings label { padding-right: 1em; }
 #content #parser-var { width: 15em; }
 #content #options { padding-top: 1em; }
-#content #parser-download {
+#content .download-button {
   float: right;
   width: 10em;
   margin-top: 2em;
@@ -151,8 +151,11 @@
   text-align: center; text-decoration: none;
   color: #e0ffe0; background-color: #499149;
 }
-#content #parser-download:hover { background-color: #006000; }
-#content #parser-download.disabled { color: #e0e0e0; background-color: gray; }
+#content .download-button:not(:first-of-type) {
+  margin-right: .5rem;
+}
+#content .download-button:hover { background-color: #006000; }
+#content .download-button.disabled { color: #e0e0e0; background-color: gray; }
 
 
 #output {
diff --git a/docs/js/online.js b/docs/js/online.js
index 6d09c2f4..486b0ca0 100644
--- a/docs/js/online.js
+++ b/docs/js/online.js
@@ -94,6 +94,7 @@ $(document).ready(function() {
     $("#parser-var").attr("disabled", "disabled");
     $("#option-cache").attr("disabled", "disabled");
     $("#parser-download").attr("disabled", "disabled");
+    $("#parser-download-es6").attr("disabled", "disabled");
 
     try {
       var timeBefore = (new Date).getTime();
@@ -134,6 +135,7 @@ $(document).ready(function() {
       $("#parser-var").removeAttr("disabled");
       $("#option-cache").removeAttr("disabled");
       $("#parser-download").removeAttr("disabled");
+      $("#parser-download-es6").removeAttr("disabled");
 
       var result = true;
     } catch (e) {
@@ -230,6 +232,23 @@ $(document).ready(function() {
 
     });
 
+  $( "#parser-download-es6" )
+    .click(function(){
+      try { // If this button was enabled, the source was already validated by 'rebuildGrammar'
+        const esSource = peggy.generate(editor.getValue(), {
+          cache: $("#option-cache").is(":checked"),
+          output: "source",
+          format: 'es'
+        })
+
+        var blob = new Blob([esSource], {type: "application/javascript"});
+        window.saveAs(blob, "parser.mjs");
+      } catch (e) {
+        console.error('Unable to save parser', e);
+      }
+
+    });
+
   doLayout();
   $(window).resize(doLayout);
 
diff --git a/docs/online.html b/docs/online.html
index 5764f3de..9708d283 100644
--- a/docs/online.html
+++ b/docs/online.html
@@ -121,10 +121,11 @@ <h2 class="suggestion">
         </tr>
         <tr>
           <td class="content-height">
-            <input type="submit" id="parser-download" value="Download parser" disabled>
+              <input type="submit" id="parser-download-es6" class="download-button" value="Download ES6 parser" disabled>
+              <input type="submit" id="parser-download" class="download-button" value="Download CJS parser" disabled>
             <div id="settings">
-              <label for="parser-var">Parser variable:</label>
-              <input type="text" id="parser-var" value="module.exports" disabled>
+              <label for="parser-var">Parser variable <span style="font-size: .7rem">For CommonJS</span>:</label>
+              <input type="text" id="parser-var" value="module.exports" placeholder="module.exports" disabled>
               <div id="options">
                 <input type="checkbox" id="option-cache" disabled>
                 <label for="option-cache">Use results cache</label>