diff --git a/components/playground/element.css b/components/playground/element.css
index 9a56bc330..f5a54881d 100644
--- a/components/playground/element.css
+++ b/components/playground/element.css
@@ -138,7 +138,7 @@ mdn-modal {
     flex-direction: column;
     gap: 0.5rem;
 
-    &:first-child {
+    &:not(:last-child) {
       margin-bottom: 1rem;
     }
   }
diff --git a/components/playground/element.js b/components/playground/element.js
index 5fa9fe858..9c2847848 100644
--- a/components/playground/element.js
+++ b/components/playground/element.js
@@ -118,6 +118,22 @@ ${"```"}`,
     }
   }
 
+  async _copyDataUrl() {
+    const controller = this._controller.value;
+    if (controller) {
+      const { css, html, js } = controller.code;
+      let code = `<!doctype html>`;
+      if (css) code += `<style>${css}</style>`;
+      if (html) code += html;
+      if (js) code += `<script>${js}</script>`;
+      // encode non-space whitespace
+      code = code.replaceAll(/[^\S ]/g, (ch) => encodeURIComponent(ch));
+      await navigator.clipboard.writeText(
+        `data:text/html;charset=utf-8,${code}`,
+      );
+    }
+  }
+
   async _createPermalink() {
     const controller = this._controller.value;
     if (controller) {
@@ -372,10 +388,22 @@ ${"```"}`,
       <mdn-modal ${ref(this._shareModal)} class="share">
         <section>
           <h2>${this.l10n`Share Markdown`}</h2>
-          <mdn-button variant="secondary" @click=${this._copyMarkdown}
+          <mdn-button
+            variant="secondary"
+            @click=${this._copyMarkdown}
+            data-glean-id="playground: copy-markdown"
             >${this.l10n`Copy markdown to clipboard`}</mdn-button
           >
         </section>
+        <section>
+          <h2>${this.l10n`Share Data URL`}</h2>
+          <mdn-button
+            variant="secondary"
+            @click=${this._copyDataUrl}
+            data-glean-id="playground: copy-data-url"
+            >${this.l10n`Copy data URL to clipboard`}</mdn-button
+          >
+        </section>
         <section>
           <h2>${this.l10n`Share your code via Permalink`}</h2>
           ${this._user.render({
@@ -389,6 +417,7 @@ ${"```"}`,
                       <mdn-button
                         variant="secondary"
                         @click=${this._copyPermalink}
+                        data-glean-id="playground: copy-permalink"
                         >${this.l10n`Copy to clipboard`}</mdn-button
                       >
                     `
