Can I embed IDE running on browser to any where in an existing html page?


Although it is running but the auto suggestion (language processing server) is not working properly. So still thinking why it is not working

For which language content assist does not work?

these files are auto-generated and not supposed to be modified


I tried for javascript and Java. it is not working for them but at the same time the theia example I ran through yarn start is working fine. So I need to understand how to enable it.

Maybe because you commented out typescript contribution? It brings smartness for js, ts, jsx and tsx.

As I said you should not mess around with generated code.

but rather include only extensions which you need, use DI to disable unnecessray functionality of these extensions and then webpack merge to mixin custom webpack configuration

try to uncomment this line:

  // .then(function () { return import('@theia/typescript/lib/browser/typescript-frontend-module').then(load) })


Thanks. I am now importing every module present there and restricting the features through my own extension, but still language server protocol is not working for all languages (currently not working for python).
Can you tell me exactly which extension is responsible for that and how to enable for all languages?

For coloring you should include textmate-grammars, it covers popular languages

for language smartness you should add corresponding Theia or VS Code extension

there is @theia/python Theia extension, if you opt to go with VS Code extension you will have to google it


Thanks I got it.


@anton-kosyakov I figured out that while the IDE loading on the browser, there is a loader.js file is getting loaded from the first script internally and the location mentioned it also relative. So can I change the location thorugh some config?

You will need to tell webpack how to resolve vs alias.

by default it is mapped here:


resolve: {
        extensions: ['.js'],
        alias: {
            'vs': path.resolve(outputPath, monacoEditorCorePath),
            'vscode': require.resolve('monaco-languageclient/lib/vscode-compatibility')

I changed the outputPath but it is still compiled as src="./vs/loader.js"

If I want to serve those files in the vs folder from a cdn path then how can I achieve that ?


I found that it is occuring due to loadVsRequire in monaco-loader.ts

can we make it generic or need to write of my own to have custom path?

How would you do it generic?