diff --git a/docs/features/software-templates/testing-scaffolder-alpha.md b/docs/features/software-templates/testing-scaffolder-alpha.md
index c0b97e897c..579b3ab873 100644
--- a/docs/features/software-templates/testing-scaffolder-alpha.md
+++ b/docs/features/software-templates/testing-scaffolder-alpha.md
@@ -52,33 +52,54 @@ And this API should be the exact same as the previous Router, so you should be a
 
 ```tsx
 <Route
-    path="/create"
-    element={
-      {/* highlight-remove-next-line */}
-      <ScaffolderPage
-      {/* highlight-add-next-line */}
-      <NextScaffolderPage
-        groups={[
-          {
-            title: 'Recommended',
-            filter: entity =>
-              entity?.metadata?.tags?.includes('recommended') ?? false,
-          },
-        ]}
-      />
-    }
-  >
-    <ScaffolderFieldExtensions>
-      <LowerCaseValuePickerFieldExtension />
-      {/* ... other extensions */}
-    </ScaffolderFieldExtensions>
-    <ScaffolderLayouts>
-      <TwoColumnLayout />
-      {/* ... other layouts */}
-    </ScaffolderLayouts>
-  </Route>
+  path="/create"
+  element={
+    {/* highlight-remove-next-line */}
+    <ScaffolderPage
+    {/* highlight-add-next-line */}
+    <NextScaffolderPage
+      groups={[
+        {
+          title: 'Recommended',
+          filter: entity =>
+            entity?.metadata?.tags?.includes('recommended') ?? false,
+        },
+      ]}
+    />
+  }
+>
+  <ScaffolderFieldExtensions>
+    <LowerCaseValuePickerFieldExtension />
+    {/* ... other extensions */}
+  </ScaffolderFieldExtensions>
+  <ScaffolderLayouts>
+    <TwoColumnLayout />
+    {/* ... other layouts */}
+  </ScaffolderLayouts>
+</Route>
 ```
 
+Optionally, you can chose to run the two side by side by using `FeatureFlags` in your `App.tsx` if you wish, but, we would also recommend duplicating any `CustomFieldExtensions` too as the new `CustomFieldExtensions` might not be compatible with the old form.
+
+```tsx
+<FeatureFlagged with="scaffolder-next-preview">
+  <Route path="/create" element={<NextScaffolderPage />}>
+    <ScaffolderFieldExtensions>
+      <DelayingComponentFieldExtension />
+    </ScaffolderFieldExtensions>
+  </Route>
+</FeatureFlagged>
+<FeatureFlagged without="scaffolder-next-preview">
+  <Route path="/create" element={<ScaffolderPage />}>
+    <ScaffolderFieldExtensions>
+      <DelayingComponentFieldExtension />
+    </ScaffolderFieldExtensions>
+  </Route>
+</FeatureFlagged>
+```
+
+You should then be able to enable the `scaffolder-next-preview` feature flag under `/settings/feature-flags` in Backstage.
+
 ### Make the required changes to your `CustomFieldExtensions`
 
 There's differently named function for creating field extensions part of the `/alpha` exports as these are the ones that can contain breaking changes because of the breaking changes that have been applied in `react-jsonschema-form`.
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index 81e8769951..0c7187c93f 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -208,22 +208,19 @@ const routes = (
         <LightBox />
       </TechDocsAddons>
     </Route>
-
     <FeatureFlagged with="scaffolder-next">
       <Route
         path="/create"
         element={
-          <>
-            <NextScaffolderPage
-              groups={[
-                {
-                  title: 'Recommended',
-                  filter: entity =>
-                    entity?.metadata?.tags?.includes('recommended') ?? false,
-                },
-              ]}
-            />
-          </>
+          <NextScaffolderPage
+            groups={[
+              {
+                title: 'Recommended',
+                filter: entity =>
+                  entity?.metadata?.tags?.includes('recommended') ?? false,
+              },
+            ]}
+          />
         }
       >
         <ScaffolderFieldExtensions>
@@ -234,22 +231,19 @@ const routes = (
         </ScaffolderLayouts>
       </Route>
     </FeatureFlagged>
-
     <FeatureFlagged without="scaffolder-next">
       <Route
         path="/create"
         element={
-          <>
-            <ScaffolderPage
-              groups={[
-                {
-                  title: 'Recommended',
-                  filter: entity =>
-                    entity?.metadata?.tags?.includes('recommended') ?? false,
-                },
-              ]}
-            />
-          </>
+          <ScaffolderPage
+            groups={[
+              {
+                title: 'Recommended',
+                filter: entity =>
+                  entity?.metadata?.tags?.includes('recommended') ?? false,
+              },
+            ]}
+          />
         }
       >
         <ScaffolderFieldExtensions>
@@ -260,7 +254,6 @@ const routes = (
         </ScaffolderLayouts>
       </Route>
     </FeatureFlagged>
-
     <Route path="/explore" element={<ExplorePage />} />
     <Route
       path="/tech-radar"