The latest articles on DEV Community by MoLines Designs (@molinesdesigns). https://dev.to/molinesdesigns https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3892965%2Ff89f50e2-42c1-425f-a821-cdaeffeda0c4.png https://dev.to/molinesdesigns en MoLines Designs Wed, 22 Apr 2026 18:17:23 +0000 https://dev.to/molinesdesigns/i-built-a-visual-tui-for-homebrew-with-react-and-ink-38fo https://dev.to/molinesdesigns/i-built-a-visual-tui-for-homebrew-with-react-and-ink-38fo <h2> Why I built Brew-TUI </h2> <p>If you're a macOS developer, you probably use <a href="https://brew.sh" rel="noopener noreferrer">Homebrew</a> every day. But memorizing all the <code>brew</code> commands gets old — especially when you just want to see what's outdated, upgrade a few packages, or check if a service is running.</p> <p>So I built <strong>Brew-TUI</strong>: a full visual terminal UI for Homebrew.</p> <h2> What it looks like </h2> <p>It's a keyboard-driven TUI built with <strong>React 18 + Ink 5</strong> (terminal renderer) and <strong>Zustand</strong> for state management. You get:</p> <ul> <li> <strong>Dashboard</strong> — package stats, outdated counts, services, system info at a glance</li> <li> <strong>Installed</strong> — browse and filter all formulae and casks with version info</li> <li> <strong>Search</strong> — find and install packages without leaving the TUI</li> <li> <strong>Outdated</strong> — see version diffs, upgrade one by one or all at once</li> <li> <strong>Services</strong> — start/stop/restart Homebrew services</li> <li> <strong>Doctor</strong> — run <code>brew doctor</code> and see warnings</li> <li> <strong>Package Info</strong> — dependencies, caveats, quick actions</li> </ul> <p>Navigate with <code>1-0</code> to jump to views, <code>j/k</code> to scroll, <code>/</code> to search, <code>Tab</code> to cycle. Press <code>L</code> to switch between English and Spanish.</p> <h2> The tech stack </h2> <ul> <li> <strong>TypeScript</strong> (strict mode, ESM-only)</li> <li> <strong>React 18</strong> for the component tree</li> <li> <strong>Ink 5</strong> as the terminal renderer (<code>&lt;Box&gt;</code> = flexbox, <code>&lt;Text&gt;</code> = styled output)</li> <li> <strong>Zustand</strong> for state management</li> <li> <strong>tsup</strong> for building</li> </ul> <p>The data flow is: Views → Zustand stores → brew-api → Parsers → brew CLI (spawn). Streaming operations (install, upgrade) use an AsyncGenerator that yields lines in real time.</p> <h2> Pro features </h2> <p>There's also a freemium tier with:</p> <ul> <li> <strong>Profiles</strong> — export/import your Homebrew setup across machines</li> <li> <strong>Smart Cleanup</strong> — find orphan packages and reclaim disk space</li> <li> <strong>History</strong> — track every install/uninstall/upgrade</li> <li> <strong>Security Audit</strong> — scan packages against the OSV vulnerability database</li> <li> <strong>BrewBar</strong> — a macOS menu bar companion app (Swift 6 / SwiftUI) that shows outdated counts and lets you upgrade from the menu bar</li> </ul> <h2> Install </h2> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code><span class="c"># npm</span> npm <span class="nb">install</span> <span class="nt">-g</span> brew-tui <span class="c"># Homebrew</span> brew tap MoLinesGitHub/tap brew <span class="nb">install </span>brew-tui <span class="c"># Run without installing</span> npx brew-tui </code></pre> </div> <h2> Links </h2> <ul> <li> <strong>GitHub:</strong> <a href="https://github.com/MoLinesGitHub/Brew-TUI" rel="noopener noreferrer">MoLinesGitHub/Brew-TUI</a> </li> <li> <strong>npm:</strong> <a href="https://www.npmjs.com/package/brew-tui" rel="noopener noreferrer">brew-tui</a> </li> </ul> <p>Feedback, issues, and stars welcome! 🍺</p> opensource terminal react typescript