<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>rootle</title>
<meta name="description" content="rootle — a modal terminal UI for browsing remote source-control systems. GitHub in-tree, anything else via stdio providers.">
<link rel="icon" href="./assets/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="./assets/site.css">
<script src="./assets/site.js" defer></script>
</head>
<body class="home">
<div class="shell">
<aside class="rail">
<a class="brand" href="./index.html">
<img src="./assets/icon.svg" alt="rootle icon"><span class="wordmark">rootle</span>
</a>
<span class="rail-head">menu</span>
<nav>
<a class="active" href="./index.html">home</a>
<a href="./docs/getting-started.html">getting started</a>
<a href="./docs/settings.html">settings</a>
<a href="./docs/provider-protocol.html">providers</a>
<a class="gh" href="https://github.com/tknawara/rootle">github ↗</a>
</nav>
</aside>
<main class="content">
<section class="hero">
<img class="logo" src="./assets/logo.svg" alt="rootle — terminal card with miller columns and the rootle mole">
<p class="tagline">browse remote source-control systems from your terminal</p>
<div class="chips">
<span class="chip">github in-tree</span>
<span class="chip">any forge via stdio providers</span>
<span class="chip">rust</span>
<span class="chip">MIT</span>
</div>
<p class="sub"><span class="chip">status: alpha</span>orgs → repos → trees → files, no clone required</p>
<div class="install">
<pre><span class="p">$</span> curl -fsSL https://tknawara.github.io/rootle/install.sh | sh</pre>
<button class="copy" data-copy="curl -fsSL https://tknawara.github.io/rootle/install.sh | sh">copy</button>
</div>
<p class="alt">also: <code>cargo install rootle</code> · <code>mise use github:tknawara/rootle</code> · <a href="https://github.com/tknawara/rootle/releases">release tarballs</a></p>
<div class="cta">
<a class="primary" href="https://github.com/tknawara/rootle">GitHub ↗</a>
<a class="ghost" href="./docs/getting-started.html">get started</a>
</div>
</section>
<section class="demo">
<h2 class="section">demo</h2>
<div class="window">
<div class="titlebar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="wtitle">rootle · press ? for keybindings</span></div>
<img src="./assets/demo.gif" alt="rootle demo: searching, browsing miller columns, grep, yanking a URL">
</div>
</section>
<section>
<h2 class="section">what it does</h2>
<div class="grid">
<div class="card">
<h3>browse</h3>
<p>Three miller columns — orgs → repos → trees — with a live syntax-highlighted preview pane. No local clone.</p>
</div>
<div class="card">
<h3>find & grep<span class="key">␣ f</span><span class="key">␣ g</span></h3>
<p>Full-screen, Zed-style results: match chips, folded regions, per-file counts. Scope to a repo or search globally.</p>
</div>
<div class="card">
<h3>open & yank<span class="key">↵</span><span class="key">␣ y</span></h3>
<p>Any file opens read-only in your editor. Yank the browser URL of anything you're looking at.</p>
</div>
<div class="card">
<h3>clone<span class="key">v</span><span class="key">:clone</span></h3>
<p>Mark repos, run the wizard. Org selections fan out; destinations land at <code><dest>/<org>/<repo></code>.</p>
</div>
<div class="card">
<h3>configure<span class="key">:settings</span></h3>
<p>In-app settings write <code>config.toml</code> and hot-reload themes. The <code>?</code> popup lists every keybinding.</p>
</div>
<div class="card">
<h3>providers</h3>
<p>GitHub ships in-tree. Anything else wraps in as a stdio child process speaking NDJSON-RPC — four methods make a provider.</p>
</div>
</div>
</section>
<section>
<h2 class="section">screenshots</h2>
<div class="shots">
<figure>
<img src="./assets/img/03-browse.png" alt="browsing orgs, repos, and a tree with a syntax-highlighted preview">
<figcaption>browsing with the preview pane</figcaption>
</figure>
<figure>
<img src="./assets/img/04-grep.png" alt="grep results with match chips and folded regions">
<figcaption>grep — match chips, folded regions</figcaption>
</figure>
<figure>
<img src="./assets/img/08-keybinds.png" alt="the keybindings popup">
<figcaption>every binding behind <span style="font-family:var(--mono)">?</span></figcaption>
</figure>
</div>
</section>
<section id="quickstart">
<h2 class="section">quick start</h2>
<pre><span class="p">$</span> curl -fsSL https://tknawara.github.io/rootle/install.sh | sh <span class="c"># linux x86_64</span></pre>
<pre><span class="p">$</span> cargo install rootle <span class="c"># or from crates.io (Rust 1.88+)</span></pre>
<pre><span class="p">$</span> rootle <span class="c"># repo search on first run; browser after that</span>
<span class="p">$</span> rootle owner/repo <span class="c"># jump straight into a repo</span></pre>
<p class="note">Or grab the static musl binary from the
<a href="https://github.com/tknawara/rootle/releases">releases</a> page.
Auth is zero-friction: <code>gh auth login</code> or <code>ROOTLE_TOKEN</code>
if already set up — everything else works anonymously. Full walkthrough in
<a href="./docs/getting-started.html">getting started</a>; every knob in
<a href="./docs/settings.html">settings</a>.</p>
</section>
<section id="themes">
<h2 class="section">themes</h2>
<div class="palette-bar">
<button data-set-palette="catppuccin-mocha" class="active"><span class="sw" style="--sw:#89b4fa"></span>catppuccin-mocha</button>
<button data-set-palette="dracula"><span class="sw" style="--sw:#bd93f9"></span>dracula</button>
<button data-set-palette="gruvbox-dark"><span class="sw" style="--sw:#83a598"></span>gruvbox-dark</button>
<button data-set-palette="nord"><span class="sw" style="--sw:#88c0d0"></span>nord</button>
<button data-set-palette="one-dark"><span class="sw" style="--sw:#61afef"></span>one-dark</button>
<button data-set-palette="solarized-dark"><span class="sw" style="--sw:#268bd2"></span>solarized-dark</button>
<button data-set-palette="tokyo-night"><span class="sw" style="--sw:#7aa2f7"></span>tokyo-night</button>
</div>
<p class="note">Click to preview — the page remembers your pick across
docs too. These are the same seven palettes <code>:settings</code> lists
in the app.</p>
</section>
<section id="compare">
<h2 class="section">compare</h2>
<table class="compare">
<tr><th></th><th>rootle</th><th>github.com</th><th>gh cli</th><th>clone + editor</th></tr>
<tr><td>browse without cloning</td><td class="yes">✓</td><td class="yes">✓</td><td class="part">api only</td><td class="no">·</td></tr>
<tr><td>modal, keyboard-first TUI</td><td class="yes">✓</td><td class="no">·</td><td class="no">·</td><td class="no">·</td></tr>
<tr><td>syntax-highlighted preview</td><td class="yes">✓</td><td class="yes">✓</td><td class="no">·</td><td class="yes">✓</td></tr>
<tr><td>full-text grep in the terminal</td><td class="yes">✓</td><td class="no">·</td><td class="part">gh search code</td><td class="yes">✓</td></tr>
<tr><td>forges beyond GitHub</td><td class="part">stdio providers</td><td class="no">·</td><td class="part">GHES only</td><td class="yes">✓</td></tr>
<tr><td>single static binary</td><td class="yes">✓</td><td class="no">n/a</td><td class="yes">✓</td><td class="no">n/a</td></tr>
</table>
</section>
<section class="providers">
<h2 class="section">providers</h2>
<div class="card">
<p>rootle talks to backends through a small protocol, not to GitHub
directly. <code>[provider] kind = "stdio"</code> spawns your adapter as
a child process — see how the pieces fit in
<a href="./docs/provider-protocol.html">providers</a>, or the
<a href="https://github.com/tknawara/rootle/tree/main/skills/rootle-provider">scaffolding
skill</a> for wrapping your own backend.</p>
</div>
</section>
<footer>
<span>MIT license</span>
<a href="https://github.com/tknawara/rootle">source</a>
<a href="./docs/getting-started.html">docs</a>
<span style="margin-left:auto">a ratatui TUI · seven palettes</span>
</footer>
</main>
</div>
</body>
</html>