diff --git a/src/demo/index.php b/src/demo/index.php
index a168c0bf..4da301c3 100644
--- a/src/demo/index.php
+++ b/src/demo/index.php
@@ -245,6 +245,17 @@ function gtag() {
                         Copy To Clipboard
                     </button>
                 </div>
+
+                <div>
+                    <h2>JSON</h2>
+                    <div class="code-container json">
+                        <code></code>
+                    </div>
+                    
+                    <button class="copy-button btn tooltip copy-json" onclick="clipboard.copy(this);" onmouseout="tooltip.reset(this);" disabled>
+                        Copy To Clipboard
+                    </button>
+                </div>
             </div>
             <div class="bottom">
                 <a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/docs/faq.md" target="_blank" class="underline-hover faq">
diff --git a/src/demo/js/script.js b/src/demo/js/script.js
index 903f9d9f..00044a79 100644
--- a/src/demo/js/script.js
+++ b/src/demo/js/script.js
@@ -47,17 +47,22 @@ const preview = {
       document.querySelector(".output img").src = demoImageURL;
       document.querySelector(".md code").innerText = md;
       document.querySelector(".html code").innerText = html;
+      document.querySelector(".copy-md").parentElement.style.display = "block";
+      document.querySelector(".copy-html").parentElement.style.display = "block";
       document.querySelector(".output img").style.display = "block";
       document.querySelector(".output .json").style.display = "none";
+      document.querySelector(".copy-json").parentElement.style.display = "none";
     } else {
-      document.querySelector(".output img").style.display = "none";
-      document.querySelector(".output .json").style.display = "block";
       fetch(demoImageURL)
         .then((response) => response.json())
         .then((data) => (document.querySelector(".output .json pre").innerText = JSON.stringify(data, null, 2)))
         .catch(console.error);
-      document.querySelector(".md code").innerText = imageURL;
-      document.querySelector(".html code").innerText = imageURL;
+      document.querySelector(".json code").innerText = imageURL;
+      document.querySelector(".copy-md").parentElement.style.display = "none";
+      document.querySelector(".copy-html").parentElement.style.display = "none";
+      document.querySelector(".output img").style.display = "none";
+      document.querySelector(".output .json").style.display = "block";
+      document.querySelector(".copy-json").parentElement.style.display = "block";
     }
     // disable copy button if username is invalid
     const copyButtons = document.querySelectorAll(".copy-button");
@@ -388,6 +393,8 @@ const clipboard = {
       input.value = document.querySelector(".md code").innerText;
     } else if (el.classList.contains("copy-html")) {
       input.value = document.querySelector(".html code").innerText;
+    } else if (el.classList.contains("copy-json")) {
+      input.value = document.querySelector(".json code").innerText;
     }
     document.body.appendChild(input);
     // select all