LearnByDiff

Learn course source code through diffs—without losing track of what changed while you follow along.

Full docs and demo videos: rjiazhen.github.io/learn-by-diff.

Install

Search for LearnByDiff in the Extensions view, or open the matching marketplace:

Visual Studio Marketplace (VS Code)
Open VSX (Cursor and other Open VSX-based IDEs)

You can also install a .vsix manually: download it from the release page and drop it into the Extensions view.

Open a course

Click Open Course on the LEARN BY DIFF view title bar in Explorer (or run LearnByDiff: Open Course from the Command Palette).

Select an official course, or paste this demo course config URL and confirm:

https://github.com/RJiazhen/learn-by-diff/blob/main/packages/courses-config/demo-course/.course-config/course.jsonc

In the folder picker, choose a directory for the learning workspace. Course files download into that folder.

Learning workspace after download:

With the extension installed, you can also open the demo in one click:

Learn in your own way

The first time you open a course, chapter 1’s Not Started snapshot is exported locally. For the demo course, preview index.html with Live Preview.

The Learn By Diff view lists chapters and provides:

Action	What it does
Previous / Next chapter	Switch to the adjacent chapter’s Not Started snapshot
Search chapter	Find a chapter by title or id and reveal it in the list
Open chapter docs	Open this chapter’s documentation
Not Started	Apply this chapter’s start snapshot
Completed	Apply this chapter’s finish snapshot
Open Not Started folder	Add this chapter’s start snapshot as its own workspace folder
Open Completed folder	Add this chapter’s finish snapshot as its own workspace folder

You can edit the code anytime to see how changes affect behavior.

You can also expand a chapter to inspect the diffs that implement each feature.

Contributing

See the contributing guide.

LearnByDiff

RuanJiazhen

LearnByDiff

Install

Open a course

Learn in your own way

Contributing