# code-hike/codehike

**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/code-hike-codehike).**

5,365 stars · 168 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/code-hike/codehike
- Homepage: https://codehike.org
- awesome-repositories: https://awesome-repositories.com/repository/code-hike-codehike.md

## Topics

`blog` `code` `docs` `javascript` `markdown` `mdx` `react` `scrollytelling` `syntax-highlighting`

## Description

Codehike is a React-based documentation framework and interactive code walkthrough tool. It functions as a markdown content orchestrator that transforms decorated markdown into structured data and React components, serving as a visualization layer for highlighting code ranges, diffs, and compiler errors.

The project is distinguished by its ability to create scrollycoding experiences and step-by-step technical tutorials. It features token-level animations that visually demonstrate how logic evolves between code versions and provides a system for syncing UI state to the browser scroll position.

The framework covers a wide range of visualization capabilities, including the creation of code slideshows, spotlight layouts, and tabbed code blocks. It supports detailed code annotation through tooltips, callouts, and footnotes, as well as functional utilities like language switchers, code transpilation, and the integration of real-time compiler data.

The system utilizes schema-based validation to ensure type safety and consistency for the structured data extracted from markdown files.

## Tags

### Part of an Awesome List

- [Code Walkthroughs](https://awesome-repositories.com/f/awesome-lists/devtools/onboarding-and-walkthroughs/interactive-walkthroughs/code-walkthroughs.md) — Implements interactive, guided sequences specifically for explaining code snippets through scrollycoding and token-level animations. ([source](https://cdn.jsdelivr.net/gh/code-hike/codehike@next/README.md))
- [Scrollycoding Walkthroughs](https://awesome-repositories.com/f/awesome-lists/devtools/onboarding-and-walkthroughs/interactive-walkthroughs/code-walkthroughs/scrollycoding-walkthroughs.md) — Syncs code block updates with the scroll position to create a step-by-step scrollycoding experience. ([source](https://codehike.org/docs/layouts/scrollycoding))
- [Interactive Annotations](https://awesome-repositories.com/f/awesome-lists/devtools/onboarding-and-walkthroughs/interactive-walkthroughs/code-walkthroughs/interactive-annotations.md) — Provides interactive custom components within code blocks for styled explanations and behavioral enhancements. ([source](https://codehike.org/))

### Content Management & Publishing

- [Content Schema Definitions](https://awesome-repositories.com/f/content-management-publishing/content-management-systems/content-architecture-modeling/document-models/document-sectioning/document-content-structuring/content-schema-definitions.md) — Utilizes schema-based validation to ensure type safety and structural consistency for data extracted from markdown files. ([source](https://codehike.org/))
- [Content Orchestrators](https://awesome-repositories.com/f/content-management-publishing/content-processing-transformation/markdown-markup-tools/markdown-tools/markdown-renderers/markdown-transformation-pipelines/ast-transformations/markdown/content-orchestrators.md) — Transforms decorated markdown into structured data and React components using schema-based validation.
- [Markdown-to-Component Mappings](https://awesome-repositories.com/f/content-management-publishing/markdown-to-component-mappings.md) — Transforms decorated markdown elements into structured objects passed as props to components. ([source](https://codehike.org/docs/concepts/blocks))
- [Source File Injections](https://awesome-repositories.com/f/content-management-publishing/source-file-injections.md) — Reads external source files during the build process and embeds their content directly into markdown blocks.

### Development Tools & Productivity

- [Prose-to-Code Linking](https://awesome-repositories.com/f/development-tools-productivity/visual-to-code-sync-engines/code-to-graph-parsers/symbol-to-node-linking/prose-to-code-linking.md) — Connects specific text descriptions to corresponding lines of code through interactions like hovering. ([source](https://codehike.org/docs/code))
- [Source Code Hyperlinkers](https://awesome-repositories.com/f/development-tools-productivity/source-code-hyperlinkers.md) — Creates interactive hyperlinks on specific code tokens using manual definitions or regular expressions. ([source](https://codehike.org/docs/code/link))
- [Compiler Data Integration](https://awesome-repositories.com/f/development-tools-productivity/type-hover-information/compiler-data-integration.md) — Displays real-time compiler information and errors directly within code blocks. ([source](https://codehike.org/docs/code))
- [Comment Extraction Engines](https://awesome-repositories.com/f/development-tools-productivity/visual-to-code-sync-engines/code-to-graph-parsers/symbol-to-node-linking/comment-to-code-linking/comment-extraction-engines.md) — Parses custom markers within source code comments to apply styles and behavioral enhancements to the rendered output.

### Graphics & Multimedia

- [Token Positional Mapping](https://awesome-repositories.com/f/graphics-multimedia/token-positional-mapping.md) — Tracks the spatial coordinates of code tokens to animate transitions between different versions of a snippet.
- [Token Transition Animations](https://awesome-repositories.com/f/graphics-multimedia/token-transition-animations.md) — Calculates positional changes between two code snippets to create fluid visual animations as tokens move. ([source](https://codehike.org/docs/concepts/utils))

### User Interface & Experience

- [Code Syntax Visualizers](https://awesome-repositories.com/f/user-interface-experience/code-syntax-visualizers.md) — Provides a specialized visualization layer for highlighting code ranges, diffs, and compiler errors in web-based code blocks.
- [Markdown-to-Prop Mappings](https://awesome-repositories.com/f/user-interface-experience/component-props-management/prop-transformations/markdown-to-prop-mappings.md) — Converts decorated markdown syntax into structured JavaScript objects passed as props to React components.
- [Content-Driven State Synchronization](https://awesome-repositories.com/f/user-interface-experience/interaction-states/content-driven-state-synchronization.md) — Tracks the active content index to update visual elements automatically as the user interacts with a sequence. ([source](https://codehike.org/docs/concepts/utils))
- [Code Snippet Transitions](https://awesome-repositories.com/f/user-interface-experience/media-embeds/interactive-component-embeds/code-snippet-transitions.md) — Transitions between code blocks at the token level to visually demonstrate how logic evolves across versions. ([source](https://codehike.org/docs/code))
- [Code Line Highlighting](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/code-presentation-utilities/code-line-highlighting.md) — Visually emphasizes specific lines or tokens with custom colors to draw attention to key logic. ([source](https://codehike.org/docs/code))
- [Code Block Annotations](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/code-presentation-utilities/code-line-highlighting/code-block-annotations.md) — Highlights specific lines or tokens within code blocks using language-specific comments to apply custom styles. ([source](https://codehike.org/docs/concepts/annotations))
- [Syntax Highlighting](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/code-presentation-utilities/code-line-highlighting/syntax-highlighting.md) — Transforms raw code into highlighted tokens using themes across many supported languages. ([source](https://codehike.org/docs/concepts/code))
- [Scroll-to-Index Mappers](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers/scroll-to-index-mappers.md) — Links the active index of a content sequence to the browser scroll offset to trigger visual updates.
- [Token-Level Component Interpolation](https://awesome-repositories.com/f/user-interface-experience/token-level-component-interpolation.md) — Injects interactive components and metadata into syntax-highlighted code by treating tokens as individual renderable elements.
- [Code](https://awesome-repositories.com/f/user-interface-experience/callouts/chart-annotations/callout-annotations/code.md) — Inserts explanatory notes directly into code blocks that link specific lines to corresponding descriptions. ([source](https://codehike.org/docs/code/callout))
- [Code Diff Visualizations](https://awesome-repositories.com/f/user-interface-experience/code-diff-visualizations.md) — Highlights inserted and deleted lines using color-coded markers to illustrate differences between code versions. ([source](https://codehike.org/docs/code/diff))
- [Code Diff Visualizers](https://awesome-repositories.com/f/user-interface-experience/code-diff-visualizers.md) — Highlights inserted and deleted lines to visually represent changes between code versions. ([source](https://codehike.org/docs/code))
- [Code Language Pickers](https://awesome-repositories.com/f/user-interface-experience/code-language-pickers.md) — Displays a picker that allows users to toggle between multiple language implementations of the same block. ([source](https://codehike.org/docs/code/language-switcher))
- [Code Presentation Themes](https://awesome-repositories.com/f/user-interface-experience/code-presentation-themes.md) — Overrides the default display of the code container and tokens to implement custom themes and layouts. ([source](https://codehike.org/docs/concepts/annotations))
- [Collapsible Code Sections](https://awesome-repositories.com/f/user-interface-experience/collapsible-code-sections.md) — Hides and reveals specific sections of a code block to simplify long examples. ([source](https://codehike.org/docs/code))
- [Compiler Data Visualizations](https://awesome-repositories.com/f/user-interface-experience/compiler-data-visualizations.md) — Integrates TypeScript type information and compiler error messages directly into code blocks for type-aware documentation. ([source](https://codehike.org/docs/code/twoslash))
- [Tooltips](https://awesome-repositories.com/f/user-interface-experience/content-display-components/tooltips.md) — Shows rich content tooltips when hovering over specific tokens in the code. ([source](https://codehike.org/docs/code))
- [Code Footnotes](https://awesome-repositories.com/f/user-interface-experience/content-dividers/content-sectioning/section-jump-links/code-footnotes.md) — Links specific lines of code to descriptive notes appearing below the code block. ([source](https://codehike.org/docs/code/footnotes))
- [Code Slideshows](https://awesome-repositories.com/f/user-interface-experience/data-display-components/slideshow-displays/code-slideshows.md) — Displays content and code walkthroughs as a series of slides for sequential technical tutorials. ([source](https://codehike.org/docs/layouts/slideshow))
- [Code Spotlight Layouts](https://awesome-repositories.com/f/user-interface-experience/in-app-asset-spotlighting/code-spotlight-layouts.md) — Provides a spotlight layout that guides users through implementation by pairing feature lists with a persistent code block. ([source](https://codehike.org/docs/layouts/spotlight))
- [Interactive Tooltips](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-elements/interactive-tooltips.md) — Displays interactive popovers containing rich content when hovering over specific code tokens. ([source](https://codehike.org/docs/code/tooltip))
- [Language Implementation Switchers](https://awesome-repositories.com/f/user-interface-experience/language-implementation-switchers.md) — Provides a picker to swap the displayed code between different programming languages. ([source](https://codehike.org/docs/code))
- [Code Callouts](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/code-presentation-utilities/code-line-highlighting/code-block-annotations/code-callouts.md) — Inserts explanatory notes within code blocks that reference specific lines or tokens. ([source](https://codehike.org/docs/code))
- [Code Visibility Toggles](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/code-presentation-utilities/code-line-highlighting/code-visibility-toggles.md) — Implements visual controls to dim non-essential code and keep selected lines bright. ([source](https://codehike.org/docs/code))
- [Tabbed Code Blocks](https://awesome-repositories.com/f/user-interface-experience/tabbed-interfaces/tabbed-code-blocks.md) — Groups multiple related code blocks into a tabbed interface for easy switching. ([source](https://codehike.org/docs/code))
- [Regex-Based Selection](https://awesome-repositories.com/f/user-interface-experience/text-selection-control/regex-based-selection.md) — Uses regular expressions to identify and select specific text patterns within code blocks for styling and annotation.

### Web Development

- [Documentation Frameworks](https://awesome-repositories.com/f/web-development/mini-app-frameworks/vue-based-frameworks/documentation-frameworks.md) — Provides a framework for building content-heavy documentation sites with interactive code walkthroughs using React and Markdown. ([source](https://codehike.org/docs/examples))
- [Interactive Documentation Frameworks](https://awesome-repositories.com/f/web-development/interactive-documentation-frameworks.md) — Provides a comprehensive framework for building interactive technical tutorials and documentation using React and Markdown.

### Data & Databases

- [Content Schema Validation](https://awesome-repositories.com/f/data-databases/data-governance-modeling/data-management-governance/data-integrity-validation/data-validation/content-schema-validation.md) — Enforces type safety and structural consistency on markdown-extracted data using predefined data schemas.

### Software Engineering & Architecture

- [Code Folding](https://awesome-repositories.com/f/software-engineering-architecture/code-edit-formats/structural-folding/code-folding.md) — Allows hiding specific segments of code behind a clickable ellipsis to reduce visual noise. ([source](https://codehike.org/docs/code))