diff --git a/src/panels/lovelace/components/hui-yaml-editor.ts b/src/panels/lovelace/components/hui-yaml-editor.ts
index f83d392bee..ae2a9b65ad 100644
--- a/src/panels/lovelace/components/hui-yaml-editor.ts
+++ b/src/panels/lovelace/components/hui-yaml-editor.ts
@@ -9,6 +9,7 @@ declare global {
     "yaml-changed": {
       value: string;
     };
+    "yaml-save": undefined;
   }
 }
 
@@ -18,6 +19,9 @@ export class HuiYamlEditor extends HTMLElement {
 
   public constructor() {
     super();
+    CodeMirror.commands.save = (cm: CodeMirror) => {
+      fireEvent(cm.getWrapperElement(), "yaml-save");
+    };
     this._value = "";
     const shadowRoot = this.attachShadow({ mode: "open" });
     shadowRoot.innerHTML = `
diff --git a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
index 3898e7b9ac..0022c045b2 100644
--- a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
@@ -121,6 +121,7 @@ export class HuiEditCard extends LitElement {
                 <hui-yaml-editor
                   .value="${this._configValue!.value}"
                   @yaml-changed="${this._handleYamlChanged}"
+                  @yaml-save="${this._save}"
                 ></hui-yaml-editor>
               `}
         </div>
diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts
index fcdb102773..87bdd6daed 100644
--- a/src/panels/lovelace/hui-editor.ts
+++ b/src/panels/lovelace/hui-editor.ts
@@ -61,7 +61,10 @@ class LovelaceFullConfigEditor extends LitElement {
           </app-toolbar>
         </app-header>
         <div class="content">
-          <hui-yaml-editor @yaml-changed="${this._yamlChanged}">
+          <hui-yaml-editor
+            @yaml-changed="${this._yamlChanged}"
+            @yaml-save="${this._handleSave}"
+          >
           </hui-yaml-editor>
         </div>
       </app-header-layout>