htoprc.dev

A web-based htoprc visualizer and editor. Preview and edit htop configurations in real-time.

Live: htoprc.dev | Staging: staging.htoprc.dev

What is this?

htop is an interactive process viewer for Unix systems. Its configuration file (htoprc) controls the visual appearance: colors, meters, columns, and layout.

htoprc.dev lets you:

• Browse a gallery of htoprc configurations with live previews
• Preview how any config looks without installing it
• Edit configs in a live editor with instant visual feedback
• Share your setup with the community
• Discover interesting configurations via automated scraping from GitHub, GitLab, and Reddit

Features

• Full-fidelity htop preview - Renders all 7 color schemes, header meters, process list columns, and tree view
• Live editor - Edit htoprc with autocomplete, hover docs, and instant preview
• Scoring system - Surfaces interesting configs, hides boring defaults
• Community features - Like, comment, and fork configs
• Social login - Sign in with GitHub, Google, or Discord
• Open source - MIT licensed, contributions welcome

Tech Stack

Layer	Technology
Frontend	React 19, Vite, Tailwind CSS
Editor	CodeMirror 6 (syntax highlighting, autocomplete, hover docs)
API	Hono, GraphQL Yoga
Database	Cloudflare D1 (SQLite)
Hosting	Cloudflare Pages + Workers
Testing	Vitest
Monorepo	pnpm workspaces

Cost: $0/month on Cloudflare free tier.

Project Structure

htoprc.dev/
├── apps/
│   ├── web/                 # React frontend
│   └── api/                 # Cloudflare Workers API
├── packages/
│   └── htoprc-parser/       # Shared parser library (npm package)
└── docs/
    └── plans/               # Design documents

npm Package

The htoprc parser is available as a standalone npm package:

npm install @htoprc/parser

import { parseHtoprc, serializeHtoprc } from '@htoprc/parser'

// Parse an htoprc file
const result = parseHtoprc(fileContent)
console.log(result.config.colorScheme)
console.log(result.config.treeView)

// Serialize back to htoprc format
const output = serializeHtoprc(result.config)

See the package README for full API documentation.

Getting Started

Prerequisites

• Node.js 24+
• pnpm 9+

Installation

git clone https://github.com/alexneamtu/htoprc.dev.git
cd htoprc.dev
pnpm install
cp .env.example .env.local

Development

# Run everything
pnpm dev

# Or run individually
pnpm dev:web    # React on localhost:5173
pnpm dev:api    # Workers on localhost:8787

Testing

pnpm test           # Run all tests
pnpm test:parser    # Parser tests only

# Run with coverage
pnpm --filter @htoprc/parser test:run -- --coverage
pnpm --filter @htoprc/web vitest run --coverage

Coverage: Parser 100% | API 100% | Web 81%

Database

pnpm db:migrate     # Apply migrations
pnpm db:seed        # Seed sample data

Environment Variables

Create a .env.local file:

# Clerk (Auth)
CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...

# GitHub (Scraper - for higher rate limits)
GITHUB_TOKEN=ghp_...

Deployment

pnpm wrangler login
pnpm db:migrate:prod
pnpm deploy

Contributing

Contributions are welcome! See CONTRIBUTING.md for guidelines.

License

MIT License - see LICENSE for details.

Acknowledgments

• htop - The amazing process viewer this project is built around
• r/unixporn - Inspiration and source of beautiful configs