How to create and add extension to theia IDE?


I follow the example to create my own theia IDE. It is fine.
Then I want to add an extension to it but really don’t know how to do.

I follow the example and copy the dependencies from package.json to my own theia IDE’s package.json, then using yarn to install the dependencies, it shows a lot of error message…

Does anyone know how to create an extension and add to IDE ? Thanks!

Error message:
“FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory”


[original thread by lihomahowareyou]

could you try to use

export NODE_OPTIONS=--max_old_space_size=4096

before running yarn. Also if you’re trying inside a container/VM maybe you need to increase the memory of this container/VM


As I am very confuse on create and use an extension to my-app.
Is it simply merge the package.json of hello-world-extension to my-app then rebuild with yarn?


I find what is the problem, I should add the extension to package.json and put the extension folder to node_modules folder, thx!!

hello, I want to know is there any instruction about where the custom extension should be put based on my own custom IDE, the article shows little detail about it.

You should follow to develop an extension. It provides your with the proper setup. If you want to publish your extension and consume in the standalone product later then you should follow:

Firstly, I clone, build and run theia from the sources the option 3 in this article
Then, I follow to develop an extension(say hello).
Now,. i tried to add the sayhello extension in the browser example of theia. I added dependency of sayhello extension with its path in my mac in package.json of brower example of theia.
However, I don’t find sayhello function in browser example when I run it.
Is there any requirment of the path of sayhello extension? or other reason?
Thanks a lot for your relply!

Did you rebuild the application?


Could you share the repo please?

thanks a lot for your time

I see quite a few issues with the repo you have linked.

  1. You should use yarn instead of npm. I can see a package-lock.json under version control, so please use yarn. npm is not supported.
  2. This is not the preferred way to develop an extension but well, it could work. But then you have to update the yarn workspace config in your root package.json and include your sayhello folder. Make the changes here.
  3. The structure of your sayhello folder is wrong. Are you aware of the Authoring Theia Extensions documentation? Please read a bit about that.

also, when i run electron of theia source . i found that there is no menu layout, such as file, edit, help, ect.

i am fresh for theia, so have many problems.

It’s a macOS thing. The application menu is not contained in the shell of the application.

Still have problem:(
my steps are as follows:

  1. after i generate hello-world extension using generator, i put the extension in the root of theia source
  2. i update root package.json, add hello-world extension in the workspace
  3. i update package.json of browser-app in example folder, add hello-world extension in the dependency, like “hello-world extension” : “0.0.0”
  4. i run yarn in root, but still return that “can’t find extention in npm registry”
    thanks a lot!

@RichardZeyu the error you’re getting is due to the yarn looking at the npm registry to get your extension and not your local-extension that you’ve added. You should use yarn workspaces to fix the issue and so that your new extension is now linked and discoverable.

thanks, i have understood. It works!

1 Like