Markdown in .tour/
01Tour overviews, component pages and the glossary are authored as ordinary Markdown files in a .tour folder, kept under version control with everything else.
Guided code tours, generated from the source
CodeSafari
Guided tours through code, generated from the code itself.
A tool that turns a .tour folder and inline @tour comments into an offline, IDE-like tour site, so a codebase can walk you through itself.
Why it exists
More and more of the code you own is code you never wrote.
Developers are dropped into unfamiliar code far more often than they used to be, and increasingly it is code they prompted rather than typed. It works, it passed review and it is theirs to maintain, but it never went through the slow act of writing it out line by line, which is what used to leave you knowing where everything sits.
CodeSafari is a way to get a guided tour through that code. It reads Markdown from a .tour folder together with @tour comments living next to the real code, builds a manifest, and renders both through a read-only viewer with a file tree and a highlighted code pane. Because the narrative is anchored to the source, it travels with the code instead of rotting in a separate document.
How it works
Two inputs, one generated site.
The narrative lives in the repository next to the code it describes, so it travels with the code instead of drifting away from it in a separate document.
@tour comments in the source
02Individual steps are anchored with inline @tour comments sitting next to the real code. Each one becomes a navigable step tied to the block that follows it.
What it does
A codebase that can walk you through itself.
CodeSafari builds a manifest from both inputs and renders it through a read-only viewer, then exports the whole thing as a static site.
01
Write tour overviews as Markdown in a .tour folder
02
Anchor individual steps to real code with inline @tour comments
03
Read tours in an IDE-like viewer with a file tree, code pane and step panel
04
Export a static site that works offline with no server
05
Render Mermaid diagrams, pre-rendered on export
06
Parse TypeScript, TSX, Rust and Python through Tree-sitter
Try it
Take the tour the tool generated for its own source.
Under the hood
Built with
TypeScriptReactCode HikeTree-sitter
- Build approach
- Vibe-coded
Built quickly by describing the result I wanted rather than the implementation. That was the point: the tool exists to solve a problem AI-assisted development creates, so it made sense to build it the same way and find out whether the approach held up on something I would actually use.
AI tools and models
Claude Code
- Availability
- Published tool · run with npx · static export
- License
- MIT
- Source
- GitHub repository