Hyprland and Waybar

Up to now, I have shown how to get started with Hyprland with the initial configurations.

Now, I’ll show how to install the mainstream status bar in Hyprland: Waybar. Again, I’m going to do that for Arch Linux. As in the previous posts, I will NOT focus on the look and feel configuration.

Before continuing, the Waybar module for keyboard status (Caps lock and Num lock) requires the user to be part of the “input” group. Ensure your user is part of that group by running “groups”. If not, then add it with

Then, you must log out and log in.

First of all, the official package waybar already supports Hyprland (in the past, you had to install an AUR package). So, let’s install the main packages (as usual, you might want to make sure your packages are up-to-date before going on):

Let’s open a terminal and start Waybar

The result is not that good-looking

Waybar heavily relies on Nerd fonts for icons, and, currently, we don’t have any installed (unless you have already installed a few yourself).

The terminal will also be filled with a few warnings about a few missing things (related to Sway) and errors about failures to connect to MPD.

Let’s quit Waybar (close the terminal from where you launched it), and let’s fix the font problem by installing a few font packages:

Let’s start Waybar again, and this time it looks better:

Try to click on the modules and see what happens. For some of them, the information shown will change (e.g., the time will turn into the date).

Let’s quit Waybar again, and let’s start configuring it. We must create the configuration files for Waybar (by default, they are searched for in “~/.config/waybar”). We can do that by using the default ones:

The above command will copy “config” (with the configuration of Waybar modules, i.e., the “boxes” shown in the bar; The configuration uses the JSON file format) and style.css (for the style).

Let’s edit “config”. At the time of writing, this is the initial part of the configuration file:

The initial parts specify the position and other main configurations. This part must be enabled:

Otherwise, Waybar popups render behind the windows

Let’s edit the modules that must be shown on the bar’s left, center, and right. Of course, this is subjective; here, I show a few examples. The modules starting with “sway” are for the Sway Window Manager, while we’re using Hyprland, and we must use the corresponding ones:

You might want to have a look at the Waybar Wiki for an explanation of the modules.

Remember that for each module you mention here, you can have a configuration in the rest of the file, e.g.:

Otherwise, you get the defaults for that module.

Each module, together with its configuration, is documented in the Waybar Wiki.

Let’s focus on the left and center modules. I’ve opened three workspaces, and here’s the result (note the workspace indicator on the left, and on the center, we see the currently focused window’s title, in this case, Firefox):

By editing the “style.css” file, we can change the workspace indicator so that we better highlight the current workspace:

Restart Waybar, and now the current workspace is well distinguished:

The “tray” module is useful to show applications running in the background, like “skype”, “dropbox,” or the “network-manager-applet”.

Let’s now define a custom module, for example, one for showing a menu for locking the screen, logging out, rebooting, etc. To do that, first, we need to install the AUR package “wlogout”:

Let’s say we want to add it as the last module on the right. We edit the Waybar config file like this:

Then, in the same file, before closing the last JSON element, we define such a module (remember to add a comma after the previously existing last module):

Note that I’ve used a character using the installed Nerd font. Of course, you can choose anything you like. The “wlogout” menu will appear when you click on that module. Let’s restart Waybar and verify that:

By editing the “style.css”, you can customize the style of this custom module, e.g.,

When we’re happy with the configuration, we modify the Hyprland configuration file to start Waybar automatically when we enter Hyprland:

Restart Hyprland and Waybar will now appear automatically.

Finally, you can have several Waybar bars, i.e., instances, in different parts of the screen, each one with a different configuration.

For example, let’s create another Waybar configuration for showing a Taskbar to show all the running applications from all workspaces. This can be useful to quickly look at all the running applications and quickly switch to any of them, especially in the presence of many workspaces.

I create another configuration file in the “~/.config/waybar” directory, e.g., “config-taskbar”, with these contents (you could also configure several Waybar instances in the same configuration file, but I prefer to have one configuration file for each instance):

We can call it from the command line as follows:

Here’s the second instance of Waybar on the bottom, showing all the running applications (from all the workspaces):

Unfortunately, in my experience, not all icons for all running applications are correctly shown: for example, for “nemo”, you get an empty icon in the taskbar. You can click it, but visually, you don’t see that… maybe it has something to do with the icon set. I still have to investigate.

You can run both instances when Hyprland starts by putting these two lines in the “hyprland.conf” file:

Stay tuned for more posts about Hyprland. 🙂

7 thoughts on “Hyprland and Waybar

  1. Pingback: Hyprland and wlogout | Lorenzo Bettini

  2. Stephan

    I love your articles! The on-click activate is currently broken in wlr/taskbar though. Looks like a new bug.

    Reply
      1. Stephan

        Awesome! It’s definitely something I would like to have, feels like its the one thing missing from my setup. I’m not brave enough to use the -git versions of most software though so hopefully the next release isn’t too far away.

        Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.