diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-bookmark.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-bookmark.hbs
index 51380d5bc7..e0eb9c465b 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-bookmark.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-bookmark.hbs
@@ -6,6 +6,7 @@
     @deselectCard={{action this.deselectCard}}
     @onDeselect={{action "onDeselect"}}
     @editCard={{action this.editCard}}
+    @saveAsSnippet={{this.saveAsSnippet}}
     @toolbar={{this.toolbar}}
     @hasEditMode={{false}}
     @showSelectedOutline={{this.payload.metadata}}
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-code.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-code.hbs
index a412593933..8e0d745c96 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-code.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-code.hbs
@@ -1,5 +1,5 @@
 <KoenigCard
-    @class={{concat "ba b--white relative kg-card-hover miw-100 relative" (if this.isEditing " bw2 pt1 pb1 pl2 nl6 pr6 nr6")}}
+    @class={{concat "ba b--white relative kg-card-hover miw-100" (if this.isEditing " bw2 pt1 pb1 pl2 nl6 pr6 nr6")}}
     @style={{this.cardStyle}}
     @headerOffset={{this.headerOffset}}
     @toolbar={{this.toolbar}}
@@ -10,6 +10,7 @@
     @deselectCard={{action this.deselectCard}}
     @editCard={{action this.editCard}}
     @saveCard={{action this.saveCard}}
+    @saveAsSnippet={{this.saveAsSnippet}}
     @onEnterEdit={{action "enterEditMode"}}
     @onLeaveEdit={{action "leaveEditMode"}}
     @addParagraphAfterCard={{this.addParagraphAfterCard}}
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email.hbs
index b085ca405a..da4743981a 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email.hbs
@@ -11,6 +11,7 @@
     @deselectCard={{action this.deselectCard}}
     @editCard={{action this.editCard}}
     @saveCard={{action this.saveCard}}
+    @saveAsSnippet={{this.saveAsSnippet}}
     @onLeaveEdit={{action "leaveEditMode"}}
     @addParagraphAfterCard={{this.addParagraphAfterCard}}
     @moveCursorToPrevSection={{this.moveCursorToPrevSection}}
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-embed.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-embed.hbs
index d9f55a6db9..53f7cdc13d 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-embed.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-embed.hbs
@@ -6,6 +6,7 @@
     @deselectCard={{action this.deselectCard}}
     @onDeselect={{action "onDeselect"}}
     @editCard={{action this.editCard}}
+    @saveAsSnippet={{this.saveAsSnippet}}
     @toolbar={{this.toolbar}}
     @hasEditMode={{false}}
     @showSelectedOutline={{this.payload.html}}
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-gallery.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-gallery.hbs
index 04ae8a8068..a4b87910c3 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-gallery.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-gallery.hbs
@@ -6,6 +6,7 @@
     @selectCard={{action this.selectCard}}
     @deselectCard={{action this.deselectCard}}
     @editCard={{action this.editCard}}
+    @saveAsSnippet={{this.saveAsSnippet}}
     @toolbar={{this.toolbar}}
     @hasEditMode={{false}}
     @addParagraphAfterCard={{this.addParagraphAfterCard}}
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-html.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-html.hbs
index 2479daeb4e..b621c52993 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-html.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-html.hbs
@@ -10,6 +10,7 @@
     @deselectCard={{action this.deselectCard}}
     @editCard={{action this.editCard}}
     @saveCard={{action this.saveCard}}
+    @saveAsSnippet={{this.saveAsSnippet}}
     @onLeaveEdit={{action "leaveEditMode"}}
     @editor={{this.editor}}
 >
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.hbs
index 11d1445cb7..5cbf5e2c06 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.hbs
@@ -6,6 +6,7 @@
     @selectCard={{action this.selectCard}}
     @deselectCard={{action this.deselectCard}}
     @editCard={{action this.editCard}}
+    @saveAsSnippet={{this.saveAsSnippet}}
     @toolbar={{this.toolbar}}
     @hasEditMode={{false}}
     @addParagraphAfterCard={{this.addParagraphAfterCard}}
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.hbs
index 991bed2148..768a8cb1f5 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.hbs
@@ -12,6 +12,7 @@
     @deselectCard={{action this.deselectCard}}
     @editCard={{action this.editCard}}
     @saveCard={{action this.saveCard}}
+    @saveAsSnippet={{this.saveAsSnippet}}
     @editor={{this.editor}}
 >
     {{#if this.isEditing}}
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card.hbs
index 56fde71a58..03274783b4 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card.hbs
@@ -19,8 +19,8 @@
     )
 )}}
 
-{{#if this.toolbar}}
-    <KgActionBar @class="absolute" @style={{this.toolbarStyle}} @isVisible={{this.shouldShowToolbar}}>
+{{#if (or this.toolbar this.saveAsSnippet)}}
+    <KgActionBar @class="absolute" @style={{this.toolbarStyle}} @isVisible={{this.shouldShowToolbar}} @instantClose={{this.koenigUi.inputHasFocus}}>
         {{#each this.toolbar.items as |item|}}
             {{#if item.divider}}
                 <li class="ma0 kg-action-bar-divider bg-darkgrey-d2 h5" role="separator"></li>
@@ -37,5 +37,21 @@
                 </li>
             {{/if}}
         {{/each}}
+
+        {{#if (and this.saveAsSnippet (enable-developer-experiments))}}
+            {{#if this.toolbar.items}}
+                <li class="ma0 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
+            {{/if}}
+            <li class="ma0 lh-solid">
+                <button
+                    type="button"
+                    title="Create snippet"
+                    class="dib dim-lite link h9 w9 nudge-top--1"
+                    {{on "click" this.saveAsSnippet}}
+                >
+                    {{svg-jar "koenig/kg-snippet" class="w4 h4"}}
+                </button>
+            </li>
+        {{/if}}
     </KgActionBar>
 {{/if}}
\ No newline at end of file
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js
index 8fba120cb5..6325b83ac0 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js
@@ -42,8 +42,11 @@ export default Component.extend({
     onEnterEdit() {},
     onLeaveEdit() {},
 
-    shouldShowToolbar: computed('showToolbar', 'koenigUi.{captionHasFocus,isDragging}', function () {
-        return this.showToolbar && !this.koenigUi.captionHasFocus && !this.koenigUi.isDragging;
+    shouldShowToolbar: computed('showToolbar', 'koenigUi.{captionHasFocus,isDragging,inputHasFocus}', function () {
+        return this.showToolbar
+            && !this.koenigUi.captionHasFocus
+            && !this.koenigUi.inputHasFocus
+            && !this.koenigUi.isDragging;
     }),
 
     toolbarStyle: computed('shouldShowToolbar', 'toolbarWidth', 'toolbarHeight', function () {
@@ -241,7 +244,7 @@ export default Component.extend({
     },
 
     _setToolbarProperties() {
-        if (this.toolbar) {
+        if (this.toolbar || this.saveAsSnippet) {
             // select the last toolbar in the element because card contents/captions
             // may have their own toolbar elements
             let toolbar = this.element.querySelector(':scope > [data-kg-toolbar="true"]');
@@ -256,7 +259,7 @@ export default Component.extend({
 
     _showToolbar() {
         // only show a toolbar if we have one
-        if (this.toolbar) {
+        if (this.toolbar || this.saveAsSnippet) {
             this._setToolbarProperties();
 
             if (!this.showToolbar && !this._onMousemoveHandler) {
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.hbs
index 15476cebe8..7f4dd96f8e 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.hbs
@@ -40,6 +40,7 @@
     <KoenigSnippetInput
         @editor={{this.editor}}
         @snippetRange={{this.snippetRange}}
+        @snippetRect={{this.snippetRect}}
         @save={{@saveSnippet}}
         @cancel={{this.cancelAddSnippet}}
     />
@@ -83,6 +84,7 @@
             deselectCard=(action "deselectCard" card)
             editCard=(action "editCard" card)
             deleteCard=(action "deleteCard" card)
+            saveAsSnippet=(action "saveCardAsSnippet" card)
             moveCursorToPrevSection=(action "moveCursorToPrevSection" card)
             moveCursorToNextSection=(action "moveCursorToNextSection" card)
             addParagraphAfterCard=(action "addParagraphAfterCard" card)
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js
index 873e9bfbe6..dcba170095 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js
@@ -618,6 +618,12 @@ export default Component.extend({
             this.deleteCard(card, cursorMovement);
         },
 
+        saveCardAsSnippet(card) {
+            let section = this.getSectionFromCard(card);
+            this.set('snippetRect', card.component.element.getBoundingClientRect());
+            this.set('snippetRange', section.toRange());
+        },
+
         moveCursorToPrevSection(card) {
             let section = this.getSectionFromCard(card);
 
@@ -671,11 +677,13 @@ export default Component.extend({
             return;
         }
 
+        this.set('snippetRect', null);
         this.set('snippetRange', selectedRange);
     }),
 
     cancelAddSnippet: action(function () {
         this.set('snippetRange', null);
+        this.set('snippetRect', null);
     }),
 
     /* public interface ----------------------------------------------------- */
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-snippet-input.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-snippet-input.js
index 64b2020d7a..643b6ff02a 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-snippet-input.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-snippet-input.js
@@ -4,6 +4,7 @@ import {TOOLBAR_MARGIN} from './koenig-toolbar';
 import {action} from '@ember/object';
 import {guidFor} from '@ember/object/internals';
 import {run} from '@ember/runloop';
+import {inject as service} from '@ember/service';
 import {tracked} from '@glimmer/tracking';
 
 // pixels that should be added to the `left` property of the tick adjustment styles
@@ -11,12 +12,17 @@ import {tracked} from '@glimmer/tracking';
 const TICK_ADJUSTMENT = 8;
 
 export default class KoenigSnippetInputComponent extends Component {
+    @service koenigUi;
+
     @tracked name = '';
     @tracked style = ''.htmlSafe();
 
     constructor() {
         super(...arguments);
 
+        // hide any other toolbars
+        this.koenigUi.inputHasFocus = true;
+
         // record the range now because the property is bound and will update
         // when the selection changes
         this._snippetRange = this.args.snippetRange;
@@ -46,6 +52,7 @@ export default class KoenigSnippetInputComponent extends Component {
     }
 
     willDestroy() {
+        this.koenigUi.inputHasFocus = false;
         window.removeEventListener('mousedown', this._onMousedownHandler);
         window.removeEventListener('keydown', this._onKeydownHandler);
         this._removeStyleElement();
diff --git a/ghost/admin/lib/koenig-editor/addon/services/koenig-ui.js b/ghost/admin/lib/koenig-editor/addon/services/koenig-ui.js
index 03d66aef22..a2bc5495bc 100644
--- a/ghost/admin/lib/koenig-editor/addon/services/koenig-ui.js
+++ b/ghost/admin/lib/koenig-editor/addon/services/koenig-ui.js
@@ -1,18 +1,22 @@
 import Service from '@ember/service';
+import {tracked} from '@glimmer/tracking';
 
-export default Service.extend({
-    captionHasFocus: false,
-    isDragging: false,
+export default class KoenigUiService extends Service {
+    @tracked captionHasFocus = false;
+    @tracked inputHasFocus = false;
+    @tracked isDragging = false;
+
+    #focusedCaption = null;
 
     captionGainedFocus(caption) {
-        this._focusedCaption = caption;
-        this.set('captionHasFocus', true);
-    },
+        this.captionHasFocus = true;
+        this.#focusedCaption = caption;
+    }
 
     captionLostFocus(caption) {
-        if (this._focusedCaption === caption) {
-            this._focusedCaption = null;
-            this.set('captionHasFocus', false);
+        if (this.#focusedCaption === caption) {
+            this.captionHasFocus = false;
+            this.#focusedCaption = null;
         }
     }
-});
+}