# pomber/code-surfer

**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/pomber-code-surfer).**

6,378 stars · 175 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/pomber/code-surfer
- Homepage: https://codesurfer.pomb.us/
- awesome-repositories: https://awesome-repositories.com/repository/pomber-code-surfer.md

## Topics

`code` `deck` `keynote` `markdown` `mdx` `mdx-deck` `presentation` `react` `slides` `syntax` `syntax-highlighting`

## Description

Code Surfer is a web-based code slide framework and presentation tool designed for creating technical slides. It functions as a code animation library and diff visualizer that enables the rendering of source code with animated transitions, zooming, and highlighting.

The project focuses on visualizing code evolution through state morphing and diff animations. It uses coordinate-based view transitions and smooth scrolls to guide viewers through changes between different code versions across a slide deck.

The framework provides capabilities for attention management via line-level focus, section zooming, and visual masking. It supports organized layouts through parallel code columns, sequential scrolling for long snippets, and the ability to import external source files to maintain a single source of truth. Visual styling is handled through custom themes and configuration-driven typography.

## Tags

### Education & Learning Resources

- [Technical Presentation Tools](https://awesome-repositories.com/f/education-learning-resources/technical-presentation-tools.md) — Provides a platform for creating technical slide decks specifically optimized for guiding audiences through complex source code.
- [Side-by-Side Comparisons](https://awesome-repositories.com/f/education-learning-resources/language-comparisons/side-by-side-comparisons.md) — Renders multiple pieces of code side-by-side with independent sizing and themes for direct comparison. ([source](https://cdn.jsdelivr.net/gh/pomber/code-surfer@master/README.md))

### User Interface & Experience

- [Presentation Animations](https://awesome-repositories.com/f/user-interface-experience/presentation-animations.md) — Provides a framework for generating technical slides with animated zoom and scroll effects to highlight code changes. ([source](https://cdn.jsdelivr.net/gh/pomber/code-surfer@master/README.md))
- [Code Diff Visualizers](https://awesome-repositories.com/f/user-interface-experience/code-diff-visualizers.md) — Renders visual differences between code versions to illustrate evolution across sequential presentation steps. ([source](https://cdn.jsdelivr.net/gh/pomber/code-surfer@master/README.md))
- [Section Focus Highlighters](https://awesome-repositories.com/f/user-interface-experience/content-dividers/content-sectioning/section-focus-highlighters.md) — Focuses viewer attention by fading out irrelevant code and zooming into specific logic segments. ([source](https://cdn.jsdelivr.net/gh/pomber/code-surfer@master/README.md))
- [Viewport Zooming](https://awesome-repositories.com/f/user-interface-experience/content-dividers/content-sectioning/section-focus-highlighters/viewport-zooming.md) — Enlarges specific code blocks or lines to ensure readability for the audience during a technical presentation. ([source](https://codesurfer.pomb.us/full/))
- [Focus Masking](https://awesome-repositories.com/f/user-interface-experience/element-masks/focus-masking.md) — Uses opacity filters and dimming layers to isolate and highlight specific lines and column ranges of code.
- [Code Presentation Utilities](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/code-presentation-utilities.md) — Provides features for formatting, highlighting, and animating code snippets specifically for use in technical slide decks.
- [Code Highlight Animations](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/code-presentation-utilities/code-highlight-animations.md) — Enables switching between different views of a code block via animated zooming, focusing, and highlighting. ([source](https://cdn.jsdelivr.net/gh/pomber/code-surfer@master/README.md))
- [Code Line Highlighting](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/code-presentation-utilities/code-line-highlighting.md) — Directs attention by dimming the surrounding code to emphasize specific selected lines. ([source](https://codesurfer.pomb.us/full/))
- [Coordinate-Based Slide Transitions](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-layout-styling/synchronized-slide-movement/coordinate-based-slide-transitions.md) — Implements coordinate-based logic to animate the camera's zoom and scroll movement between specific code positions across slides.
- [Code Slide Frameworks](https://awesome-repositories.com/f/user-interface-experience/presentation-styling-frameworks/code-slide-frameworks.md) — Provides a web-based framework for building presentations that load external source files into styled, side-by-side code columns.
- [Code Presentation Themes](https://awesome-repositories.com/f/user-interface-experience/code-presentation-themes.md) — Styles code, backgrounds, and typography using predefined themes or custom configuration objects. ([source](https://cdn.jsdelivr.net/gh/pomber/code-surfer@master/README.md))
- [Column Engines](https://awesome-repositories.com/f/user-interface-experience/flexible-grid-layouts/column-engines.md) — Employs a layout engine to render multiple independent code containers side-by-side with custom sizing.
- [Presentation Navigation](https://awesome-repositories.com/f/user-interface-experience/presentation-navigation.md) — Provides incremental scrolling through lengthy code blocks to maintain readability throughout a presentation. ([source](https://codesurfer.pomb.us/full/))

### Artificial Intelligence & ML

- [Code Walkthroughs](https://awesome-repositories.com/f/artificial-intelligence-ml/step-by-step-task-plans/code-walkthroughs.md) — Moves through a code block step-by-step as the presentation advances to maintain narrative flow. ([source](https://codesurfer.pomb.us/full/))

### Part of an Awesome List

- [Code Walkthroughs](https://awesome-repositories.com/f/awesome-lists/devtools/onboarding-and-walkthroughs/interactive-walkthroughs/code-walkthroughs.md) — Visualizes how code evolves through animated diffs and smooth scrolling transitions across different steps.

### Development Tools & Productivity

- [Code Evolution Visualizers](https://awesome-repositories.com/f/development-tools-productivity/code-evolution-visualizers.md) — Animates the transition between two code snippets to visualize the evolution between different states. ([source](https://codesurfer.pomb.us/full/))
- [Partial File Imports](https://awesome-repositories.com/f/development-tools-productivity/project-imports/external-file-importers/partial-file-imports.md) — Fetches external source files into code blocks to avoid manual duplication within presentation files. ([source](https://cdn.jsdelivr.net/gh/pomber/code-surfer@master/README.md))

### Graphics & Multimedia

- [Diff-Based Interpolations](https://awesome-repositories.com/f/graphics-multimedia/visual-state-interpolation/diff-based-interpolations.md) — Computes visual differences between code versions to animate the transition from one snippet state to another.

### Operating Systems & Systems Programming

- [Build-Time Source Injections](https://awesome-repositories.com/f/operating-systems-systems-programming/system-administration-maintenance/file-system-management/file-systems/file-template-generators/external-file-inclusions/build-time-source-injections.md) — Loads source code from the local file system during build time to populate code blocks without manual copying.