DEV Community

Bao_Chill_Chill
Bao_Chill_Chill

Posted on

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

#webdev #opensource

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:

  1. 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
  2. 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":

  1. Open human-context, point it at docs/
  2. Sort by token count — anything over 6k gets reviewed
  3. Archive stale sections to docs/history/
  4. 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?

Top comments (0)