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
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 <input webkitdirectory> 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
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?