A modern and lightweight interactive wallpaper application for Linux, built with GTK 3 and WebKit2. Create and customize dynamic wallpapers using HTML, CSS, and JavaScript.
- 🎯 Full HTML5 Rendering - Uses WebKit2 to render any web content as wallpaper
- 🖥️ Layer Shell Integration - Compatible with Wayland and X11 via gtk-layer-shell
- 🌐 Link Navigation - Clicks on links open in the default browser
- ⚙️ Fully Customizable - Customize via HTML/CSS/JS in
~/.config/wallpaper/index.html - 🔧 Lightweight and Fast - Written in C with minimal dependencies
- 📦 Automatic Build - GitHub Actions for compilation and releases
sudo apt-get install -y \
build-essential \
libgtk-3-dev \
libgtk-layer-shell-dev \
libwebkit2gtk-4.0-dev \
pkg-configsudo dnf install -y \
gcc \
gtk3-devel \
gtk-layer-shell-devel \
webkit2gtk3-devel \
pkg-configsudo pacman -S base-devel gtk3 gtk-layer-shell webkit2gtk# Clone or enter the repository
git clone https://github.com/lil-code-team/webwall-gtk.git
cd webwall-gtk
# Compile
gcc wallpaper.c -o ./build/webwall-gtk `pkg-config --cflags --libs gtk+-3.0 gtk-layer-shell-0 webkit2gtk-4.0`
# Run
./build/webwall-gtk# Copy to an accessible location
sudo cp webwall-gtk /usr/local/bin/
# Or for personal use
mkdir -p ~/.local/bin
cp webwall-gtk ~/.local/bin/The default configuration file is loaded from: ~/.config/wallpaper/index.html
-
Create the configuration directory (if it doesn't exist):
mkdir -p ~/.config/wallpaper -
Copy the example file or create a new one:
cp index.example.html ~/.config/wallpaper/index.html -
Edit the
~/.config/wallpaper/index.htmlfile as desired.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
</style>
</head>
<body></body>
</html><!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #0a0e27;
color: #fff;
font-family: monospace;
font-size: 48px;
}
</style>
</head>
<body>
<div id="clock"></div>
<script>
setInterval(() => {
document.getElementById("clock").textContent =
new Date().toLocaleTimeString();
}, 1000);
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
height: 100vh;
background-image: url("file:///path/to/image.jpg");
background-size: cover;
background-position: center;
}
</style>
</head>
<body></body>
</html>Create ~/.config/systemd/user/webwall-gtk.service:
[Unit]
Description=WebWall GTK Wallpaper
After=graphical-session-started.target
PartOf=graphical-session.target
[Service]
Type=simple
ExecStart=%h/.local/bin/webwall-gtk
Restart=on-failure
[Install]
WantedBy=graphical-session.targetEnable with:
systemctl --user enable webwall-gtk
systemctl --user start webwall-gtkCreate ~/.config/autostart/webwall-gtk.desktop:
[Desktop Entry]
Type=Application
Name=WebWall GTK
Comment=Interactive HTML Wallpaper
Exec=/usr/local/bin/webwall-gtk
Hidden=false
NoDisplay=false
X-GNOME-Autostart-enabled=true.
├── wallpaper.c # Main source code
├── webwall-gtk # Compiled executable
├── index.html # Wallpaper configuration (active)
├── index.example.html # Configuration example
├── README.md # This file
├── .github/
│ └── workflows/ # GitHub Actions
│ ├── build-and-release.yml
│ └── validate.yml
└── .gitignore # Git ignore file
gcc -g wallpaper.c -o wallpaper `pkg-config --cflags --libs gtk+-3.0 gtk-layer-shell-0 webkit2gtk-4.0`# Test with example configuration
cp index.example.html ~/.config/wallpaper/index.html
# Run
./wallpaperThis project uses GitHub Actions for:
- ✅ Validating compilation on every push/PR
- 📦 Creating automatic releases for the
mainbranch - 🏷️ Generating Semver versions (v1.0.0, v1.0.1, etc)
See .github/WORKFLOWS.md for more details.
Releases include:
wallpaper- Compiled executableindex.html- Default configurationindex.example.html- Configuration examplewallpaper-src-*.tar.gz- Complete source code
Download from: https://github.com/lil-code-team/webwall-gtk/releases
HOME- Used to locate~/.config/wallpaper/index.html
Example:
HOME=/home/username ./wallpaper- Make sure the
index.htmlfile exists in~/.config/wallpaper/ - Test with a simple HTML file
- Check logs:
journalctl --user -u wallpaper -f(if using systemd)
# Check if dependencies are installed
pkg-config --cflags gtk+-3.0 gtk-layer-shell-0 webkit2gtk-4.0
# Test each library individually
pkg-config --modversion gtk+-3.0
pkg-config --modversion webkit2gtk-4.0- Minimize complex CSS animations
- Use
will-changeselectively - Consider using compressed images
This project is licensed under the MIT License. See the LICENSE file for details.
Contributions are welcome. This project uses a strict release flow:
- Create your feature/fix branch from
develop - Open a PR to
develop - After validation, changes are promoted to
release-candidate - Only PRs from
release-candidateare allowed intomain
- Push to
developgenerates an alpha pre-release version:- Format:
vX.Y.Z.alpha.N
- Format:
- Push to
release-candidategenerates a beta pre-release version:- Format:
vX.Y.Z.beta.A.B.C
- Format:
- Push/merge to
maingenerates a stable release version:- Format:
vX.Y.Z
- Format:
- Target branch
mainonly accepts PRs coming fromrelease-candidate - PR must contain exactly one bump label:
patchorsemver:patchminororsemver:minormajororsemver:major
patch:X.Y.Z->X.Y.(Z+1)minor:X.Y.Z->X.(Y+1).0major:X.Y.Z->(X+1).0.0
- Fork the repository
- Create a branch from
develop(git checkout -b feature/MyFeature develop) - Commit your changes (
git commit -am 'Add some AmazingFeature') - Push your branch (
git push origin feature/MyFeature) - Open a PR to
develop - Promote tested changes to
release-candidate - Open PR from
release-candidatetomainwith one required bump label
- Keep C code clean and readable
- Add comments for complex logic
- Test on both Wayland and X11 before submitting
- Follow the existing code style
Developed by lil-code-team
- 🐛 Issues
- 💬 Discussions
Made with ❤️ by lil-code-team