diff --git a/src/panels/lovelace/components/hui-yaml-editor.ts b/src/panels/lovelace/components/hui-yaml-editor.ts
index d1493f0dc4..702ef63dc3 100644
--- a/src/panels/lovelace/components/hui-yaml-editor.ts
+++ b/src/panels/lovelace/components/hui-yaml-editor.ts
@@ -1,6 +1,6 @@
-import CodeMirror from "codemirror";
+import * as CodeMirror from "codemirror";
 import "codemirror/mode/yaml/yaml";
-// tslint:disable-next-line
+// @ts-ignore
 import codeMirrorCSS from "codemirror/lib/codemirror.css";
 import { fireEvent } from "../../../common/dom/fire_event";
 declare global {
@@ -51,6 +51,12 @@ export class HuiYamlEditor extends HTMLElement {
         mode: "yaml",
         tabSize: 2,
         autofocus: true,
+        extraKeys: {
+          Tab: (cm: CodeMirror) => {
+            const spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
+            cm.replaceSelection(spaces);
+          },
+        },
       });
       fireEvent(this, "yaml-changed", { value: this._value });
       this.codemirror.on("changes", () => this._onChange());
diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts
index 5260399b1f..746445bc1c 100644
--- a/src/panels/lovelace/hui-editor.ts
+++ b/src/panels/lovelace/hui-editor.ts
@@ -84,7 +84,7 @@ class LovelaceFullConfigEditor extends LitElement {
         return;
       }
     });
-    yamlEditor.addEventListener("yaml-changed", (e) => {
+    yamlEditor.addEventListener("yaml-changed", () => {
       this._hash = this._hashAdded || this.yamlEditor.value.includes("#");
       if (this._changed) {
         return;