How can I hide the Toolbar, Right side, and bottom panel in theia IDE

I trying to run a vscode plugin on theia and I also want the vscode extension to run as stand alone web application. So i wanted to know how can I hide the right side, bottom panel and the toolbar. The ultimate goal is to have the vscode extension.

[original thread by Sumit Ashok Ghewade]


the vscode extension to run as stand alone web application

sorry, did not get it

to hide the left side panel you need Theia extension, there is ApplicationShell object on it you can call collapsePanel(‘left’)

[Sumit Ashok Ghewade]

So let me rephrase it i have a vscode plugin and wanted it to run on Theia IDE. So i used the steps mentioned in the following link to install the vscode plugin in Theia IDE.

[Sumit Ashok Ghewade]

So here I basically want the vscode plugin to run as a browser application. Which means that i don’t want the right side panel, bottom panel and toolbar. the application only must consist of a full screen vscode plugin with left side panel to access the folders. ( Sorry for the wrong question earlier )

[Sumit Ashok Ghewade]

So my current screen looks like this, its also having top,right,bottom,left panels and also the tab in which the vscode plugin is opened.

[Sumit Ashok Ghewade]

My goal is to have something like this. With no top,right,bottom,left panels and also i don’t want the tab to be displayed in which the application is running. I hope this pictures help.

you will need to customize ApplicationShell and StausBar with a custom theia extenison to remove everything

here how to create a custom theia extension:

[Sumit Ashok Ghewade]

Do i have to comment out the code in ApplicationShell and StatusBar. And how do i know which part of the code to customize. I’m fairly new to Theia, can you please provide an explanation (steps) of what should be done exactly.

[Sumit Ashok Ghewade]

I have created the theia hello extension but when i was trying to change the name of Say Hello i was unable to do that. How can I Change the name of the Say Hello?, How can I check instantly the changes that i have made to the theia hello extension?. Thank you so much for answering previous question. I’m kind of stuck on this issue.

[Sumit Ashok Ghewade]

For checking the changes i have made i’m yarn prepare for browser-app and yarn build for hello-extension. But nothing seems to help, even the change of name of Say Hello doesn’t seems to reflect.


For checking the changes run yarn watch in your extension directory and browser-app then yarn start. When you save just reload the browser and the changes will be applied.

@ghewadesumit you need to make sure to successfully build your custom extension, and the browser-app or electron-app to see the changes. Only building the custom extension is insufficient as the browser-app(or electron-app) will not pick up the updates.

You may also choose to use the watch workflow if you prefer.

You will need to subclass them and override some methods. You will need to debug which, i don’t know anyone tried it before. maybe @alex-tugarev

I create a CustomApplicationShell, and extends ApplicationShell, then How do i bind ApplicationShell to my shell class?

@christlee1989 you will need to rebind it through inversify, for example: Custom filetype icon.

ok, it works , thx

1 Like