Vision
A vertical strip showing the semantic shape of the document. Color-coded blocks by content type. Click to jump. At a glance you see whether it's a spec, a tutorial, or a changelog.
Color Coding
- Headers → blue
- Code blocks → green
- Lists → orange
- Blockquotes → purple
- Tables → teal
- Paragraphs → subtle gray
Behavior
- Thin strip on the right or left edge of the preview
- Proportional: each block's height reflects its length in the doc
- Click a block → smooth scroll to that section
- Current viewport highlighted
- Hover → tooltip with section heading name
Open Questions
- Position: right edge (like VS Code minimap) or left (near TOC)?
- Should it replace the TOC sidebar or complement it?
- How to handle very long documents (1000+ lines)?
- Should it show a viewport indicator like VS Code's minimap?
- Interactive: drag to scroll?
Why This Matters
Nobody else has this. It's the "wow" screenshot for the marketplace listing. Makes document structure instantly visible.
Vision
A vertical strip showing the semantic shape of the document. Color-coded blocks by content type. Click to jump. At a glance you see whether it's a spec, a tutorial, or a changelog.
Color Coding
Behavior
Open Questions
Why This Matters
Nobody else has this. It's the "wow" screenshot for the marketplace listing. Makes document structure instantly visible.