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

Bao_Chill_Chill — Fri, 15 May 2026 07:35:27 +0000

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?