Embedding Theia Frontend Application in an existing application

Hi,

I have a React Application that is a drag-and-drop site-editor. It allows adding components (e.g Text, Buttons) and dragging them across the “stage”, and has many features. It also allows adding & authoring code. I am exploring the idea of replacing the code editing experience and file navigation (and perhaps more features) with theia. The frontend application is React-based, and currently - each part of the IDE is a separate component (i.e there is a navigator component, a monaco-based code-editor component, etc.). I would like to explore the idea of replacing my custom solution with theia, is that achievable?
In order to achieve that, I would need a few things:

  1. To be able to take “parts” of the theia application and attach them to different parts of the dom
  2. To be able to integrate theia components inside the existing application, and not the other way around. After reading a bit, it seems like usually theia is the app, and it can be customized/extended. Is it possible to flip the paradigm and integrate theia’s lego pieces inside an existing app?

I hope my question is clear, don’t hesitate to let me know if it isn’t :slight_smile:
Thanks!

@tomenden thank you for the discussion :+1:

  1. To be able to take “parts” of the theia application and attach them to different parts of the dom

I’m not aware if it is possible to break down the application as you described and attach the different parts to the dom.

  1. To be able to integrate theia components inside the existing application, and not the other way around. After reading a bit, it seems like usually theia is the app, and it can be customized/extended. Is it possible to flip the paradigm and integrate theia’s lego pieces inside an existing app?

I believe the recommended way to integrate a theia-based application into a larger application is through the use of iframes. Please see: https://github.com/eclipse-theia/theia/issues/1045. There may also be a way to do so by subclassing FrontendApplication as referenced here: https://github.com/eclipse-theia/theia/issues/1045#issuecomment-376897989.