Seelen UI Setup: Customizing the Windows Desktop with YAML and Tiling

Seelen UI reimagines the Windows desktop experience by replacing the standard taskbar with a fully customizable, YAML-driven layout. Users gain granular control over icons, widgets, and system information displays. Beneath the interface, an integrated tiling window manager automatically snaps windows into place, optimizing the desktop for intensive multitasking. The suite includes an app launcher—reminiscent of Rofi for Linux—that allows users to execute commands and open applications entirely via the keyboard. A built-in media module interfaces with most modern music players, enabling you to pause tracks, skip songs, or view metadata directly from the toolbar. Additionally, the bar surfaces real-time network status, battery life, and notification counts, eliminating the need to navigate through deep system settings panels.

Tech Stack

• Rust: Manages low-level system hooks and performance-critical logic.
• TypeScript: Powers the frontend user interface and handles business logic.
• PowerShell: Utilized for specific Windows-native operations and system interactions.

Project Structure

View Layer The src/apps directory follows a hexagonal architecture. Each view is contained within its own folder as a standalone web page, bundled via esbuild. Most of these views are built using React and Redux for state management.

Shared Code The shared directory contains cross-view utilities, data schemas, and common assets used throughout the application.

Background Logic Located in src/background, this layer employs an event-driven design to manage system events and asynchronous background tasks.

Dev Environment Setup

1. Install the Rust toolchain.
2. Install project dependencies and start the development environment:

   npm install && npm run dev
   

Dependency Management

When developing or testing the slu-lib crate, you can configure the project to point to a local version rather than a remote repository.

Remote branch (Cargo.toml):

[dependencies]
slu-lib = { git = "https://github.com/your-org/slu-lib", branch = "feature/update" }

Local path (Cargo.toml):

[dependencies.seelen-core]
path = "../slu-lib"

Customizing the Toolbar

Configuration File Location The toolbar layout is defined by a YAML file. You can find or create your configuration at the following path: C:\Users\{USER}\AppData\Roaming\com.seelen.seelen-ui\placeholders\YourPlaceholderFile.yml

Basic Example

left:
  - type: text
    template: concat("@", env.USERNAME)
    onClickV2: open(env.USERPROFILE)
    tooltip: '"Open User Folder"'
    style:
      fontSize: 24
      fontWeight: bold

Available Scopes Different item types draw data from specific system contexts:

• Text: Accesses system environment variables and icon fetchers.
• Date: Supports custom format strings and adjustable refresh intervals.
• Battery: Displays power state, capacity, temperature, and estimated time remaining.
• Network: Shows interface status and local/public IP addresses.
• Media: Provides volume control and "now playing" track metadata.

Installation and Updates

Recommended Methods

1. Microsoft Store This provides the latest signed build with automatic updates. Alternatively, you can install it via Winget:

   winget install --id Seelen.SeelenUI
   

2. MSIX Package Signed installers are available on the GitHub Releases page. This method supports portable installations.

3. EXE Installer While this version often receives feature updates more quickly, some antivirus scanners may occasionally flag the executable as a false positive.

Environment Requirements

• Windows 11 includes the WebView2 Runtime by default. Windows 10 users will have it installed automatically via the Seelen UI installer.
• Microsoft Edge must remain installed on the system. Certain "debloating" scripts that remove Edge will break WebView2 functionality, preventing the UI from rendering.