A single-file, client-only explorer for browsing any public GitHub repository as a collapsible tree on GitHub Pages. Class C micro-project (§10): public, MIT, no custom domain. Previews images inline, renders text & code files with syntax highlighting, and gives one-click raw, CDN, and GitHub links.
🔗 Live: michalaferber.github.io/github-tree-browser
No server required. Uses the public GitHub Contents API; works unauthenticated, or with an optional Personal Access Token kept entirely in your browser.
- 🗂️ Collapsible directory tree (lazy-loads subfolders, remembers expanded state)
- 🔎 Repo-wide filter that searches every folder & file at all levels (not just the open folder), shown as a flat result list with full paths (Esc clears)
- 🖼️ Inline image preview (PNG, JPG, GIF, WEBP, AVIF, SVG) + lightbox with keyboard nav
- 📄 Syntax-highlighted preview for text & code files (≤ ~1 MB) — PHP, XML, JSON, YAML, JS/TS, Python, Go, Rust, C/C++, shell, CSS/HTML, Dockerfile, Makefile, and many more, with line numbers and a wrap toggle
- Unknown extensions are sniffed for binary content, so genuinely-text files still render while real binaries fall back to raw + download
- Colors come from highlight.js loaded lazily from a CDN; if it's unavailable the file still renders as plain text
- 🧭 Breadcrumb navigation
- 🔗 Deep linking to a specific file or folder (
?path=...)- Safe fallback when embedded/sandboxed: uses
#path=...if the environment disallowshistory.replaceState
- Safe fallback when embedded/sandboxed: uses
- 📋 One-click copy of raw URL, jsDelivr CDN URL, or raw bytes (image/text)
- 🌗 Light / Dark / System theme toggle (persisted)
- 🔑 Optional GitHub PAT (browser-only) to lift the rate limit from 60 → 5000 req/hr
- ⚙️ Switch owner / repo / branch from the header controls
- 📣 Open Graph + Twitter card meta tags for nicer link previews
The hosted version opens with MichalAFerber/resources (the branding assets / wallpapers repo) loaded by default, so you have something concrete to click around in. Edit the Owner / Repo / Branch fields and click Load to point it anywhere.
Easiest: just use the live URL with query parameters:
https://michalaferber.github.io/github-tree-browser/?owner=<USER>&repo=<REPO>&branch=<BRANCH>
- Copy
index.html(and optionallyfavicon.ico) to the root of any repo - Enable Pages on
main// (root)in repo Settings → Pages - Open
https://<your-username>.github.io/<your-repo>/
The defaults can be changed by editing the three <input> values near the top of <body>:
<label>Owner <input id="owner" value="MichalAFerber" /></label>
<label>Repo <input id="repo" value="resources" /></label>
<label>Branch <input id="branch" value="main" /></label>Header fields are editable at runtime:
- Owner — GitHub user/org
- Repo — repository name
- Branch — default
main - Token (optional GitHub PAT, browser-only)
Without a token: ~60 GitHub API requests/hour from your IP. Plenty for casual browsing.
With a fine-grained PAT (no scopes needed for public repos, just public_repo if you want to browse your own private repos): 5000 req/hr. The token is kept only in localStorage of your browser and never sent anywhere except api.github.com over HTTPS.
- Vanilla HTML/CSS/JS, no build step, single file
- GitHub Contents API + Git Trees API (recursive, for repo-wide filtering) + raw.githubusercontent.com
- highlight.js (lazy-loaded from cdnjs) for syntax colors, with graceful plain-text fallback
- jsDelivr CDN for the "copy CDN URL" shortcut
MIT — see LICENSE.
| Component | Version | License |
|---|---|---|
| highlight.js (inlined) | 11.9.0 | BSD-3-Clause |
Built to the TGWAB Dev Standards v2.10.1 (internal).
