-->

⏱️ Estimated Reading Time: 12 minutes

Introduction

System monitoring is a critical task for developers, system administrators, and power users. While traditional CLI tools like htop, top, and btop have served us well, NeoHtop represents the next evolution in system monitoring tools.

With over 8.2K GitHub stars and growing rapidly, NeoHtop combines the power of Rust, Tauri, and Svelte to deliver a blazing-fast, modern, and cross-platform desktop application that revolutionizes how we monitor system resources and processes.

What Makes NeoHtop Special?

Revolutionary Features

NeoHtop isn’t just another system monitor—it’s a complete reimagining of what system monitoring can be:

🚀 Real-time Performance Monitoring

  • Live process monitoring with sub-second updates
  • CPU and memory usage tracking with detailed metrics
  • Automatic refresh with configurable intervals
  • Zero-lag interface updates

🎨 Modern, Intuitive Interface

  • Beautiful dark/light theme support
  • Responsive design that adapts to any screen size
  • FontAwesome icons for enhanced visual clarity
  • CSS Variables for consistent theming

🔍 Advanced Search & Filtering Capabilities

  • Multi-term search with comma separation
  • Full regular expression support
  • Search by process name, command, or PID
  • Real-time filtering without performance impact

🛠 Powerful Process Management

  • Pin critical processes for quick access
  • Kill processes with confirmation dialogs
  • Sort by any column (CPU, memory, PID, etc.)
  • Detailed process information display

📌 Smart Productivity Features

  • Process pinning for important services
  • Customizable refresh rates
  • Export capabilities for reporting
  • Keyboard shortcuts for power users

Technology Stack Breakdown

Frontend Architecture:

  • SvelteKit: Lightweight, reactive framework
  • TypeScript: Type safety and developer experience
  • CSS Variables: Dynamic theming system

Backend Architecture:

  • Rust: Memory-safe, high-performance systems language
  • Tauri: Secure, lightweight desktop app framework

Cross-Platform Support:

  • macOS: Native Apple Silicon and Intel support
  • Linux: Multiple distributions supported
  • Windows: Full compatibility (future releases)

System Requirements & Prerequisites

Minimum Requirements

Hardware:

  • RAM: 512MB minimum, 1GB recommended
  • CPU: Any modern processor (x64, ARM64)
  • Storage: 50MB for application installation

Operating System:

  • macOS 10.15+ (Catalina or newer)
  • Linux: Ubuntu 18.04+, Fedora 32+, Arch Linux
  • Windows 10+ (planned support)

Development Prerequisites

If you plan to build from source or contribute to development:

# Check Node.js version (16+ required)
node --version

# Check Rust installation
rustc --version
cargo --version

# macOS specific: Xcode Command Line Tools
xcode-select --version

Installation Guide

The fastest way to get NeoHtop running is through pre-built binaries:

macOS Installation

# Download and install via Homebrew (Recommended)
brew install --cask neohtop

# Alternative: Manual download
curl -s https://api.github.com/repos/Abdenasser/neohtop/releases/latest | \
  grep "browser_download_url.*dmg" | \
  cut -d '"' -f 4 | \
  xargs wget

# Install the downloaded DMG
open NeoHtop*.dmg

Linux Installation

# Download latest release for Linux
LATEST_URL=$(curl -s https://api.github.com/repos/Abdenasser/neohtop/releases/latest | \
  grep "browser_download_url.*AppImage" | \
  cut -d '"' -f 4)

# Download and make executable
wget "$LATEST_URL" -O neohtop.AppImage
chmod +x neohtop.AppImage

# Run directly or move to system path
./neohtop.AppImage
# OR
sudo mv neohtop.AppImage /usr/local/bin/neohtop

Method 2: Build from Source

For developers or users who want the latest features:

# Clone the repository
git clone https://github.com/Abdenasser/neohtop.git
cd neohtop

# Install dependencies
npm install

# Development mode (with hot reload)
npm run tauri dev

# Production build
npm run tauri build

Development Build Script

Create a comprehensive build script for development:

#!/bin/bash
# File: build_neohtop_dev.sh

set -e

echo "🔨 Building NeoHtop from source..."

# Check prerequisites
command -v node >/dev/null 2>&1 || { echo "❌ Node.js is required"; exit 1; }
command -v cargo >/dev/null 2>&1 || { echo "❌ Rust is required"; exit 1; }

# Setup workspace
WORKSPACE_DIR="$HOME/Development/neohtop"
mkdir -p "$(dirname "$WORKSPACE_DIR")"

# Clone or update repository
if [ -d "$WORKSPACE_DIR" ]; then
    echo "📁 Updating existing repository..."
    cd "$WORKSPACE_DIR"
    git pull origin main
else
    echo "📥 Cloning repository..."
    git clone https://github.com/Abdenasser/neohtop.git "$WORKSPACE_DIR"
    cd "$WORKSPACE_DIR"
fi

# Install dependencies
echo "📦 Installing dependencies..."
npm ci

# Check code formatting
echo "🎨 Checking code formatting..."
npm run format:check

# Run development build
echo "🚀 Starting development server..."
npm run tauri dev

Quick Start Guide

First Launch

After installation, launch NeoHtop and you’ll see:

  1. Main Process List: All running processes with real-time updates
  2. System Overview: CPU and memory usage at the top
  3. Search Bar: For filtering processes
  4. Action Buttons: Pin, kill, and manage processes

Essential Keyboard Shortcuts

Ctrl/Cmd + F    : Focus search bar
Ctrl/Cmd + R    : Refresh process list
Ctrl/Cmd + Q    : Quit application
Ctrl/Cmd + T    : Toggle theme (dark/light)
Space           : Pin/unpin selected process
Delete/Backspace: Kill selected process (with confirmation)

Basic Navigation

  1. Sorting: Click any column header to sort
  2. Search: Type in the search bar for real-time filtering
  3. Process Management: Right-click processes for context menu
  4. Theme Toggle: Use the theme button or keyboard shortcut

Advanced Features Deep Dive

Powerful Search Capabilities

NeoHtop’s search functionality goes far beyond simple text matching:

# Search for multiple processes simultaneously
arm, x86, python

# This will show processes containing any of these terms

# Find all daemon processes (ending with 'd')
d$

# Find processes with reverse domain notation
^(\w+\.)+\w+$

# Find processes starting with specific letters
^[abc].*

# Find processes with specific PID ranges
^[1-9][0-9]{3}$

Advanced Filtering Examples

# Memory-intensive processes (conceptual - actual implementation may vary)
# Use sorting combined with search terms

# Browser processes
chrome, firefox, safari, edge

# Development tools
code, vim, emacs, git, docker

# System processes
kernel, system, launchd, systemd

Process Management Features

Process Pinning

# Pin critical processes for monitoring:
# - Database servers (mysql, postgres)
# - Web servers (nginx, apache)
# - Development tools (node, python)
# - System services (sshd, cron)

Smart Process Killing

  • Confirmation Dialogs: Prevents accidental termination
  • SIGTERM first: Graceful shutdown attempt
  • SIGKILL fallback: Force termination if needed
  • Process tree awareness: Shows child processes

Performance Optimization

Refresh Rate Configuration

# Optimal refresh rates based on use case:
# - Real-time monitoring: 1-2 seconds
# - General use: 3-5 seconds
# - Battery conservation: 10+ seconds

Memory Usage Optimization

# NeoHtop's memory footprint:
# - Base usage: ~50-100MB
# - With 1000+ processes: ~150-200MB
# - Rust's zero-cost abstractions minimize overhead

Running with Elevated Privileges

macOS Sudo Access

# Run with sudo for system process access
sudo /Applications/NeoHtop.app/Contents/MacOS/NeoHtop

# Create an alias for convenience
echo 'alias neohtop-sudo="sudo /Applications/NeoHtop.app/Contents/MacOS/NeoHtop"' >> ~/.zshrc
source ~/.zshrc

Linux Privilege Elevation

# Using pkexec (recommended)
pkexec /usr/local/bin/neohtop

# Alternative: sudo
sudo ./neohtop.AppImage

# Create desktop entry with privilege escalation
cat > ~/.local/share/applications/neohtop-admin.desktop << EOF
[Desktop Entry]
Name=NeoHtop (Admin)
Exec=pkexec /usr/local/bin/neohtop
Icon=neohtop
Type=Application
Categories=System;Monitor;
EOF

Comparison with Traditional Tools

NeoHtop vs. Traditional Monitors

Feature htop btop NeoHtop
Interface Terminal Terminal + Graphics Modern GUI
Search Basic Advanced Regex + Multi-term
Themes Limited Multiple Dark/Light + Custom
Performance Low CPU Medium CPU Optimized Rust
Platform Unix/Linux Cross-platform Cross-platform
Memory Usage ~10MB ~50MB ~100MB
Real-time Updates Good Excellent Excellent
Process Management Basic Advanced Advanced + GUI

When to Use Each Tool

Use htop when:

  • Working in pure terminal environments
  • Minimal resource usage is critical
  • Simple process monitoring needs

Use btop when:

  • Need terminal-based tool with modern features
  • Graphics in terminal are acceptable
  • Cross-platform consistency required

Use NeoHtop when:

  • Modern GUI experience is preferred
  • Advanced search capabilities needed
  • Visual process management desired
  • Desktop environment available

Troubleshooting Common Issues

Installation Problems

macOS Permission Issues

# If app is blocked by Gatekeeper
sudo xattr -r -d com.apple.quarantine /Applications/NeoHtop.app

# Alternative: System Preferences > Security & Privacy > Allow

Linux Dependency Issues

# Install missing libraries (Ubuntu/Debian)
sudo apt update
sudo apt install webkit2gtk-4.0 libappindicator3-1

# Install missing libraries (Fedora)
sudo dnf install webkit2gtk3 libappindicator-gtk3

# Install missing libraries (Arch)
sudo pacman -S webkit2gtk

Performance Issues

High Memory Usage

# Check for memory leaks
# Monitor NeoHtop's own memory usage in Activity Monitor

# Reduce refresh rate
# Settings > Refresh Interval > Increase to 5-10 seconds

# Filter processes
# Use search to reduce displayed process count

Slow Startup

# Clear application cache (macOS)
rm -rf ~/Library/Caches/NeoHtop

# Reset preferences
rm -rf ~/Library/Preferences/com.neohtop.*

# Check disk space
df -h

Process Monitoring Issues

Missing Processes

# Run with elevated privileges
sudo neohtop

# Check process filters
# Ensure search terms aren't hiding processes

# Verify process existence
ps aux | grep process_name

Incorrect CPU Usage

# CPU calculation differences between tools are normal
# NeoHtop uses Rust's system crate for accuracy

# For verification, compare with:
top -l 1 | grep "CPU usage"

Development and Contributing

Setting Up Development Environment

# Clone your fork
git clone https://github.com/yourusername/neohtop.git
cd neohtop

# Install development dependencies
npm install

# Install Rust development tools
cargo install cargo-watch

# Start development with auto-reload
cargo watch -x "run --bin neohtop"

Code Quality Standards

Frontend Code Formatting

# Format web code with Prettier
npm run format

# Check formatting
npm run format:check

# Lint TypeScript/Svelte
npm run lint

Rust Code Standards

# Format Rust code
cargo fmt

# Run Clippy for linting
cargo clippy

# Run tests
cargo test

Contributing Guidelines

Commit Message Convention

# Feature additions
feat: add process filtering by CPU usage threshold

# Bug fixes
fix: resolve memory leak in process monitoring loop

# Documentation updates
docs: update installation guide for Arch Linux

# Performance improvements
perf: optimize process list rendering with virtualization

Pull Request Checklist

  • Code follows project formatting standards
  • All tests pass locally
  • Documentation updated if needed
  • Commit messages follow convention
  • No breaking changes without discussion

Best Practices and Tips

Monitoring Strategies

System Health Monitoring

# Create monitoring profiles for different scenarios:

# Development workstation
# - Monitor: node, cargo, docker, vscode
# - Pin: databases, dev servers
# - Refresh: 2-3 seconds

# Production server
# - Monitor: web servers, databases, system services
# - Pin: critical services
# - Refresh: 5-10 seconds

# Gaming/Media system
# - Monitor: games, media players, streaming
# - Pin: performance-critical apps
# - Refresh: 1-2 seconds

Automated Monitoring Scripts

#!/bin/bash
# File: system_health_check.sh

# Check if system load is high and launch NeoHtop
load_avg=$(uptime | awk -F'load average:' '{print $2}' | awk '{print $1}' | sed 's/,//')
threshold="3.0"

if (( $(echo "$load_avg > $threshold" | bc -l) )); then
    echo "⚠️ High system load detected: $load_avg"
    echo "🚀 Launching NeoHtop for investigation..."
    
    # Launch NeoHtop (adjust path as needed)
    if [[ "$OSTYPE" == "darwin"* ]]; then
        open /Applications/NeoHtop.app
    else
        neohtop &
    fi
fi

Performance Optimization Tips

Resource Management

# Optimize NeoHtop for different use cases:

# Battery conservation mode
# - Increase refresh interval to 10+ seconds
# - Use search filters to reduce process count
# - Close when not actively monitoring

# High-performance monitoring
# - Decrease refresh interval to 1-2 seconds
# - Use process pinning for critical services
# - Keep open for continuous monitoring

Future Roadmap and Features

Planned Enhancements

Based on the GitHub repository and community feedback:

Short-term (Next Release):

  • Enhanced keyboard navigation
  • Export functionality for process data
  • Custom color themes
  • Process grouping by application

Medium-term (Future Releases):

  • Network monitoring integration
  • Disk I/O monitoring
  • System alerts and notifications
  • Remote monitoring capabilities

Long-term Vision:

  • Plugin system for extensibility
  • Multi-system monitoring dashboard
  • Integration with monitoring services
  • Advanced analytics and reporting

Conclusion

NeoHtop represents a significant leap forward in desktop system monitoring tools. By leveraging modern technologies like Rust, Tauri, and Svelte, it delivers exceptional performance while maintaining an intuitive, beautiful interface.

Whether you’re a developer monitoring build processes, a system administrator overseeing servers, or a power user optimizing system performance, NeoHtop provides the tools and insights you need.

Key Takeaways

  • Modern Architecture: Rust + Tauri ensures optimal performance and security
  • Advanced Features: Regular expression search and process pinning
  • Cross-Platform: Consistent experience across operating systems
  • Active Development: Growing community and regular updates
  • Easy Installation: Multiple installation methods for different needs

Next Steps

  1. Install NeoHtop using your preferred method
  2. Explore the interface and familiarize yourself with features
  3. Set up monitoring profiles for your specific use cases
  4. Join the community on GitHub for updates and discussions
  5. Consider contributing to help improve the project

The future of system monitoring is here, and it’s blazing fast. Welcome to NeoHtop!

📚 Additional Resources:

🤝 Support the Project:

  • ⭐ Star the repository on GitHub
  • 🐛 Report bugs and suggest features
  • 💻 Contribute code improvements
  • 📖 Help improve documentation

참고