diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-template.ts b/src/panels/config/automation/condition/types/ha-automation-condition-template.ts
index 6ada82f152..ed9bc32e82 100644
--- a/src/panels/config/automation/condition/types/ha-automation-condition-template.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-template.ts
@@ -1,6 +1,6 @@
-import "../../../../../components/ha-textarea";
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import "../../../../../components/ha-textarea";
 import type { TemplateCondition } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import { handleChangeEvent } from "../ha-automation-condition-row";
@@ -18,28 +18,27 @@ export class HaTemplateCondition extends LitElement {
   protected render() {
     const { value_template } = this.condition;
     return html`
-      <ha-textarea
-        name="value_template"
-        .label=${this.hass.localize(
+      <p>
+        ${this.hass.localize(
           "ui.panel.config.automation.editor.conditions.type.template.value_template"
         )}
+        *
+      </p>
+      <ha-code-editor
+        .name=${"value_template"}
+        mode="jinja2"
+        .hass=${this.hass}
         .value=${value_template}
-        @input=${this._valueChanged}
+        autocomplete-entities
+        @value-changed=${this._valueChanged}
         dir="ltr"
-        autogrow
-      ></ha-textarea>
+      ></ha-code-editor>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
     handleChangeEvent(this, ev);
   }
-
-  static styles = css`
-    ha-textarea {
-      display: block;
-    }
-  `;
 }
 
 declare global {
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-template.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-template.ts
index 1bc192a231..eeb78b986a 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-template.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-template.ts
@@ -1,5 +1,5 @@
 import "../../../../../components/ha-textarea";
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { TemplateTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
@@ -18,28 +18,27 @@ export class HaTemplateTrigger extends LitElement {
   protected render() {
     const { value_template } = this.trigger;
     return html`
-      <ha-textarea
-        name="value_template"
-        .label=${this.hass.localize(
+      <p>
+        ${this.hass.localize(
           "ui.panel.config.automation.editor.triggers.type.template.value_template"
         )}
+        *
+      </p>
+      <ha-code-editor
+        .name=${"value_template"}
+        mode="jinja2"
+        .hass=${this.hass}
         .value=${value_template}
-        @input=${this._valueChanged}
+        autocomplete-entities
+        @value-changed=${this._valueChanged}
         dir="ltr"
-        autogrow
-      ></ha-textarea>
+      ></ha-code-editor>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
     handleChangeEvent(this, ev);
   }
-
-  static styles = css`
-    ha-textarea {
-      display: block;
-    }
-  `;
 }
 
 declare global {