I built a zero-dependency markdown folder viewer for AI context engineering (one .html file)

The problem nobody talks about Everyone's excited about context engineering — CLAUDE.md files, structured docs/ folders, per-developer "current state" files. But as your project grows, you end up with something like this: docs/ ├── architecture.md (8,200 tokens) ├── decisions.md (12,400 tokens) ├── tech_debt.md (6,100 tokens) ├── api-patterns.md (4,300 tokens) ├── context/ │ ├── current_state_alice.md │ ├── current_state_bob.md │ └── feature_index.md └── history/ ├── 2026-04-auth-rewrite.md └── 2026-03-migration.md Enter fullscreen mode Exit fullscreen mode Now you have two problems: You can't see the forest for the trees — browsing .md files in a terminal or IDE one at a time doesn't give you a sense of the whole Token bloat is invisible — you don't know which files are eating your context budget until Claude starts truncating things What I built human-context — a single .html file that turns your docs folder into a browsable knowledge base. No server. No npm install. No build step. Just open it in Chrome or Edge. 👉 GitHub: https://github.com/zzgiabaozzbui/human-context How it works It uses the File System Access API (Chrome/Edge) — you click "Open Folder", select your docs directory, and instantly get: 📁 File tree with folder expand/collapse 🔢 Token count per file (cl100k tokenizer, runs in-browser) 📖 Rendered markdown with syntax-highlighted code blocks 📋 Auto-generated TOC with scroll spy 🌙 Dark/light mode toggle 🔍 Search to filter the file tree in real-time Firefox fallback uses for broad browser support. The workflow it enables My team now does a weekly "context audit": Open human-context, point it at docs/ Sort by token count — anything over 6k gets reviewed Archive stale sections to docs/history/ Update the relevant current_state file The AI sessions get faster and more accurate because the context is tighter. Why single-file HTML? Because I wanted something that works across the team with zero setup friction. You drop the file in the repo, team members open it in their browser. Done. No "works on my machine" npm issues, no Docker, no localhost. The whole thing is ~750 lines of HTML/CSS/JS with two CDN libraries (marked.js for rendering, highlight.js for code blocks). Try it git clone https://github.com/zzgiabaozzbui/human-context Enter fullscreen mode Exit fullscreen mode Then open docs/md-folder-viewer.html in Chrome/Edge and point it at any folder full of .md files. If you're doing context engineering for AI-assisted development, this fits right into the workflow. Would love feedback on what features matter most — token budget visualization, fuzzy search, or something else entirely?