File Browser

The Drok file browser is not a list of files. It is an architecture-aware rendering of your repository's structure — designed to communicate module boundaries, entry-point hierarchies, and organizational patterns at a glance.

Architecture-Aware Display

Standard file browsers present an alphabetically sorted list of files and directories. Drok's file browser understands what it is showing you.

• Entry points are surfaced — main.rs, index.ts, __init__.py, and equivalent entry points are visually distinguished from supporting modules.
• Module boundaries are clear — Directories that represent logical modules (packages, crates, apps) display their boundary with appropriate visual weight.
• Configuration is separated — Build files, CI configuration, lockfiles, and dotfiles are visually de-emphasized relative to source code.
• README rendering — When a directory contains a README, its rendered content appears below the file listing, providing immediate context.

Tree-sitter Syntax Highlighting

Every file is syntax-highlighted using Tree-sitter — the same parsing framework used by Neovim, Helix, and Zed. Drok supports over 200 languages with accurate, parse-tree-based highlighting.

This is not regex-based highlighting. Tree-sitter builds an actual syntax tree for each file, which means:

• Nested languages render correctly — HTML with embedded JavaScript and CSS. Markdown with fenced code blocks. JSX with template literals.
• Context-sensitive tokens — A variable used as a function call is highlighted differently from the same variable used as a value.
• Resilient parsing — Syntax errors in one part of a file do not break highlighting for the rest of the file.

Supported Languages

Drok ships with Tree-sitter grammars for 200+ languages including:

Stable Line URLs

Every line in every file at every commit is addressable by a permanent URL:

https://drok.us/org/repo/blob/main/src/lib.rs#L42

Line URLs are stable across file renames when the rename is tracked by Git. Linking to line 42 of a file that was subsequently renamed will redirect to the correct file and line.

Line Ranges

Select a range of lines by specifying start and end:

https://drok.us/org/repo/blob/main/src/lib.rs#L42-L58

Line range selections are highlighted in the browser and included in link previews when shared on platforms that support Open Graph metadata.

Blame View

The blame view shows the last commit that modified each line, with:

• Commit message — Inline, without requiring a hover or click
• Author — With avatar and timestamp
• Age coloring — Older lines are visually de-emphasized, newer changes are highlighted
• Drill-through — Click any blame annotation to see the full commit, then blame the file at the parent commit to trace the history of any line

drok blame org/repo src/lib.rs

Raw and Download

Every file is available in raw format:

https://drok.us/org/repo/raw/main/src/lib.rs

Binary files display a download button instead of attempting to render content. Image files (PNG, JPG, SVG, WebP, GIF) render inline with zoom controls.

File Search

Search within a repository's file tree using fuzzy matching:

• Press / or t to open the file finder
• Type any part of a filename or path
• Results update as you type with sub-10ms latency

The file finder uses the same fuzzy matching algorithm as the drok CLI's repo find command — it weights path segments, file extensions, and edit distance to surface the most relevant matches first.

Rendering

Drok renders the following file types natively in the browser:

Keyboard Navigation

The file browser supports full keyboard navigation: