diff --git a/src/panels/lovelace/ha-panel-lovelace.ts b/src/panels/lovelace/ha-panel-lovelace.ts
index 0335fd20f3..c1cefca507 100644
--- a/src/panels/lovelace/ha-panel-lovelace.ts
+++ b/src/panels/lovelace/ha-panel-lovelace.ts
@@ -257,7 +257,7 @@ class LovelacePanel extends LitElement {
       }
     }
 
-    this._state = "loaded";
+    this._state = this._state === "yaml-editor" ? this._state : "loaded";
     this._setLovelaceConfig(conf, confMode);
   }
 
diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts
index 2f7614b63f..3044b78d0e 100644
--- a/src/panels/lovelace/hui-editor.ts
+++ b/src/panels/lovelace/hui-editor.ts
@@ -11,11 +11,13 @@ import {
   internalProperty,
   LitElement,
   property,
+  PropertyValues,
   TemplateResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { array, assert, object, optional, string, type } from "superstruct";
 import { computeRTL } from "../../common/util/compute_rtl";
+import { deepEqual } from "../../common/util/deep-equal";
 import "../../components/ha-circular-progress";
 import "../../components/ha-code-editor";
 import type { HaCodeEditor } from "../../components/ha-code-editor";
@@ -29,6 +31,7 @@ import {
 import "../../layouts/ha-app-layout";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
+import { showToast } from "../../util/toast";
 import type { Lovelace } from "./types";
 
 const lovelaceStruct = type({
@@ -101,10 +104,37 @@ class LovelaceFullConfigEditor extends LitElement {
     `;
   }
 
-  protected firstUpdated() {
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
     this.yamlEditor.value = safeDump(this.lovelace!.config);
   }
 
+  protected updated(changedProps: PropertyValues) {
+    const oldLovelace = changedProps.get("lovelace") as Lovelace | undefined;
+    if (
+      oldLovelace &&
+      this.lovelace &&
+      oldLovelace.config !== this.lovelace.config &&
+      !deepEqual(oldLovelace.config, this.lovelace.config)
+    ) {
+      showToast(this, {
+        message: this.hass!.localize(
+          "ui.panel.lovelace.editor.raw_editor.lovelace_changed"
+        ),
+        action: {
+          action: () => {
+            this.yamlEditor.value = safeDump(this.lovelace!.config);
+          },
+          text: this.hass!.localize(
+            "ui.panel.lovelace.editor.raw_editor.reload"
+          ),
+        },
+        duration: 0,
+        dismissable: false,
+      });
+    }
+  }
+
   static get styles(): CSSResult[] {
     return [
       haStyle,
diff --git a/src/translations/en.json b/src/translations/en.json
index 11c387e511..3a415b3451 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2654,6 +2654,8 @@
             "save": "Save",
             "unsaved_changes": "Unsaved changes",
             "saved": "Saved",
+            "reload": "Reload",
+            "lovelace_changed": "The Lovelace config was updated, do you want to load the updated config in the editor and lose your current changes?",
             "confirm_remove_config_title": "Are you sure you want to remove your Lovelace UI configuration?",
             "confirm_remove_config_text": "We will automatically generate your Lovelace UI views with your areas and devices if you remove your Lovelace UI configuration.",
             "confirm_unsaved_changes": "You have unsaved changes, are you sure you want to exit?",