How to run Electron apps under Linux's Wayland session like a pro
Tags: productivity, tutorial
Published: 2023-10-01 10:02:17

It's no denying that **[Electron](https://www.electronjs.org/)** is a prevalent tool for building many cross-platform apps, for example, **[Visual Studio Code](https://code.visualstudio.com/)**, **[Signal](https://signal.org/)**, **[Anytype](https://anytype.io/)**, and **[many more](https://www.electronjs.org/apps)**. 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](https://www.phoronix.com/news/Fedora-40-Eyes-No-X11-Session)** in their next release. **[GNOME is in the process of removing X11 session](https://www.phoronix.com/news/GNOME-MR-Drop-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(left), A crispy app window(right)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2w0odogwhibh5lk3xezh.png)

_A blurry app window running on **[XWayland](https://wayland.freedesktop.org/xserver.html)**(left), A crispy app window running on native **[Wayland](https://wayland.freedesktop.org/)** mode(right)_

The screenshot above was taken from **[Anytype](https://anytype.io/)**, 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

![A screenshot showing a missing app icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9sxd6j85d122cmfm5gcf.png)

This issue is due to a missing or incorrect **[StartupWMClass](https://specifications.freedesktop.org/desktop-entry-spec/desktop-entry-spec-latest.html#:~:text=1-,startupwmclass,-If%20specified%2C%20it)** 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](https://github.com/bluesabre/menulibre)** app, as shown in the screenshot below:

![MenuLibre Window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csve60pbfbzafbrhqb1f.png)

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

![A screenshot showing the right app icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjrt9rvbz74xr01btqxd.png)

---

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](https://www.exodus.com/)**. 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](https://unsplash.com/@kageyama?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)** on **[Unsplash](https://unsplash.com/photos/ShWigw7yRmE?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)**