Recommended way to create top level entries and sections in Preference widget

I am trying to create a custom entry in the tree pane of the Preferences widget. I dug through the code and found a way to make it work.
Though it works, I would like to run it by the community to make sure what I am doing is valid and get some feedback.


import { ContainerModule } from "inversify";
import { PreferenceTreeGenerator as TheiaPreferenceTreeGenerator } from "@theia/preferences/lib/browser/util/preference-tree-generator";
import { createPreferencesWidgetContainer } from "@theia/preferences/lib/browser/views/preference-widget-bindings";
import { PreferencesWidget } from "@theia/preferences/lib/browser/views/preference-widget";
import { WidgetFactory } from "@theia/core/lib/browser";

import { PreferenceTreeGenerator } from "./preferences-tree-generator";

export default new ContainerModule((bind, unbind, isBound, rebind) => {

        .toDynamicValue(({ container }) => ({
            id: PreferencesWidget.ID,
            createWidget: (): PreferencesWidget =>


import { postConstruct, injectable } from "inversify";
import { PreferenceTreeGenerator as TheiaPreferenceTreeGenerator } from "@theia/preferences/lib/browser/util/preference-tree-generator";

export class PreferenceTreeGenerator extends TheiaPreferenceTreeGenerator {
    protected override async init(): Promise<void> {
        this.topLevelCategories.set("custom", "Custom");
        await super.init();

This shows up as expected

Similarly, I plan on adding entries to this.sectionAssignments to show custom child entries under custom.

Hi, I came across your solution as I needed to find something very similar and it seems nice and working for me. Just one note: The Custom category is visible in UI only when there is at least one preference added to it.