Render HTML inside Theia-Application

Hi, I want Theia to display my custom Documentation based on HTML files. I already registered a new MenuAction, but I am struggeling at rendering the HTML files to Theia. I don’t want to open a new browser window or tab I want the content to be rendered inside the Theia-Application.

@paulf98 we already have a preview for HTML files present in the framework, you can certainly inspire yourself from it’s implementation if you require some modifications:

With it, we are able to for a given html file perform an open preview to render the content:

Hi Vince, thank you for the answer! I don’t really know how to use this one, could you explain how I can use this snippet?

@paulf98 if you have the dependency to the mini-browser, the rendering of html-type files should already be supported (when performing an open with... > preview). If your use-case requires you to render the documentation as a preview you can use the same mechanism here (making sure your filetype is supported), and you can do things like add menu items, toolbar items, commands to trigger the rendering of your documentation as a preview.

When I add the mini-browser packahge to my application, theia doen’t start anymore and is stuck in the loading screen. Do you know what could cause this problem? My terminal does not show any errors when I run the application.

@paulf98 I cannot tell without looking at the code, but when starting the application what do you see in the browser’s console? Please be sure to add @theia/mini-browser to your extension and the examples (apps), and ensure that they are all the same version as other @theia dependencies.

I just added the mini-browser as a dependency with same version as the others. I don’t even use the MiniBrowser in my extension at the moment.
The browser console says:

index.js:72 Failed to start the frontend application.
(anonymous) @ index.js:72
index.js:74 Error: Cannot apply @injectable decorator multiple times.
at injectable.js:8
at Reflect.js:540
at Object.<anonymous> (Reflect.js:130)
at a (decorator_utils.js:42)
at Object.t.decorate (decorator_utils.js:55)
at Object.<anonymous> (widget.ts:27)
at n (bootstrap:19)
at Object.<anonymous> (react-widget.tsx:21)
at n (bootstrap:19)
at Object.<anonymous> (status-bar.tsx:21)

You have mismatching @theia/core versions. You can verify it by running yarn why @theia/core. You’re not allowed to add dependencies one by one. The “fix” is to delete the yarn.lock file, and re-run yarn.

1 Like

I made sure that I have the same @theia/core versions in my extensions and the application itself. I also tried deleting the yarn.lock file. After adding the @theia/mini-browser and rerunning yarn the application does not compile anymore. I get many errors mostly Module not found: Error: Can't resolve 'vscode' in ....

What happens if you add "skipLibCheck": true to your tsconfig.json?

@kittaakos in my Extension it is already set to true

Do you have a public repo with your extension I could investigate?

In this version all works fine. As soon as I add the mini-browser it stops working.

Where do you want to add @theia/mini-browser? Do you want to use it as-is from Theia (so it should go into the browser-app/package.json) or do you want to customize it (so it should go to to either mave-doc/package.json or mave-branding/package.json)?

I want to use it in the mave-doc extension. The extension already adds a new menu entry. When the new entry is clicked I want to open the preview window with my custom Documentation (which isn’t in the repo yet).

OK, I could reproduce it. The problem is that you’re referencing the dead @theia/languages from browser-app/package.json.

Please do the following changes:

diff --git a/browser-app/package.json b/browser-app/package.json
index 15d42f2..fe3f446 100644
--- a/browser-app/package.json
+++ b/browser-app/package.json
@@ -6,9 +6,9 @@
                "@theia/core": "latest",
                "@theia/editor": "latest",
                "@theia/filesystem": "latest",
-               "@theia/languages": "latest",
                "@theia/markers": "latest",
                "@theia/messages": "latest",
+               "@theia/mini-browser": "latest",
                "@theia/monaco": "latest",
                "@theia/navigator": "latest",
                "@theia/plugin-dev": "latest",
diff --git a/mave-doc/package.json b/mave-doc/package.json
index 32ce187..8100f15 100644
--- a/mave-doc/package.json
+++ b/mave-doc/package.json
@@ -9,7 +9,8 @@
     "src"
   ],
   "dependencies": {
-    "@theia/core": "latest"
+    "@theia/core": "latest",
+    "@theia/mini-browser": "latest"
   },
   "devDependencies": {
     "rimraf": "latest",

Delete yarn.lock and run yarn.

I recommend you not to put the generated files under version control, such as anything under browser-app/src-gen, and browser-app/gen-webpack.config.js but it’s eventually your call.

I hope this helps.

Wow! Thank you so much it works! Could you explain why @theia/languages causes this error?

@paulf98 That extension got deprecated in v1.4.0 and no longer works in 1.5.0: https://github.com/eclipse-theia/theia/blob/master/CHANGELOG.md#breaking_changes_1.4.0

@mnaglic Thanks!