Add a Widget to another Widget

Hi all,

I’m trying to add a Widget into another Widget. Is there an example in theia that I can refer to?
So far, I havent been able to find a simple example in theia source code.

(I’m not an expert in web or theia development yet …)

Thanks a lot !

@rs the scm-widget is a view container composed of multiple React widgets:, and may be useful to reference for your use-case.

Thank you, @vince-fugnitto. I looked into the ScmWidget code, I could find that the content is rendered using the render() method.
It would be nice if I can get an example Widget whose contents are formed by adding another Widget. … assuming that I have an object of a child Widget and would like to add to a parent Widget.

@rs what issue are you having at the moment trying to compose multiple widgets together?
I believe it is the same idea as composing multiple react components together, and the scm-widget provides an example of injecting widgets into a larger container.

hI @vince-fugnitto, Thank you very much. i’m trying as shown below:
Here is a Widget and has another Widget injected:

class MyParentWidget extends ReactWidget {
    constructor(@inject(ChildWidget) protected childWidget: ChildWidget) {
        /* some init code */

    protected render(): React.ReactNode {
        return <div className={ScmWidget.Styles.MAIN_CONTAINER}>
            <??? HOW TO INTRODUCE THE childwidget object HERE ???>
            <div className='headerContainer' style={{ flexGrow: 0 }}>
                {this.renderInput(input, repository)}

Could you please guide me how to add the childwidget object into the parent Widget?
Thank you for your advise.

You can take a look at the following discussion which describes a similar use-case:

The use-case describes the search-in-workspace which uses the following approach to attach a tree-widget (result list) to the parent:

protected onAfterAttach(msg: Message): void {
        ReactDOM.render(<React.Fragment>{this.renderSearchHeader()}{this.renderSearchInfo()}</React.Fragment>, this.searchFormContainer);
        Widget.attach(this.resultTreeWidget, this.contentNode);
        this.toDisposeOnDetach.push(Disposable.create(() => {

Thank you very much, @vince-fugnitto, i shall refer to that…