A visual web UI for building fastfetch configurations. Instead of editing JSON files by hand, use a drag-and-drop interface with live preview.
Live demo: https://fastfetch-builder.raqz.link/
- 40+ modules — CPU, GPU, Memory, Disk, Network, Display, and more, organized by category
- Drag-and-drop reordering — rearrange modules with drag handles or up/down buttons
- Per-module options — customize labels, colors, separators, and type-specific settings
- Comprehensive global settings — full control over every fastfetch option: logo (source, type, position, size, padding, chafa rendering), display (separator, colors, key formatting, size/temp/bar/percent/frequency/duration/fraction formatting), and general (threading, timeouts, version detection)
- Live JSONC preview — see the exact config file update in real time
- Terminal mockup — approximate preview of what fastfetch output will look like
- Presets — start from Neofetch, Minimal, Hardware, or Developer presets
- Auto-save — configuration persists in localStorage across sessions
- Copy & Download — export your config as a
.jsoncfile or copy to clipboard - Resizable panels — adjust panel widths to your preference
# Install dependencies
npm install
# Start dev server
npm run devOpen http://localhost:5173 in your browser.
- Pick a preset or start from scratch
- Click modules from the palette to add them to your config
- Drag to reorder or use the arrow buttons
- Expand a module to configure its options (key label, colors, type-specific settings)
- Adjust global settings in the left sidebar — expand collapsible sections for Logo, Display, Temperature, Bar, Size, Frequency, Duration, Fraction, and General options
- Copy or download the generated JSONC config
- Place the file at
~/.config/fastfetch/config.jsonc
- React + TypeScript
- Vite — build tool
- Tailwind CSS — styling
- Zustand — state management with localStorage persistence
- Framer Motion — drag-and-drop reordering and animations
- CodeMirror — JSONC syntax-highlighted preview
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Type-check and build for production |
npm run preview |
Preview production build locally |
npm run typecheck |
Run TypeScript type checking |
npm run test |
Run unit tests (Vitest) |
npm run test:e2e |
Run end-to-end tests (Playwright) |
src/
├── components/
│ ├── Header.tsx # Title bar with preset loader
│ ├── GlobalSettings.tsx # Full settings sidebar (logo, display, general)
│ ├── ModuleList.tsx # Active modules with reorder support
│ ├── ModulePalette.tsx # Available modules grid
│ ├── ModuleCard.tsx # Individual module with options editor
│ ├── JsonPreview.tsx # Live JSONC config preview
│ ├── TerminalMockup.tsx # Terminal output preview
│ └── PresetLoader.tsx # Preset dropdown
├── store/
│ └── configStore.ts # Zustand store with persistence
├── lib/
│ ├── moduleDefinitions.ts # Module metadata and type definitions
│ ├── generateJsonc.ts # State → JSONC config generator
│ └── presets.ts # Built-in preset configurations
├── hooks/
│ └── useResizeHandle.ts # Resizable panel hook
└── App.tsx # Root layout
MIT