diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor.tsx
index d3f376c9ac..169a245af9 100644
--- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor.tsx
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor.tsx
@@ -16,7 +16,6 @@
 import React, {
   Component,
   ReactNode,
-  useEffect,
   useMemo,
   useReducer,
   useState,
@@ -106,6 +105,11 @@ const useStyles = makeStyles(theme => ({
     left: 0,
     right: 0,
   },
+  editorErrorPanel: {
+    color: theme.palette.error.main,
+    lineHeight: 2,
+    margin: theme.spacing(0, 1),
+  },
   editorFloatingButtons: {
     position: 'absolute',
     top: theme.spacing(1),
@@ -219,14 +223,14 @@ function TemplateEditorTextArea(props: { errorText?: string }) {
   const directoryEditor = useDirectoryEditor();
 
   const errorPanel = useMemo(() => {
+    if (!errorText) {
+      return undefined;
+    }
     const div = document.createElement('div');
-    div.style.color = 'red';
+    div.classList.add(classes.editorErrorPanel);
+    div.textContent = errorText;
     return div;
-  }, []);
-
-  useEffect(() => {
-    errorPanel.textContent = errorText ?? '';
-  }, [errorPanel, errorText]);
+  }, [classes, errorText]);
 
   useKeyboardEvent(
     e => e.key === 's' && (e.ctrlKey || e.metaKey),
@@ -244,7 +248,9 @@ function TemplateEditorTextArea(props: { errorText?: string }) {
         height="100%"
         extensions={[
           StreamLanguage.define(yamlSupport),
-          showPanel.of(() => ({ dom: errorPanel, top: true })),
+          ...(errorPanel
+            ? [showPanel.of(() => ({ dom: errorPanel, bottom: true }))]
+            : []),
         ]}
         value={directoryEditor.selectedFile?.content}
         onChange={content =>