diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/TemplateEditor.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/TemplateEditor.tsx
index f6b936e8af..bd12efa9b8 100644
--- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/TemplateEditor.tsx
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/TemplateEditor.tsx
@@ -13,24 +13,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Divider, IconButton, makeStyles, Tooltip } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
-import RefreshIcon from '@material-ui/icons/Refresh';
-import SaveIcon from '@material-ui/icons/Save';
+import { makeStyles } from '@material-ui/core';
 import React, { useState } from 'react';
 import { FieldExtensionOptions } from '../../../extensions';
 import { TemplateDirectoryAccess } from '../../../lib/filesystem';
-import { FileBrowser } from '../../FileBrowser';
-import {
-  DirectoryEditorProvider,
-  useDirectoryEditor,
-} from './DirectoryEditorContext';
+import { DirectoryEditorProvider } from './DirectoryEditorContext';
 import { DryRunProvider } from './DryRunContext';
 import { DryRunResults } from './DryRunResults';
+import { TemplateEditorBrowser } from './TemplateEditorBrowser';
 import { TemplateEditorForm } from './TemplateEditorForm';
 import { TemplateEditorTextArea } from './TemplateEditorTextArea';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles({
   // Reset and fix sizing to make sure scrolling behaves correctly
   rootWrapper: {
     gridArea: 'pageContent',
@@ -56,21 +50,6 @@ const useStyles = makeStyles(theme => ({
     gridArea: 'browser',
     overflow: 'auto',
   },
-  browserButton: {
-    padding: theme.spacing(1),
-  },
-  browserButtons: {
-    display: 'flex',
-    flexFlow: 'row nowrap',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-  },
-  browserButtonsGap: {
-    flex: '1 1 auto',
-  },
-  browserButtonsDivider: {
-    marginBottom: theme.spacing(1),
-  },
   editor: {
     gridArea: 'editor',
     overflow: 'auto',
@@ -82,7 +61,7 @@ const useStyles = makeStyles(theme => ({
   results: {
     gridArea: 'results',
   },
-}));
+});
 
 export const TemplateEditor = (props: {
   directory: TemplateDirectoryAccess;
@@ -119,60 +98,3 @@ export const TemplateEditor = (props: {
     </DirectoryEditorProvider>
   );
 };
-
-function TemplateEditorBrowser(props: { onClose?: () => void }) {
-  const classes = useStyles();
-  const directoryEditor = useDirectoryEditor();
-  const changedFiles = directoryEditor.files.filter(file => file.dirty);
-
-  const handleClose = () => {
-    if (!props.onClose) {
-      return;
-    }
-    if (changedFiles.length > 0) {
-      // eslint-disable-next-line no-alert
-      const accepted = window.confirm(
-        'Are you sure? Unsaved changes will be lost',
-      );
-      if (!accepted) {
-        return;
-      }
-    }
-    props.onClose();
-  };
-
-  return (
-    <>
-      <div className={classes.browserButtons}>
-        <Tooltip title="Save all files">
-          <IconButton
-            className={classes.browserButton}
-            onClick={() => directoryEditor.save()}
-          >
-            <SaveIcon />
-          </IconButton>
-        </Tooltip>
-        <Tooltip title="Reload directory">
-          <IconButton
-            className={classes.browserButton}
-            onClick={() => directoryEditor.reload()}
-          >
-            <RefreshIcon />
-          </IconButton>
-        </Tooltip>
-        <div className={classes.browserButtonsGap} />
-        <Tooltip title="Close directory">
-          <IconButton className={classes.browserButton} onClick={handleClose}>
-            <CloseIcon />
-          </IconButton>
-        </Tooltip>
-      </div>
-      <Divider className={classes.browserButtonsDivider} />
-      <FileBrowser
-        selected={directoryEditor.selectedFile?.path ?? ''}
-        onSelect={directoryEditor.setSelectedFile}
-        filePaths={directoryEditor.files.map(file => file.path)}
-      />
-    </>
-  );
-}
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/TemplateEditorBrowser.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/TemplateEditorBrowser.tsx
new file mode 100644
index 0000000000..e315319a52
--- /dev/null
+++ b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor/TemplateEditorBrowser.tsx
@@ -0,0 +1,98 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Divider, IconButton, makeStyles, Tooltip } from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+import RefreshIcon from '@material-ui/icons/Refresh';
+import SaveIcon from '@material-ui/icons/Save';
+import React from 'react';
+import { FileBrowser } from '../../FileBrowser';
+import { useDirectoryEditor } from './DirectoryEditorContext';
+
+const useStyles = makeStyles(theme => ({
+  button: {
+    padding: theme.spacing(1),
+  },
+  buttons: {
+    display: 'flex',
+    flexFlow: 'row nowrap',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+  buttonsGap: {
+    flex: '1 1 auto',
+  },
+  buttonsDivider: {
+    marginBottom: theme.spacing(1),
+  },
+}));
+
+/** The local file browser for the template editor */
+export function TemplateEditorBrowser(props: { onClose?: () => void }) {
+  const classes = useStyles();
+  const directoryEditor = useDirectoryEditor();
+  const changedFiles = directoryEditor.files.filter(file => file.dirty);
+
+  const handleClose = () => {
+    if (!props.onClose) {
+      return;
+    }
+    if (changedFiles.length > 0) {
+      // eslint-disable-next-line no-alert
+      const accepted = window.confirm(
+        'Are you sure? Unsaved changes will be lost',
+      );
+      if (!accepted) {
+        return;
+      }
+    }
+    props.onClose();
+  };
+
+  return (
+    <>
+      <div className={classes.buttons}>
+        <Tooltip title="Save all files">
+          <IconButton
+            className={classes.button}
+            onClick={() => directoryEditor.save()}
+          >
+            <SaveIcon />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Reload directory">
+          <IconButton
+            className={classes.button}
+            onClick={() => directoryEditor.reload()}
+          >
+            <RefreshIcon />
+          </IconButton>
+        </Tooltip>
+        <div className={classes.buttonsGap} />
+        <Tooltip title="Close directory">
+          <IconButton className={classes.button} onClick={handleClose}>
+            <CloseIcon />
+          </IconButton>
+        </Tooltip>
+      </div>
+      <Divider className={classes.buttonsDivider} />
+      <FileBrowser
+        selected={directoryEditor.selectedFile?.path ?? ''}
+        onSelect={directoryEditor.setSelectedFile}
+        filePaths={directoryEditor.files.map(file => file.path)}
+      />
+    </>
+  );
+}