diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index b267bfb6f2..1719ed9f2a 100644
--- a/site/assets/js/application.js
+++ b/site/assets/js/application.js
@@ -125,17 +125,24 @@
       element.insertAdjacentHTML('beforebegin', btnHtml)
     })
 
-  document.querySelectorAll('.btn-clipboard')
-    .forEach(function (btn) {
-      var tooltipBtn = new bootstrap.Tooltip(btn, { title: btnTitle })
+  /**
+   *
+   * @param {HTMLButtonElement} btn
+   * @param {string} title
+   */
+  function snippetButtonTooltip(btn, title) {
+    var tooltipBtn = new bootstrap.Tooltip(btn, { title: title })
 
-      btn.addEventListener('mouseleave', function () {
-        // Explicitly hide tooltip, since after clicking it remains
-        // focused (as it's a button), so tooltip would otherwise
-        // remain visible until focus is moved away
-        tooltipBtn.hide()
-      })
+    btn.addEventListener('mouseleave', function () {
+      // Explicitly hide tooltip, since after clicking it remains
+      // focused (as it's a button), so tooltip would otherwise
+      // remain visible until focus is moved away
+      tooltipBtn.hide()
     })
+  }
+
+  snippetButtonTooltip(document.querySelector('.btn-clipboard'), 'Copy to clipboard')
+  snippetButtonTooltip(document.querySelector('.btn-edit'), 'Edit on Stackblitz')
 
   var clipboard = new ClipboardJS('.btn-clipboard', {
     target: function (trigger) {
diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
index 83b9a8b9e5..b2b0854dc4 100644
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@@ -2,7 +2,8 @@
 //
 // JS-based `Copy` buttons for code snippets.
 
-.bd-clipboard {
+.bd-clipboard,
+.bd-edit {
   position: relative;
   display: none;
   float: right;
@@ -16,7 +17,8 @@
   }
 }
 
-.btn-clipboard {
+.btn-clipboard,
+.btn-edit {
   position: absolute;
   top: .65rem;
   right: .65rem;
@@ -25,6 +27,7 @@
   padding: .25rem .5rem;
   @include font-size(.65em);
   color: $primary;
+  white-space: nowrap;
   background-color: $white;
   border: 1px solid;
   @include border-radius();
@@ -35,3 +38,7 @@
     background-color: $primary;
   }
 }
+
+.btn-edit {
+  right: 3.65rem;
+}
diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html
index d25add3ff4..0724a39ee1 100644
--- a/site/layouts/partials/scripts.html
+++ b/site/layouts/partials/scripts.html
@@ -6,6 +6,7 @@
 
 {{ if eq .Page.Layout "docs" -}}
 <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
 {{- end }}
 
 {{- $vendor := resources.Match "js/vendor/*.js" -}}
@@ -18,3 +19,47 @@
 {{- end }}
 
 <script src="{{ $docsJs.Permalink | relURL }}"></script>
+
+{{ if eq .Page.Layout "docs" -}}
+<script>
+  // Open in StackBlitz logic
+  document.querySelectorAll('.btn-edit')
+    .forEach(function (btn) {
+      btn.addEventListener('click', function (event) {
+        var htmlSnippet = event.target.closest('.bd-content').querySelector('.bd-example').innerHTML
+
+        StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
+      })
+    })
+
+  StackBlitzSDK.openBootstrapSnippet = function(snippet) {
+    var project = {
+        files: {
+          'index.html': `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="{{ .Site.Params.cdn.css }}" rel="stylesheet">
+    <title>Bootstrap Example</title>
+  </head>
+  <body>
+
+    <!-- Example Code -->
+${snippet.replace(/^/gm, '    ')}
+    <!-- End Example Code -->
+
+    <${'script'} src="{{ .Site.Params.cdn.js_bundle }}"></${'script'}>
+  </body>
+</html>`
+        },
+        title: 'Bootstrap Example',
+        description: 'Official example from ' + window.location.href,
+        template: 'html',
+        tags: ['bootstrap']
+      }
+
+    StackBlitzSDK.openProject(project, { openFile: 'index.html' })
+  }
+</script>
+{{- end }}
diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
index 0592adc6b5..a808c2589a 100644
--- a/site/layouts/shortcodes/example.html
+++ b/site/layouts/shortcodes/example.html
@@ -22,6 +22,9 @@
 {{- end -}}
 
 {{- if eq $show_markup true -}}
+  <div class="bd-edit">
+    <button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">Try it</button>
+  </div>
   {{- $content := replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>\n` `<img src="..." class="$1" alt="...">` $input -}}
   {{- $content = replaceRE ` (class=" *?")` "" $content -}}
   {{- highlight (trim $content "\n") $lang "" -}}
