How to run Electron apps under Linux's Wayland session like a pro

It's no denying that Electron is a prevalent tool for building many cross-platform apps, for example, Visual Studio Code, Signal, Anytype, and many more. However, Electron has many issues, especially for Linux users running in the Wayland session with fractional scaling enabled. This is a considerable issue because Wayland has been the default desktop session on all major Linux distros for a while now. Moreover, now some big names like Fedora will drop X11 session in their next release. GNOME is in the process of removing X11 session support also. Therefore, this is a big issue considering Electron issues on the Wayland session. Without further ado, let's find out what these issues are, and how to fix them.

A blurry app window

A blurry app window running on XWayland(left), A crispy app window running on native Wayland mode(right)

The screenshot above was taken from Anytype, my favorite Electron app. As anyone would have guessed, I wouldn't want to look at a blurry app all day long, especially, when I use a high-resolution display. The bad news is that all Electron apps run in XWayland mode by default. However, the good news is that we can fix this issue very easily.

To run any Electron app in native Wayland mode, for instance, if I want to run Anytype app in native Wayland mode, I can do this by:

./Anytype-0.35.2.AppImage --enable-features=UseOzonePlatform,WaylandWindowDecorations --ozone-platform-hint=auto

Running an Electron app, Anytype 0.35.2 in this case, packaging in the AppImage format.

• --enable-features= for telling an Electron app to use experimental features like you would in Chromium browsers.

• UseOzonePlatform for enabling the Chromium's ozone-platform feature.

• WaylandWindowDecorations for enabling the app's window border. Otherwise, the app won't render the window border in native Wayland mode.

• --ozone-platform-hint=auto for telling the app to use the appropriate ozone-platform depending on the user's current session. If the user running in a Wayland session, it will use --ozone-platform=wayland.

The app launched with an incorrect app icon

This issue is due to a missing or incorrect StartupWMClass in the app's desktop file. You can fix this easily by changing the StartupWMClass to the correct value, which can be found by hovering at the app's generic icon, as shown in the screenshot above.

In this case, anytype is the correct value, but the default desktop file (inside the app's AppImage) is not set or set with an incorrect value (it's set to Anytype in this case), causing GNOME to show the incorrect app icon.

You can create/change the StartupWMClass value easily by using the MenuLibre app, as shown in the screenshot below:

After this, when you launch the app, it will have the correct app icon, as shown in the screenshot below:

Please note that these 2 issues above are the most common ones, especially the first issue which you will definitely face 100% of the time. And there's a caveat here; not every Electron app will let you run with Chromium flags, for example, Exodus Wallet. If the Electron app you are using has a web version, AKA PWA, please use that instead, as it's faster and more secure than the Electron app, i.e. most if not all Electron apps are running with an outdated Electron version. Moreover, you can also use your browser extensions in the PWA app, but not in the Electron app.

I hope this helps, bye 💨

Cover Photo by Yuichi Kageyama on Unsplash