A Quick Guide to Hyprland
Pernah dengar Hyprland?
Iya, “Hyprland”, bukan Hyperland…
Hyprland adalah Dekstop Environment (DE) yang mengusung konsep Dynamic Tiling Window Manager yang ditulis dengan bahasa C++. Salah satu yang membuat Hyprland digadang-gadang sebagai DE “futuristik” adalah karena menggunakan wayland sebagai display server protocol (compositor) -nya.1
-
Desktop Environment (DE): desktop environment (DE) adalah sebuah sistem Graphical User Interface (GUI) yang terdiri dari kumpulan program tertentu (WM, File Manager, Panel, App Launcher, etc) sehingga memudahkan interaksi antara kita (user) dengan komputer. Beberapa contoh DE linux yang populer diantaranya ada KDE Plasma, GNOME, XFCE, MATE, Cosmic, dan masih banyak lagi.
-
Window Manager (WM): window manager adalah sebuah sistem atau pengaturan yang mengelola penempatan dan tampilan dari “window” yang terdapat di Graphical User Interface (GUI). WM biasanya juga sudah ada di dalam DE, atau bisa juga berdiri sendiri tanpa DE (standalone). Secara umum, ada 3 jenis WM:
a. Stacking (floating): Windows dapat ditumpuk satu dengan lainnya.
b. Tiling: Windows tidak dapat ditumpuk sehingga tersusun bersebelahan.
c. Dynamic: Windows fleksibel, bisa dibuat stacking (floating) dan juga tiling. -
Display Server: display server adalah inti dari sistem grafis (GUI di Linux). Ia bertugas untuk mengelola interaksi antara kita (user) dengan aplikasi yang berbasis GUI. Itu artinya, tanpa display server, kita tidak dapat menjalankan DE & WM dan hanya dapat berinteraksi via CLI di mode tty. Dua jenis display server yang populer digunakan saat ini:
a. X11: sudah lama ada (sejak 1980-an), kompleks, relatif lebih lambat, compositing (efek visual) terpisah, tapi kompatibilitasnya dengan software luas.
b. Wayland: baru ada (sekitar 2010-an), sederhana, relatif lebih cepat & responsif, compositing bawaan, tapi kompatibilitasnya masih belum banyak didukung karena sedang transisi.
Referensi:
Instalasi
Sebelum melakukan instalasi Hprland, saya sarankan di laptop atau komputer kalian sudah ter-install DE yang lebih “stabil” terlebih dahulu, seperti KDE Plasma, GNOME, atau Xfce agar tidak perlu meng-install paket-paket penting lain seperti File Manager, Terminal, etc.
| Distro | Command |
|---|---|
| Debian/Ubuntu | sudo apt install hyprland kitty wofi waybar waypaper swww |
| Arch Linux | yay -Sy hyprland kitty wofi waybar waypaper swww |
| Opensuse | sudo zypper in hyprland kitty wofi waybar waypaper swww |
| Fedora | sudo dnf install hyprland kitty wofi waybar waypaper swww |
Fyi, paket hyprland di Debian sudah outdated. Jadi, disarankan untuk meng-install Hyprland secara manual.
Berikut tutorialnya:
https://wiki.hyprland.org/Getting-Started/Installation/#manual-manual-build
Catatan:
kittyadalah terminal default yang disarankan oleh Hyprland.wofiadalah application launcer.waybaradalah panel yang berfungsi sebagai status bar.waypaperadalah tools untuk mengganti wallpaper.swwwadalah wallpaper engine. Salah satu fungsinya adalah untuk menambahkan efek visualisasi ketika wallpaper berganti.
Btw, saya pernah menulis tentang konfigurasi kitty juga di sini:

Configuration
File konfigurasi hyprland tersimpan di:
~/.config/hypr/hyprland.conf# ######################################################################################## AUTOGENERATED HYPRLAND CONFIG.# PLEASE USE THE CONFIG PROVIDED IN THE GIT REPO /examples/hyprland.conf AND EDIT IT,# OR EDIT THIS ONE ACCORDING TO THE WIKI INSTRUCTIONS.# #######################################################################################
# autogenerated = 1 # remove this line to remove the warning
# This is an example Hyprland config file.# Refer to the wiki for more information.# https://wiki.hyprland.org/Configuring/
# Please note not all available settings / options are set here.# For a full list, see the wiki
# You can split this configuration into multiple files# Create your files separately and then link them to this file like this:# source = ~/.config/hypr/myColors.conf
################### MONITORS ###################
# See https://wiki.hyprland.org/Configuring/Monitors/monitor=,preferred,auto,auto
monitor = eDP-1, 1920x1080@60, 0x0, 1#monitor = eDP-1, 1366x768@60, 0x0, 1
###################### MY PROGRAMS ######################
# See https://wiki.hyprland.org/Configuring/Keywords/
# Set programs that you use$terminal = kitty$fileManager = dolphin$menu = wofi --show drun
#################### AUTOSTART ####################
# Autostart necessary processes (like notifications daemons, status bars, etc.)# Or execute your favorite apps at launch like this:
# exec-once = $terminal# exec-once = nm-applet &# exec-once = waybar & hyprpaper
exec-once = waybar#exec-once = waypaper --wallpaper /home/wildan/Pictures/pexels-kaboompics-5815.jpgexec-once = waypaper --restore
################################ ENVIRONMENT VARIABLES ################################
# See https://wiki.hyprland.org/Configuring/Environment-variables/
env = XCURSOR_SIZE,24env = HYPRCURSOR_SIZE,24
###################### PERMISSIONS ######################
# See https://wiki.hyprland.org/Configuring/Permissions/# Please note permission changes here require a Hyprland restart and are not applied on-the-fly# for security reasons
# ecosystem {# enforce_permissions = 1# }
# permission = /usr/(bin|local/bin)/grim, screencopy, allow# permission = /usr/(lib|libexec|lib64)/xdg-desktop-portal-hyprland, screencopy, allow# permission = /usr/(bin|local/bin)/hyprpm, plugin, allow
######################## LOOK AND FEEL ########################
# Refer to https://wiki.hyprland.org/Configuring/Variables/
# https://wiki.hyprland.org/Configuring/Variables/#generalgeneral { gaps_in = 5 gaps_out = 20
border_size = 2
# https://wiki.hyprland.org/Configuring/Variables/#variable-types for info about colors col.active_border = rgba(33ccffee) rgba(00ff99ee) 45deg col.inactive_border = rgba(595959aa)
# Set to true enable resizing windows by clicking and dragging on borders and gaps resize_on_border = false
# Please see https://wiki.hyprland.org/Configuring/Tearing/ before you turn this on allow_tearing = false
layout = dwindle}
# https://wiki.hyprland.org/Configuring/Variables/#decorationdecoration { rounding = 10 rounding_power = 2
# Change transparency of focused and unfocused windows active_opacity = 1.0 inactive_opacity = 1.0
shadow { enabled = true range = 4 render_power = 3 color = rgba(1a1a1aee) }
# https://wiki.hyprland.org/Configuring/Variables/#blur blur { enabled = true size = 3 passes = 1
vibrancy = 0.1696 }}
# https://wiki.hyprland.org/Configuring/Variables/#animationsanimations { enabled = yes, please :)
# Default animations, see https://wiki.hyprland.org/Configuring/Animations/ for more
bezier = easeOutQuint,0.23,1,0.32,1 bezier = easeInOutCubic,0.65,0.05,0.36,1 bezier = linear,0,0,1,1 bezier = almostLinear,0.5,0.5,0.75,1.0 bezier = quick,0.15,0,0.1,1
animation = global, 1, 10, default animation = border, 1, 5.39, easeOutQuint animation = windows, 1, 4.79, easeOutQuint animation = windowsIn, 1, 4.1, easeOutQuint, popin 87% animation = windowsOut, 1, 1.49, linear, popin 87% animation = fadeIn, 1, 1.73, almostLinear animation = fadeOut, 1, 1.46, almostLinear animation = fade, 1, 3.03, quick animation = layers, 1, 3.81, easeOutQuint animation = layersIn, 1, 4, easeOutQuint, fade animation = layersOut, 1, 1.5, linear, fade animation = fadeLayersIn, 1, 1.79, almostLinear animation = fadeLayersOut, 1, 1.39, almostLinear animation = workspaces, 1, 1.94, almostLinear, fade animation = workspacesIn, 1, 1.21, almostLinear, fade animation = workspacesOut, 1, 1.94, almostLinear, fade}
# Ref https://wiki.hyprland.org/Configuring/Workspace-Rules/# "Smart gaps" / "No gaps when only"# uncomment all if you wish to use that.# workspace = w[tv1], gapsout:0, gapsin:0# workspace = f[1], gapsout:0, gapsin:0# windowrule = bordersize 0, floating:0, onworkspace:w[tv1]# windowrule = rounding 0, floating:0, onworkspace:w[tv1]# windowrule = bordersize 0, floating:0, onworkspace:f[1]# windowrule = rounding 0, floating:0, onworkspace:f[1]
# See https://wiki.hyprland.org/Configuring/Dwindle-Layout/ for moredwindle { pseudotile = true # Master switch for pseudotiling. Enabling is bound to mainMod + P in the keybinds section below preserve_split = true # You probably want this}
# See https://wiki.hyprland.org/Configuring/Master-Layout/ for moremaster { new_status = master}
# https://wiki.hyprland.org/Configuring/Variables/#miscmisc { force_default_wallpaper = -1 # Set to 0 or 1 to disable the anime mascot wallpapers disable_hyprland_logo = false # If true disables the random hyprland logo / anime girl background. :(}
################ INPUT ################
# https://wiki.hyprland.org/Configuring/Variables/#inputinput { kb_layout = us kb_variant = kb_model = kb_options = kb_rules =
follow_mouse = 1
sensitivity = 0 # -1.0 - 1.0, 0 means no modification.
touchpad { natural_scroll = false }}
# https://wiki.hyprland.org/Configuring/Variables/#gesturesgestures { workspace_swipe = true}
# Example per-device config# See https://wiki.hyprland.org/Configuring/Keywords/#per-device-input-configs for moredevice { name = epic-mouse-v1 sensitivity = -0.5}
###################### KEYBINDINGS ######################
# See https://wiki.hyprland.org/Configuring/Keywords/$mainMod = SUPER # Sets "Windows" key as main modifier
# Example binds, see https://wiki.hyprland.org/Configuring/Binds/ for morebind = $mainMod, Q, exec, $terminalbind = $mainMod, C, killactive,bind = $mainMod, M, exit,bind = $mainMod, E, exec, $fileManagerbind = $mainMod, V, togglefloating,bind = $mainMod, R, exec, $menubind = $mainMod, P, pseudo, # dwindlebind = $mainMod, J, togglesplit, # dwindlebind = $mainMod, F, exec, $menu
# Move focus with mainMod + arrow keysbind = $mainMod, left, movefocus, lbind = $mainMod, right, movefocus, rbind = $mainMod, up, movefocus, ubind = $mainMod, down, movefocus, d
# Switch workspaces with mainMod + [0-9]bind = $mainMod, 1, workspace, 1bind = $mainMod, 2, workspace, 2bind = $mainMod, 3, workspace, 3bind = $mainMod, 4, workspace, 4bind = $mainMod, 5, workspace, 5bind = $mainMod, 6, workspace, 6bind = $mainMod, 7, workspace, 7bind = $mainMod, 8, workspace, 8bind = $mainMod, 9, workspace, 9bind = $mainMod, 0, workspace, 10
# Move active window to a workspace with mainMod + SHIFT + [0-9]bind = $mainMod SHIFT, 1, movetoworkspace, 1bind = $mainMod SHIFT, 2, movetoworkspace, 2bind = $mainMod SHIFT, 3, movetoworkspace, 3bind = $mainMod SHIFT, 4, movetoworkspace, 4bind = $mainMod SHIFT, 5, movetoworkspace, 5bind = $mainMod SHIFT, 6, movetoworkspace, 6bind = $mainMod SHIFT, 7, movetoworkspace, 7bind = $mainMod SHIFT, 8, movetoworkspace, 8bind = $mainMod SHIFT, 9, movetoworkspace, 9bind = $mainMod SHIFT, 0, movetoworkspace, 10
# Example special workspace (scratchpad)bind = $mainMod, S, togglespecialworkspace, magicbind = $mainMod SHIFT, S, movetoworkspace, special:magic
# Scroll through existing workspaces with mainMod + scrollbind = $mainMod, mouse_down, workspace, e+1bind = $mainMod, mouse_up, workspace, e-1
# Move/resize windows with mainMod + LMB/RMB and draggingbindm = $mainMod, mouse:272, movewindowbindm = $mainMod, mouse:273, resizewindow
# Laptop multimedia keys for volume and LCD brightnessbindel = ,XF86AudioRaiseVolume, exec, wpctl set-volume -l 1 @DEFAULT_AUDIO_SINK@ 5%+bindel = ,XF86AudioLowerVolume, exec, wpctl set-volume @DEFAULT_AUDIO_SINK@ 5%-bindel = ,XF86AudioMute, exec, wpctl set-mute @DEFAULT_AUDIO_SINK@ togglebindel = ,XF86AudioMicMute, exec, wpctl set-mute @DEFAULT_AUDIO_SOURCE@ togglebindel = ,XF86MonBrightnessUp, exec, brightnessctl -e4 -n2 set 5%+bindel = ,XF86MonBrightnessDown, exec, brightnessctl -e4 -n2 set 5%-
# Requires playerctlbindl = , XF86AudioNext, exec, playerctl nextbindl = , XF86AudioPause, exec, playerctl play-pausebindl = , XF86AudioPlay, exec, playerctl play-pausebindl = , XF86AudioPrev, exec, playerctl previous
################################# WINDOWS AND WORKSPACES #################################
# See https://wiki.hyprland.org/Configuring/Window-Rules/ for more# See https://wiki.hyprland.org/Configuring/Workspace-Rules/ for workspace rules
# Example windowrule# windowrule = float,class:^(kitty)$,title:^(kitty)$
# Ignore maximize requests from apps. You'll probably like this.windowrule = suppressevent maximize, class:.*
# Fix some dragging issues with XWaylandwindowrule = nofocus,class:^$,title:^$,xwayland:1,floating:1,fullscreen:0,pinned:0File konfigurasi waypaper tersimpan di:
~/.config/waypaper/config.ini[Settings]language = enfolder = ~/Picturesmonitors = Allwallpaper = ~/Pictures/leaves.jpgshow_path_in_tooltip = Truebackend = swwwfill = fillsort = namecolor = #ffffffsubfolders = Falseall_subfolders = Falseshow_hidden = Falseshow_gifs_only = Falsezen_mode = Falsepost_command =number_of_columns = 3swww_transition_type = outerswww_transition_step = 90swww_transition_angle = 0swww_transition_duration = 2swww_transition_fps = 60mpvpaper_sound = Falsempvpaper_options =use_xdg_state = FalseFile konfigurasi waybar tersimpan di:
~/.config/waybar/config.jsoncFile config ini “nyolong” dari repo berikut:
{ "layer": "top", "position": "top", "height": 32, "spacing": 0, "modules-left": [ "hyprland/workspaces", "tray", "custom/lock", "custom/reboot", "custom/power" ], "modules-center": ["hyprland/window"], "modules-right": [ "network", "battery", "bluetooth", "pulseaudio", "backlight", "custom/temperature", "memory", "cpu", "clock" ], "hyprland/workspaces": { "disable-scroll": false, "all-outputs": true, "format": "{icon}", "on-click": "activate", "persistent-workspaces": { "*":[1,2,3,4,5,6,7,8,9] }, "format-icons": { "1": "", "2": "", "3": "", "4": "", "5": "", "6": "", "7": "", "8": "", "9": "", "default": "" } }, "custom/lock": { "format": "<span color='#00FFFF'> </span>", "on-click": "hyprlock", "tooltip": true, "tooltip-format": "锁屏" }, "custom/reboot": { "format": "<span color='#FFD700'> </span>", "on-click": "systemctl reboot", "tooltip": true, "tooltip-format": "重启" }, "custom/power": { "format": "<span color='#FF4040'> </span>", "on-click": "systemctl poweroff", "tooltip": true, "tooltip-format": "关机" }, "network": { "format-wifi": "<span color='#00FFFF'> </span> {essid} ", "format-ethernet": "<span color='#7FFF00'> </span>Wired ", "tooltip-format": "<span color='#FF1493'> </span>{bandwidthUpBytes} <span color='#00BFFF'> </span>{bandwidthDownBytes}", "format-linked": "<span color='#FFA500'> </span>{ifname} (No IP) ", "format-disconnected": "<span color='#FF4040'> </span>Disconnected ", "format-alt": "<span color='#00FFFF'> </span>{signalStrength}% ", "interval": 1 }, "battery": { "states": { "warning": 30, "critical": 15 }, "format": "<span color='#28CD41'> {icon} </span>{capacity}% ", "format-charging": " {capacity}%", "interval": 1, "format-icons": ["", "", "", "", ""], "tooltip": true }, "pulseaudio": { "format": "<span color='#00FF7F'>{icon}</span> {volume}% ", "format-muted": "<span color='#FF4040'> </span>0% ", "format-icons": { "headphone": "<span color='#BF00FF'> </span>", "hands-free": "<span color='#BF00FF'> </span>", "headset": "<span color='#BF00FF'> </span>", "phone": "<span color='#00FFFF'> </span>", "portable": "<span color='#00FFFF'> </span>", "car": "<span color='#FFA500'> </span>", "default": [ "<span color='#808080'> </span>", "<span color='#FFFF66'> </span>", "<span color='#00FF7F'> </span>" ] }, "on-click-right": "pavucontrol -t 3", "on-click": "pactl -- set-sink-mute 0 toggle", "tooltip": true, "tooltip-format": "当前系统声音: {volume}%" }, "custom/temperature": { "exec": "sensors | awk '/^Package id 0:/ {print int($4)}'", "format": "<span color='#FFA500'> </span> {}°C ", "interval": 5, "tooltip": true, "tooltip-format": "当前 CPU 温度: {}°C" }, "memory": { "format": "<span color='#8A2BE2'> </span> {used:0.1f}G/{total:0.1f}G ", "tooltip": true, "tooltip-format": "当前内存占比: {used:0.2f}G/{total:0.2f}G" }, "cpu": { "format": "<span color='#FF9F0A'> </span> {usage}% ", "tooltip": true }, "clock": { "interval": 1, "timezone": "Asia/Jakarta", "format": "<span color='#BF00FF'> </span> {:%H:%M} ", "tooltip": true, "tooltip-format": "{:L%Y 年 %m 月 %d 日, %A}" }, "tray": { "icon-size": 17, "spacing": 6 }, "backlight": { "device": "intel_backlight", "format": "<span color='#FFD700'>{icon}</span>{percent}% ", "tooltip": true, "tooltip-format": "当前屏幕亮度: {percent}%", "format-icons": [ "<span color='#696969'> </span>", // 暗 - 深灰 "<span color='#A9A9A9'> </span>", // 中 - 灰 "<span color='#FFFF66'> </span>", // 亮 - 柠檬黄 "<span color='#FFD700'> </span>" // 最亮 - 金色 ] }, "bluetooth": { "format": "<span color='#00BFFF'> </span>{status} ", "format-connected": "<span color='#00BFFF'> </span>{device_alias} ", "format-connected-battery": "<span color='#00BFFF'> </span>{device_alias}{device_battery_percentage}% ", "tooltip-format": "{controller_alias}\t{controller_address}\n\n{num_connections} connected", "tooltip-format-connected": "{controller_alias}\t{controller_address}\n\n{num_connections} connected\n\n{device_enumerate}", "tooltip-format-enumerate-connected": "{device_alias}\t{device_address}", "tooltip-format-enumerate-connected-battery": "{device_alias}\t{device_address}\t{device_battery_percentage}%" }}Catatan:
Tidak seperti hyprland dan waypaper, file konfigurasi waybar tidak otomatis ada setelah instalasi sehingga harus dibuat manual terlebih dahulu:
mkdir ~/.config/waybartouch ~/.config/waybar/config.jsoncSaat pertama kali masuk ke session Hyprland, kita tidak akan melihat apapun selain wallpaper bawaan Hyprland. Jadi, ada beberapa hal yang perlu kita konfigurasi agar Hyprland kita menjadi lebih baik, secara fungsional maupun estetis.
Oleh karena itu, kita perlu tahu setidaknya 2 keybind penting:
Super + Q: Membuka terminal (kitty)
Super + C: Menutup jendela aplikasi aktif
Super + F: Membuka application launcher (wofi)
Monitor resolution
Kita perlu mengganti / menyesuaikan resolusi monitor dengan resolusi bawaan Hyprland.
Caranya mudah, kita hanya perlu mengganti baris berikut di konfigurasi Hyprland (~/.config/hypr/hyprland.conf):
monitor = name, resolution, position, scaleContohnya:
monitor = DP-1, 1920x1080@144, 0x0, 1Ini artinya, kita akan mengganti resolusi monitor dengan nama “DP-1” ke 1920x1080 dengan 144 Hz, mulai di titik 0x0 dari kiri, dengan skala 1 (unscaled).2
Untuk mengetahui informasi tentang monitor:
hyprctl monitorsWaybar activation
Untuk mengaktifkan waybar agar muncul seetiap kali masuk ke sesi Hyprland, kita perlu menambahkan baris berikut di file konfigurasi Hyprland (~/.config/hypr/hyprland.conf):
exec-once = waybarUntuk mengkonfigursi waybar, kalian bisa langsung “mengotak-atiknya” di ~/.config/waybar/config.jsonc, atau melihat (memakai) file konfigurasi orang lain di internet. Saya tidak akan membahasnya lebih jauh di sini.
Wallpaper settings
Untuk mengganti wallpaper, kita dapat menjalankan waypaper dan langsung menggantinya dari aplikasi GUI yang muncul tersebut:
waypaperKita juga bisa mengganti pengaturannya via file konfigurasi langsung di ~/.config/waypaper/config.ini.
Keybindings
Beberapa keybindings (shortcut) juga dapat diganti sesuai dengan preferensi masing-masing di bagian “#Keybindings” di dalam file konfigurasi Hyprland (~/.config/hypr/hyprland.conf).
Artikel ini ditulis dengan DE Hyprland (Archlinux, btw):


Footnotes
Support & Share
If this article helped you, please share or support!











