diff --git a/src/common/util/compute_rtl.ts b/src/common/util/compute_rtl.ts
index 62be0a1c7e..343ec34307 100644
--- a/src/common/util/compute_rtl.ts
+++ b/src/common/util/compute_rtl.ts
@@ -7,3 +7,7 @@ export function computeRTL(hass: HomeAssistant) {
   }
   return false;
 }
+
+export function computeRTLDirection(hass: HomeAssistant) {
+  return computeRTL(hass) ? "rtl" : "ltr";
+}
diff --git a/src/panels/lovelace/editor/card-editor/hui-card-preview.ts b/src/panels/lovelace/editor/card-editor/hui-card-preview.ts
index b143bff434..949785ab35 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-preview.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-preview.ts
@@ -9,15 +9,20 @@ import { LovelaceCard } from "../../types";
 import { ConfigError } from "../types";
 import { getCardElementTag } from "../../common/get-card-element-tag";
 import { createErrorCardConfig } from "../../cards/hui-error-card";
+import { computeRTL } from "../../../../common/util/compute_rtl";
 
 export class HuiCardPreview extends HTMLElement {
   private _hass?: HomeAssistant;
   private _element?: LovelaceCard;
 
-  set hass(value: HomeAssistant) {
-    this._hass = value;
+  set hass(hass: HomeAssistant) {
+    if (!this._hass || this._hass.language !== hass.language) {
+      this.style.direction = computeRTL(hass) ? "rtl" : "ltr";
+    }
+
+    this._hass = hass;
     if (this._element) {
-      this._element.hass = value;
+      this._element.hass = hass;
     }
   }
 
diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts
index 8d1c201fb9..fcdb102773 100644
--- a/src/panels/lovelace/hui-editor.ts
+++ b/src/panels/lovelace/hui-editor.ts
@@ -99,6 +99,7 @@ class LovelaceFullConfigEditor extends LitElement {
 
         .content {
           height: calc(100vh - 68px);
+          direction: ltr;
         }
 
         hui-code-editor {