# microsoft/codetour

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/microsoft-codetour).**

4,541 stars · 149 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/microsoft/codetour
- Homepage: https://aka.ms/codetour
- awesome-repositories: https://awesome-repositories.com/repository/microsoft-codetour.md

## Topics

`code-navigation` `knowledge-sharing` `onboarding` `vscode` `vscode-extension`

## Description

Code Tour is a VS Code extension that enables the creation of interactive, step-by-step guided walkthroughs of a codebase. It serves as a tool for guided code documentation, mapping descriptive explanations directly to specific file lines and directories within the editor to assist with codebase onboarding and technical knowledge transfer.

The system distinguishes itself through the use of regular expression-based anchoring to maintain step stability across different versions of source code and the ability to export tours as portable files containing the necessary code context for playback without the original local repository. It further supports synchronization with version control through Git-based tour versioning and provides drift detection to identify when code changes break existing tour links.

The project covers a broad range of capabilities, including tour recording and design, a playback engine with gutter-based discovery, and the ability to embed interactive elements such as shell commands and editor function invocations. Walkthroughs are stored using JSON serialization and can be shared via remote links or managed through flexible disk-based storage strategies.

## Tags

### Education & Learning Resources

- [Architectural Onboarding](https://awesome-repositories.com/f/education-learning-resources/technical-onboarding-programs/architectural-onboarding.md) — Provides an interactive tool for architectural onboarding to help developers understand project structural organization and flow.

### Part of an Awesome List

- [Code Walkthroughs](https://awesome-repositories.com/f/awesome-lists/devtools/onboarding-and-walkthroughs/interactive-walkthroughs/code-walkthroughs.md) — Provides an interactive system for mapping descriptions to specific file lines and directories within the editor.

### Content Management & Publishing

- [Synchronized Code Annotations](https://awesome-repositories.com/f/content-management-publishing/synchronized-code-annotations.md) — Implements a format for embedding sequential explanations and markers directly into a codebase for synchronized playback.

### Development Tools & Productivity

- [Interactive Code Documentation](https://awesome-repositories.com/f/development-tools-productivity/interactive-code-documentation.md) — Integrates interactive tours and narrated code paths directly into the editor to replace static documentation.
- [Portable Tour Bundles](https://awesome-repositories.com/f/development-tools-productivity/portable-tour-bundles.md) — Packages tour steps with source code content to enable playback without the original local repository.
- [Technical Knowledge Transfer](https://awesome-repositories.com/f/development-tools-productivity/technical-knowledge-transfer.md) — Allows recording a sequence of code highlights and explanations to share implementation details with a team.
- [VS Code Extensions](https://awesome-repositories.com/f/development-tools-productivity/vs-code-extensions.md) — Implemented as a VS Code extension to provide recording and playback of guided codebase walkthroughs.
- [Deep-Link Tour Launchers](https://awesome-repositories.com/f/development-tools-productivity/custom-uri-scheme-handlers/application-uri-integrations/deep-link-tour-launchers.md) — Enables opening specific tours and jumping to particular steps using custom URI handlers. ([source](https://github.com/microsoft/codetour/blob/main/CHANGELOG.md))
- [Remote Tour Publishing](https://awesome-repositories.com/f/development-tools-productivity/remote-tour-publishing.md) — Enables publishing tours to external locations via web links for remote launching. ([source](https://github.com/microsoft/codetour))
- [Tour Serialization Formats](https://awesome-repositories.com/f/development-tools-productivity/tour-serialization-formats.md) — Stores tour steps and metadata in portable JSON files for version control and sharing.

### Software Engineering & Architecture

- [Gutter Metadata Markers](https://awesome-repositories.com/f/software-engineering-architecture/metadata-attachments/code-annotations/gutter-metadata-markers.md) — Renders visual markers in the editor margin to link live code lines back to their corresponding tour steps.
- [Software Architecture Education](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture-education.md) — Facilitates software architecture education by leading users through sequenced series of files and directories.
- [Code-Stability Anchors](https://awesome-repositories.com/f/software-engineering-architecture/string-matching-algorithms/partial-string-matching/multi-operator-string-matching/regex-anchoring/code-stability-anchors.md) — Matches code locations using regular expressions to maintain tour step stability across source versions.
- [Contributor Navigation Guides](https://awesome-repositories.com/f/software-engineering-architecture/contributor-navigation-guides.md) — Offers portable and versioned tours to help external contributors navigate large repositories quickly.
- [Tour Anchor](https://awesome-repositories.com/f/software-engineering-architecture/human-in-the-loop-workflows/drift-detection/tour-anchor.md) — Integrates with CI pipelines to identify when code changes have broken the links or context of existing tours. ([source](https://github.com/microsoft/codetour/blob/main/README.md))
- [Tour-Code Version Synchronization](https://awesome-repositories.com/f/software-engineering-architecture/tour-code-version-synchronization.md) — Associates tours with specific branches, commits, or tags to synchronize walkthroughs with code versions. ([source](https://github.com/microsoft/codetour/blob/main/README.md))

### User Interface & Experience

- [Standalone Tour Exports](https://awesome-repositories.com/f/user-interface-experience/product-tour-libraries/tour-flow-controls/standalone-tour-exports.md) — Saves tours as standalone files or gists containing all necessary code context for offline playback. ([source](https://github.com/microsoft/codetour/blob/main/README.md))
- [Tour Recording](https://awesome-repositories.com/f/user-interface-experience/product-tour-libraries/tour-recording.md) — Includes a feature to capture a sequence of file locations and descriptions to create interactive walkthroughs. ([source](https://github.com/microsoft/codetour))
- [Code-to-Step Linkage](https://awesome-repositories.com/f/user-interface-experience/progress-steps/tour-step-orchestrators/code-to-step-linkage.md) — Links tour steps to line numbers and regex patterns to maintain stability during code changes. ([source](https://github.com/microsoft/codetour/blob/main/CHANGELOG.md))
- [User Onboarding Tours](https://awesome-repositories.com/f/user-interface-experience/user-onboarding-tours.md) — Ships a playback engine that navigates users through a predefined series of files and code selections. ([source](https://github.com/microsoft/codetour/tree/main/.tours))
- [Editor Gutter Components](https://awesome-repositories.com/f/user-interface-experience/editor-gutter-components.md) — Uses editor gutter components to display icons indicating lines that belong to a tour. ([source](https://github.com/microsoft/codetour/blob/main/README.md))
- [Programmatic Tour Controllers](https://awesome-repositories.com/f/user-interface-experience/product-tour-libraries/tour-flow-controls/programmatic-tour-controllers.md) — Provides a programmatic interface for external tools to record, play, and export guided tours. ([source](https://github.com/microsoft/codetour/blob/main/CHANGELOG.md))
- [Context-Free Instructional Steps](https://awesome-repositories.com/f/user-interface-experience/progress-steps/tour-step-orchestrators/context-free-instructional-steps.md) — Supports introductory or intermediate explanation steps that operate independently of any specific file. ([source](https://github.com/microsoft/codetour/blob/main/README.md))
- [Explorer-Based Step Focus](https://awesome-repositories.com/f/user-interface-experience/progress-steps/tour-step-orchestrators/explorer-based-step-focus.md) — Focuses tour steps on specific folders in the file explorer to provide architectural context. ([source](https://github.com/microsoft/codetour))
- [Interactive Tour Elements](https://awesome-repositories.com/f/user-interface-experience/progress-steps/tour-step-orchestrators/interactive-tour-elements.md) — Adds links, shell command triggers, and editor command execution to tour steps. ([source](https://github.com/microsoft/codetour/blob/main/README.md))
- [Tour Invocation URIs](https://awesome-repositories.com/f/user-interface-experience/progress-steps/tour-step-orchestrators/tour-invocation-uris.md) — Handles custom protocol links to launch specific walkthroughs and jump to precise steps.
- [Step-Based Navigation Managers](https://awesome-repositories.com/f/user-interface-experience/step-based-navigation-managers.md) — Provides a dedicated UI and shortcuts for coordinating progression through sequential walkthrough steps. ([source](https://github.com/microsoft/codetour))
- [Tour Lifecycle Events](https://awesome-repositories.com/f/user-interface-experience/ui-event-coordination-systems/tour-lifecycle-events.md) — Exposes programmatic hooks for external extensions to trigger tour lifecycles and subscribe to playback events.
- [Curriculum Sequencing](https://awesome-repositories.com/f/user-interface-experience/user-onboarding-tours/curriculum-sequencing.md) — Provides the ability to connect different tours to create a sequenced onboarding curriculum. ([source](https://github.com/microsoft/codetour/blob/main/CHANGELOG.md))

### Programming Languages & Runtimes

- [Tour-Driven Command Triggers](https://awesome-repositories.com/f/programming-languages-runtimes/script-invocation-interfaces/script-command-triggers/editor-command-definitions/tour-driven-command-triggers.md) — Triggers editor functions or extension commands directly from tour step descriptions via custom URIs. ([source](https://github.com/microsoft/codetour))