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.
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.
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.jsoncIn 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:
- VS Code
- Cursor
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.
More on the website: Features.
See the contributing guide.