diff --git a/.gitignore b/.gitignore
index 8bb27af..25feee7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,7 +24,11 @@ dist/
 /graphiqlWithExtensions.js
 /graphiqlWithExtensions.min.js
 /graphiqlWithExtensions.css
+/graphiqlCodeExporter.css
 
 .merlin
 lib/
 /.bsb.lock
+
+# ide
+/.idea
diff --git a/examples/static.html b/examples/static.html
index 087b742..171b827 100644
--- a/examples/static.html
+++ b/examples/static.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
     <style>
       html,
       body {
@@ -14,42 +15,83 @@
       }
     </style>
 
+<!--    <link-->
+<!--      rel="stylesheet"-->
+<!--      href="https://cdn.jsdelivr.net/npm/graphiql-with-extensions@0.14.3/graphiqlWithExtensions.css"-->
+<!--      integrity="sha384-GBqwox+q8UtVEyBLBKloN5QDlBDsQnuoSUfMeJH1ZtDiCrrk103D7Bg/WjIvl4ya"-->
+<!--      crossorigin="anonymous"-->
+<!--    />-->
+<!--    <script-->
+<!--      src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"-->
+<!--      integrity="sha384-dcF7KoWRaRpjcNbVPUFgatYgAijf8DqW6NWuqLdfB5Sb4Cdbb8iHX7bHsl9YhpKa"-->
+<!--      crossorigin="anonymous"-->
+<!--    ></script>-->
+<!--    <script-->
+<!--      src="https://cdn.jsdelivr.net/npm/react@16.8.6/umd/react.production.min.js"-->
+<!--      integrity="sha384-qn+ML/QkkJxqn4LLs1zjaKxlTg2Bl/6yU/xBTJAgxkmNGc6kMZyeskAG0a7eJBR1"-->
+<!--      crossorigin="anonymous"-->
+<!--    ></script>-->
+<!--    <script-->
+<!--      src="https://cdn.jsdelivr.net/npm/react-dom@16.8.6/umd/react-dom.production.min.js"-->
+<!--      integrity="sha384-85IMG5rvmoDsmMeWK/qUU4kwnYXVpC+o9hoHMLi4bpNR+gMEiPLrvkZCgsr7WWgV"-->
+<!--      crossorigin="anonymous"-->
+<!--    ></script>-->
+<!--    <script-->
+<!--      src="https://cdn.jsdelivr.net/npm/graphiql-with-extensions@0.14.3/graphiqlWithExtensions.min.js"-->
+<!--      integrity="sha384-TqI6gT2PjmSrnEOTvGHLad1U4Vm5VoyzMmcKK0C/PLCWTnwPyXhCJY6NYhC/tp19"-->
+<!--      crossorigin="anonymous"-->
+<!--    ></script>-->
+
+
+
+
     <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/graphiql-with-extensions@0.14.3/graphiqlWithExtensions.css"
-      integrity="sha384-GBqwox+q8UtVEyBLBKloN5QDlBDsQnuoSUfMeJH1ZtDiCrrk103D7Bg/WjIvl4ya"
-      crossorigin="anonymous"
+        rel="stylesheet"
+        href="/Users/bshah6/Documents/node-test/node_modules/graphiql-with-extensions/graphiqlWithExtensions.css"
+    />
+    <link
+        rel="stylesheet"
+        href="/Users/bshah6/Documents/node-test/node_modules/graphiql-with-extensions/graphiqlCodeExporter.css"
     />
     <script
-      src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"
-      integrity="sha384-dcF7KoWRaRpjcNbVPUFgatYgAijf8DqW6NWuqLdfB5Sb4Cdbb8iHX7bHsl9YhpKa"
-      crossorigin="anonymous"
+        src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"
+        integrity="sha384-dcF7KoWRaRpjcNbVPUFgatYgAijf8DqW6NWuqLdfB5Sb4Cdbb8iHX7bHsl9YhpKa"
+        crossorigin="anonymous"
     ></script>
     <script
-      src="https://cdn.jsdelivr.net/npm/react@16.8.6/umd/react.production.min.js"
-      integrity="sha384-qn+ML/QkkJxqn4LLs1zjaKxlTg2Bl/6yU/xBTJAgxkmNGc6kMZyeskAG0a7eJBR1"
-      crossorigin="anonymous"
+        src="https://cdn.jsdelivr.net/npm/react@16.8.6/umd/react.production.min.js"
+        integrity="sha384-qn+ML/QkkJxqn4LLs1zjaKxlTg2Bl/6yU/xBTJAgxkmNGc6kMZyeskAG0a7eJBR1"
+        crossorigin="anonymous"
     ></script>
     <script
-      src="https://cdn.jsdelivr.net/npm/react-dom@16.8.6/umd/react-dom.production.min.js"
-      integrity="sha384-85IMG5rvmoDsmMeWK/qUU4kwnYXVpC+o9hoHMLi4bpNR+gMEiPLrvkZCgsr7WWgV"
-      crossorigin="anonymous"
+        src="https://cdn.jsdelivr.net/npm/react-dom@16.8.6/umd/react-dom.production.min.js"
+        integrity="sha384-85IMG5rvmoDsmMeWK/qUU4kwnYXVpC+o9hoHMLi4bpNR+gMEiPLrvkZCgsr7WWgV"
+        crossorigin="anonymous"
     ></script>
     <script
-      src="https://cdn.jsdelivr.net/npm/graphiql-with-extensions@0.14.3/graphiqlWithExtensions.min.js"
-      integrity="sha384-TqI6gT2PjmSrnEOTvGHLad1U4Vm5VoyzMmcKK0C/PLCWTnwPyXhCJY6NYhC/tp19"
-      crossorigin="anonymous"
+        src="/Users/bshah6/Documents/node-test/node_modules/graphiql-with-extensions/graphiqlWithExtensions.min.js"
     ></script>
+
+    <script>
+
+
+    </script>
+
+
   </head>
   <body>
     <div id="graphiql"></div>
     <script>
-      var fetchURL = 'https://graphql-pokemon.now.sh/';
+      let fetchURL = 'https://graphql-pokemon.now.sh/';
+      let appId = 'c333eb5b-04b2-4709-9246-31e18db397e1';
+      let serverUrl = `https://serve.onegraph.com/dynamic?app_id=${appId}`;
+      let headers = {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      };
+
       function graphQLFetcher(graphQLParams) {
-        var headers = {
-          Accept: 'application/json',
-          'Content-Type': 'application/json',
-        };
+
 
         return fetch(fetchURL, {
           method: 'post',
@@ -70,6 +112,9 @@
       ReactDOM.render(
         React.createElement(GraphiQLWithExtensions.GraphiQLWithExtensions, {
           fetcher: graphQLFetcher,
+          serverUrl: serverUrl,
+          context: {},
+          headers: headers,
         }),
         document.getElementById('graphiql'),
       );
diff --git a/package-lock.json b/package-lock.json
index 3592f74..16e5f23 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -356,7 +356,7 @@
     },
     "autoprefixer": {
       "version": "7.2.6",
-      "resolved": "http://registry.npmjs.org/autoprefixer/-/autoprefixer-7.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.2.6.tgz",
       "integrity": "sha512-Iq8TRIB+/9eQ8rbGhcP7ct5cYb/3qjNYAR2SnzLCEcwF6rvVOax8+9+fccgXk4bEhQGjOZd5TLhsksmAdsbGqQ==",
       "dev": true,
       "requires": {
@@ -1545,12 +1545,6 @@
       "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=",
       "dev": true
     },
-    "builtin-modules": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
-      "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=",
-      "dev": true
-    },
     "builtin-status-codes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
@@ -1610,9 +1604,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30000921",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000921.tgz",
-      "integrity": "sha512-Bu09ciy0lMWLgpYC77I0YGuI8eFRBPPzaSOYJK1jTI64txCphYCqnWbxJYjHABYVt/TYX/p3jNjLBR87u1Bfpw==",
+      "version": "1.0.30001066",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001066.tgz",
+      "integrity": "sha512-Gfj/WAastBtfxLws0RCh2sDbTK/8rJuSeZMecrSkNGYxPcv7EzblmDGfWQCFEQcSqYE2BRgQiJh8HOD07N5hIw==",
       "dev": true
     },
     "caseless": {
@@ -2356,9 +2350,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.3.91",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.91.tgz",
-      "integrity": "sha512-wOWwM4vQpmb97VNkExnwE5e/sUMUb7NXurlEnhE89JOarUp6FOOMKjtTGgj9bmqskZkeRA7u+p0IztJ/y2OP5Q==",
+      "version": "1.3.453",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.453.tgz",
+      "integrity": "sha512-IQbCfjJR0NDDn/+vojTlq7fPSREcALtF8M1n01gw7nQghCtfFYrJ2dfhsp8APr8bANoFC8vRTFVXMOGpT0eetw==",
       "dev": true
     },
     "elegant-spinner": {
@@ -3668,7 +3662,7 @@
     },
     "globby": {
       "version": "6.1.0",
-      "resolved": "http://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
       "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
       "dev": true,
       "requires": {
@@ -3715,10 +3709,18 @@
         }
       }
     },
+    "graphiql-code-exporter": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/graphiql-code-exporter/-/graphiql-code-exporter-2.0.8.tgz",
+      "integrity": "sha512-vgNfnLWM+gGi8fVpqEb/Pq8CBc7foewZu2+tXmnZ/cd7TLd+T9fX2Ni18bp/aAEAS8xmX/KmzzCcneroxMjdIA==",
+      "requires": {
+        "copy-to-clipboard": "^3.0.8"
+      }
+    },
     "graphiql-explorer": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/graphiql-explorer/-/graphiql-explorer-0.4.4.tgz",
-      "integrity": "sha512-NuQ1XAjZwykKb9GoHM6ofI9qITZ8Lue/mXi1Bj3/ZbGZv1Srk3sz0QkKQ5jBaxmuS3Ay09LRvJQSOr0Ci1dlfg=="
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/graphiql-explorer/-/graphiql-explorer-0.6.2.tgz",
+      "integrity": "sha512-hYSM+TI/0IAXltMOL7YXrvnA5xrKoDjjN7qiksxca2DY7yu46cyHVHG0IKIrBozMDBQLvFOhQMPrzplErwVZ1g=="
     },
     "graphql": {
       "version": "14.5.4",
@@ -3984,9 +3986,9 @@
       }
     },
     "hosted-git-info": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz",
-      "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==",
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
+      "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==",
       "dev": true
     },
     "html-encoding-sniffer": {
@@ -4238,15 +4240,6 @@
       "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
       "dev": true
     },
-    "is-builtin-module": {
-      "version": "1.0.0",
-      "resolved": "http://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
-      "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=",
-      "dev": true,
-      "requires": {
-        "builtin-modules": "^1.0.0"
-      }
-    },
     "is-callable": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz",
@@ -4988,7 +4981,7 @@
     },
     "load-json-file": {
       "version": "2.0.0",
-      "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
       "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
       "dev": true,
       "requires": {
@@ -5447,15 +5440,26 @@
       }
     },
     "normalize-package-data": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
-      "integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
       "dev": true,
       "requires": {
         "hosted-git-info": "^2.1.4",
-        "is-builtin-module": "^1.0.0",
+        "resolve": "^1.10.0",
         "semver": "2 || 3 || 4 || 5",
         "validate-npm-package-license": "^3.0.1"
+      },
+      "dependencies": {
+        "resolve": {
+          "version": "1.17.0",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
+          "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
+          "dev": true,
+          "requires": {
+            "path-parse": "^1.0.6"
+          }
+        }
       }
     },
     "normalize-path": {
@@ -5925,7 +5929,7 @@
     },
     "pify": {
       "version": "2.3.0",
-      "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
       "dev": true
     },
@@ -5983,9 +5987,9 @@
           }
         },
         "chalk": {
-          "version": "2.4.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
-          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
           "dev": true,
           "requires": {
             "ansi-styles": "^3.2.1",
@@ -6058,9 +6062,9 @@
           },
           "dependencies": {
             "chalk": {
-              "version": "2.4.1",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
-              "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
+              "version": "2.4.2",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
               "dev": true,
               "requires": {
                 "ansi-styles": "^3.2.1",
@@ -6109,9 +6113,9 @@
           }
         },
         "minimist": {
-          "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
           "dev": true
         }
       }
@@ -6142,9 +6146,9 @@
           }
         },
         "minimist": {
-          "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
           "dev": true
         }
       }
@@ -6175,9 +6179,9 @@
           }
         },
         "minimist": {
-          "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
           "dev": true
         }
       }
@@ -7407,9 +7411,9 @@
       "dev": true
     },
     "spdx-correct": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",
-      "integrity": "sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
+      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
       "dev": true,
       "requires": {
         "spdx-expression-parse": "^3.0.0",
@@ -7417,15 +7421,15 @@
       }
     },
     "spdx-exceptions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz",
-      "integrity": "sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
       "dev": true
     },
     "spdx-expression-parse": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz",
-      "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
       "dev": true,
       "requires": {
         "spdx-exceptions": "^2.1.0",
@@ -7433,9 +7437,9 @@
       }
     },
     "spdx-license-ids": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.2.tgz",
-      "integrity": "sha512-qky9CVt0lVIECkEsYbNILVnPvycuEBkXoMFLRWsREkomQLevYhtRKC+R91a5TOAQ3bCMjikRwhyaRqj1VYatYg==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz",
+      "integrity": "sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==",
       "dev": true
     },
     "split-string": {
@@ -8309,7 +8313,7 @@
     },
     "wrap-ansi": {
       "version": "2.1.0",
-      "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
       "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
       "dev": true,
       "requires": {
diff --git a/package.json b/package.json
index f0ea1b1..339963a 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "graphiqlWithExtensions.js",
     "graphiqlWithExtensions.min.js",
     "graphiqlWithExtensions.css",
+    "graphiqlCodeExporter.css",
     "README.md",
     "LICENSE"
   ],
@@ -82,7 +83,8 @@
   },
   "dependencies": {
     "graphiql": "^0.14.2",
-    "graphiql-explorer": "^0.4.4",
+    "graphiql-code-exporter": "^2.0.8",
+    "graphiql-explorer": "^0.6.2",
     "graphql": "^14.5.4"
   }
 }
diff --git a/resources/build.sh b/resources/build.sh
index 5adfbca..9c19ded 100755
--- a/resources/build.sh
+++ b/resources/build.sh
@@ -16,6 +16,8 @@ echo "Bundling graphiqlWithExtensions.min.js..."
 browserify -g browserify-shim -t uglifyify -s GraphiQLWithExtensions dist/index.js | uglifyjs -c > graphiqlWithExtensions.min.js
 echo "Expose original css from GraphiQL(graphiql.css)"
 cp node_modules/graphiql/graphiql.css ./graphiqlWithExtensions.css
+echo "Expose original css from GraphiqlCodeExporter (CodeExporter.css)"
+cp node_modules/graphiql-code-exporter/CodeExporter.css ./graphiqlCodeExporter.css
 # echo "Bundling graphiql.css..."
 # postcss --no-map --use autoprefixer -d dist/ css/*.css
 # cat dist/*.css > graphiql.css
diff --git a/src/GraphiQLWithExtensions.js b/src/GraphiQLWithExtensions.js
index 25198b9..5b47a11 100644
--- a/src/GraphiQLWithExtensions.js
+++ b/src/GraphiQLWithExtensions.js
@@ -1,34 +1,40 @@
 import React, {Component} from 'react';
 import GraphiQL from 'graphiql';
 import GraphiQLExplorer from 'graphiql-explorer';
+import CodeExporter from 'graphiql-code-exporter';
+import codeExporterDefaultSnippets from 'graphiql-code-exporter/lib/snippets';
 import {buildClientSchema, getIntrospectionQuery, parse} from 'graphql';
 
 class GraphiQLWithExtensions extends Component {
   _graphiql: GraphiQL;
+
   state = {
     schema: null,
     query: this.props.defaultQuery,
     explorerIsOpen: false,
     disableExplorer: this.props.disableExplorer,
+    codeExporterIsOpen: false,
+    disableCodeExporter: this.props.disableCodeExporter
   };
 
   componentDidMount() {
     this.props
-      .fetcher({
-        query: getIntrospectionQuery(),
-      })
-      .then(result => {
-        const editor = this._graphiql.getQueryEditor();
-        editor.setOption('extraKeys', {
-          ...(editor.options.extraKeys || {}),
-          'Shift-Alt-LeftClick': this._handleInspectOperation,
-        });
-
-        this.setState({schema: buildClientSchema(result.data)});
+    .fetcher({
+      query: getIntrospectionQuery(),
+    })
+    .then(result => {
+      const editor = this._graphiql.getQueryEditor();
+      editor.setOption('extraKeys', {
+        ...(editor.options.extraKeys || {}),
+        'Shift-Alt-LeftClick': this._handleInspectOperation,
       });
+
+      this.setState({schema: buildClientSchema(result.data)});
+    });
   }
 
-  _handleInspectOperation = (cm: any, mousePos: {line: Number, ch: Number}) => {
+  _handleInspectOperation = (cm: any,
+      mousePos: { line: Number, ch: Number }) => {
     let parsedQuery;
     try {
       parsedQuery = parse(this.state.query || '');
@@ -63,24 +69,24 @@ class GraphiQLWithExtensions extends Component {
 
     if (!def) {
       console.error(
-        'Unable to find definition corresponding to mouse position',
+          'Unable to find definition corresponding to mouse position',
       );
       return null;
     }
 
     var operationKind =
-      def.kind === 'OperationDefinition'
-        ? def.operation
-        : def.kind === 'FragmentDefinition'
-        ? 'fragment'
-        : 'unknown';
+        def.kind === 'OperationDefinition'
+            ? def.operation
+            : def.kind === 'FragmentDefinition'
+            ? 'fragment'
+            : 'unknown';
 
     var operationName =
-      def.kind === 'OperationDefinition' && !!def.name
-        ? def.name.value
-        : def.kind === 'FragmentDefinition' && !!def.name
-        ? def.name.value
-        : 'unknown';
+        def.kind === 'OperationDefinition' && !!def.name
+            ? def.name.value
+            : def.kind === 'FragmentDefinition' && !!def.name
+            ? def.name.value
+            : 'unknown';
 
     var selector = `.graphiql-explorer-root #${operationKind}-${operationName}`;
 
@@ -90,70 +96,101 @@ class GraphiQLWithExtensions extends Component {
 
   _handleEditQuery = (query: string): void => {
     this.setState({query});
-    if (this.props.onEditQuery) this.props.onEditQuery(query);
+    if (this.props.onEditQuery) {
+      this.props.onEditQuery(query);
+    }
   };
 
   _handleEditVariables = variables => {
-    if (this.props.onEditVariables) this.props.onEditVariables(variables);
+    if (this.props.onEditVariables) {
+      this.props.onEditVariables(variables);
+    }
   };
 
   _handleEditOperationName = operation => {
-    if (this.props.onEditOperationName)
+    if (this.props.onEditOperationName) {
       this.props.onEditOperationName(operation);
+    }
   };
 
   _handleToggleExplorer = () => {
     this.setState({explorerIsOpen: !this.state.explorerIsOpen});
   };
 
-  _handleToggleCodeExporter = () =>
-    this.setState({
-      codeExporterIsOpen: !this.state.codeExporterIsOpen,
-    });
+  _handleToggleCodeExporter = () => {
+    this.setState({codeExporterIsOpen: !this.state.codeExporterIsOpen});
+  }
 
   render() {
     const {query, schema} = this.state;
 
-    return (
-      <div className="graphiql-container">
-        {this.props.disableExplorer ? null : (
-          <GraphiQLExplorer
+    const explorer = this.props.disableExplorer ? null : (
+        <GraphiQLExplorer
             schema={schema}
             query={query}
             onEdit={this._handleEditQuery}
             explorerIsOpen={this.state.explorerIsOpen}
             onToggleExplorer={this._handleToggleExplorer}
-          />
-        )}
-        <GraphiQL
-          ref={ref => (this._graphiql = ref)}
-          fetcher={this.props.fetcher}
-          schema={schema}
-          query={query}
-          onEditQuery={this._handleEditQuery}
-          onEditVariables={this._handleEditVariables}
-          onEditOperationName={this._handleEditOperationName}>
-          <GraphiQL.Toolbar>
-            <GraphiQL.Button
-              onClick={() => this._graphiql.handlePrettifyQuery()}
-              label="Prettify"
-              title="Prettify Query (Shift-Ctrl-P)"
-            />
-            <GraphiQL.Button
-              onClick={() => this._graphiql.handleToggleHistory()}
-              label="History"
-              title="Show History"
+        />
+    );
+
+    const codeExporter = this.props.disableCodeExporter ? null : (
+        this.state.codeExporterIsOpen ? (
+            <CodeExporter
+                hideCodeExporter={this._handleToggleCodeExporter}
+                snippets={codeExporterDefaultSnippets}
+                serverUrl={this.props.serverUrl}
+                context={this.props.context}
+                variables={{}}
+                headers={this.props.headers}
+                query={query}
+                codeMirrorTheme="tomorrow-night-bright"
             />
-            {this.props.disableExplorer ? null : (
+        ) : null
+    );
+
+    return (
+        <div className="graphiql-container">
+          {explorer}
+          <GraphiQL
+              ref={ref => (this._graphiql = ref)}
+              fetcher={this.props.fetcher}
+              schema={schema}
+              query={query}
+              onEditQuery={this._handleEditQuery}
+              onEditVariables={this._handleEditVariables}
+              onEditOperationName={this._handleEditOperationName}>
+            <GraphiQL.Toolbar>
+              <GraphiQL.Button
+                  onClick={() => this._graphiql.handlePrettifyQuery()}
+                  label="Prettify"
+                  title="Prettify Query (Shift-Ctrl-P)"
+              />
               <GraphiQL.Button
-                onClick={this._handleToggleExplorer}
-                label="Explorer"
-                title="Toggle Explorer"
+                  onClick={() => this._graphiql.handleToggleHistory()}
+                  label="History"
+                  title="Show History"
               />
-            )}
-          </GraphiQL.Toolbar>
-        </GraphiQL>
-      </div>
+
+              {this.props.disableExplorer ? null : (
+                  <GraphiQL.Button
+                      onClick={this._handleToggleExplorer}
+                      label="Explorer"
+                      title="Toggle Explorer"
+                  />
+              )}
+
+              {this.props.disableCodeExporter ? null : (
+                  <GraphiQL.Button
+                      onClick={this._handleToggleCodeExporter}
+                      label="Code Exporter"
+                      title="Toggle Code Exporter"
+                  />
+              )}
+            </GraphiQL.Toolbar>
+          </GraphiQL>
+          {codeExporter}
+        </div>
     );
   }
 }
