Web Console - UNITRONIX/BetterDesk GitHub Wiki

Web Console

The BetterDesk Web Console is a Node.js (Express.js) management panel accessible at http://your-server:5000.

Dashboard

The dashboard provides an overview of your BetterDesk deployment:

  • Total Devices — Count of all registered devices
  • Online Devices — Currently connected, with real-time WebSocket updates
  • Server Uptime — Go server uptime
  • System Info — Hostname, OS, Node.js/Go versions

Desktop Widget Dashboard

The dashboard supports an OS-style desktop mode with:

  • 20+ draggable, resizable widgets
  • Windows 11-style snap layouts (6 predefined zone layouts)
  • Aero Shake, edge-snap, maximize hover picker
  • Dark/light/auto themes with glassmorphism
  • Widget groups (tabbed containers)
  • 4 built-in presets (Monitoring, Helpdesk, Minimal, Developer)
  • Full-screen login screen with TOTP 2FA support

See Desktop Dashboard for the complete widget reference.

Devices Page

Device List

The devices page shows all registered RustDesk clients in a responsive table:

Column Description
ID RustDesk client ID (numeric)
Hostname Device hostname (from sysinfo)
Type Device type (desktop, server, agent, etc.)
Platform OS (Windows, Linux, macOS, Android, iOS)
Last Online Last heartbeat timestamp
Status Online/Degraded/Critical/Offline with colored dot
Actions Kebab menu (⋮) with device operations

Filters

  • Search — Filter by ID, hostname, platform, or tags
  • Status filter — Segmented pills: All / Online / Offline
  • Folder filter — Horizontal scrollable folder chips

Device Actions (Kebab Menu)

Action Description
Edit Change device notes, tags, user assignment
Connect Launch RustDesk connection (URI handler)
Rename Change the device ID
Delete Soft-delete the device
Revoke Delete + block ID + disconnect active sessions
Ban Block the device from reconnecting
Wake on LAN Send WOL magic packet (offline devices)

Folders

Organize devices into folders:

  • Create/rename/delete folders
  • Drag-and-drop devices between folders
  • Folder counts update automatically

Real-time Status Updates

Device status updates in real-time via WebSocket push from the Go server event bus. No page reload needed — green/red dots update in-place.

Device Detail

Click a device row to open the detail panel:

Info Tab

  • Device ID, hostname, platform, version
  • IP address, last online timestamp
  • Tags, notes, user assignment
  • Connect button (RustDesk URI handler)

Hardware Tab

  • CPU model, cores, architecture
  • Total RAM, total disk
  • OS version, kernel

Metrics Tab

  • Live CPU, memory, disk gauges (animated bars)
  • Historical charts (last 100 data points)
  • Data from POST /api/heartbeat with metrics

Users Page

Manage console users with four roles. See User Management for details.

Settings Page

Server Configuration

  • View server address and public key
  • Generate QR codes for client setup
  • Copy configuration strings

Console Settings

  • Language selection (EN, PL, ZH)
  • Console version info
  • Session timeout configuration

Password Change

  • Current password verification
  • New password with confirmation
  • TOTP 2FA enrollment/removal

OS-Style Login Screen

When desktop mode is active, the login page transforms into a Windows 11-style experience:

  • Wallpaper background with frosted glass card
  • Clock and date overlay (click to dismiss)
  • Multi-user selector (bottom-left avatars)
  • TOTP 2FA with individual digit input boxes
  • Session expiry detection with auto-redirect

UI Features

Theme Support

  • Dark (default) — Dark backgrounds, light text
  • Light — White backgrounds, dark text
  • Auto — Follows system prefers-color-scheme

Toast Notifications

  • Success/error/warning/info pop-ups
  • Auto-dismiss with progress bar
  • Hover to pause
  • Max 5 simultaneous toasts

Skeleton Loading

  • Animated shimmer placeholders during data load
  • Applied to tables, cards, avatars

Page Transitions

  • Fade + translateY animation on page content
  • Staggered list item animations (30ms per row)

Responsive Design

  • 4 breakpoints: 1024px, 768px, 600px, 400px
  • Card-style layout on mobile (< 600px)
  • Bottom sheet kebab menu on phones
  • Collapsible sidebar navigation

Internationalization (i18n)

The console supports multiple languages:

Language Code Status
English en ✅ Complete
Polish pl ✅ Complete
Chinese zh ✅ Complete

Adding a Language

  1. Copy web-nodejs/lang/en.json to web-nodejs/lang/{code}.json
  2. Translate all values (keep keys as-is)
  3. Update the meta section with language info
  4. The language auto-appears in the selector (auto-discovery from lang/ directory)

See the Contributing Translations guide for details.