docs: improve new frontend system docs for techdocs, scaffolder, and catalog

Expand the TechDocs home page customization section with concrete examples
showing how to override the page:techdocs extension using a frontend module.

Replace the incorrect scaffolder custom step layouts guide with a note that
this feature is not yet supported in the new frontend system.

Restore missing catalog customization docs for columns, actions, table
options, removing filters, and fully custom catalog pages to ensure parity
with the old frontend system guide.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor
This commit is contained in:
Patrik Oldsberg
2026-03-29 23:04:08 +02:00
parent 93cb19813f
commit c9132c223c
3 changed files with 197 additions and 60 deletions
+46 -2
View File
@@ -120,8 +120,52 @@ similar to the one provided by the Catalog plugin. TechDocs also comes with
an alternative grid based layout and panel layout.
Customization of the TechDocs home page in the new frontend system is done by
overriding the default page extension. For details on how to override
extensions, see the [extension overrides](../../frontend-system/architecture/25-extension-overrides.md) documentation.
overriding the `page:techdocs` extension. The TechDocs home page is a standard
page extension created using `PageBlueprint`, which means you can override it
just like any other page extension.
The simplest approach is to create a frontend module that provides a replacement
page extension with the same extension ID. Since the TechDocs page extension has
the ID `page:techdocs`, you can override it by creating a new page extension
under the `techdocs` plugin namespace:
```tsx title="packages/app/src/techdocs/TechDocsHomePage.tsx"
import {
PageBlueprint,
createFrontendModule,
} from '@backstage/frontend-plugin-api';
const customTechDocsPage = PageBlueprint.make({
params: {
path: '/docs',
loader: () =>
import('./CustomTechDocsHome').then(m => <m.CustomTechDocsHome />),
},
});
export default createFrontendModule({
pluginId: 'techdocs',
extensions: [customTechDocsPage],
});
```
Then install the module in your app:
```tsx title="packages/app/src/App.tsx"
import { createApp } from '@backstage/frontend-defaults';
import customTechDocsModule from './techdocs/TechDocsHomePage';
const app = createApp({
features: [customTechDocsModule],
});
export default app.createRoot();
```
You can also use the `.override(...)` method on the original extension if you
want to customize the existing page without fully replacing it. For more details
on extension overrides and the different override patterns available, see the
[extension overrides](../../frontend-system/architecture/25-extension-overrides.md) documentation.
## How to customize the TechDocs reader page?