Gitorial Logo

Gitorial

Since April 2025
GitHub Live Demo
TypeScript Git VSCode Extension Webview API Svelte

About the Project

Gitorial is an open‑source VS Code extension that brings interactive, step‑by‑step coding tutorials directly into the editor. As the founder and core maintainer, I designed Gitorial to turn learning into a hands‑on experience: each tutorial is a real Git repository with guided commits, checkpoints, and solutions you can diff against as you go.

This work is proudly supported by the Polkadot community through OpenGov funding, which enables sustained development and community growth around the project.

My Role

  • Founder and product lead
  • Architecture and core extension development
  • UX for the in‑editor tutorial flow (webviews, commands, persistence)
  • Community stewardship and roadmap

Highlights

  • Interactive, Git‑native tutorial format based on the Gitorial spec
  • Clean, distraction‑free UI integrated into VS Code
  • Automatic file focusing and progress persistence across sessions
  • Built‑in solution diffs for each step
  • Extensible foundation for authoring and publishing tutorials

Key Features

  • Clone and open tutorials from Git in one command
  • Render rich Markdown for each step alongside code
  • Navigate via a guided timeline of commits
  • Compare your work with official solutions using VS Code’s diff view
  • Works entirely offline once cloned

Tech

  • TypeScript, VS Code Extension API, Webview API
  • Git as the content transport and progression model
  • Svelte for rich tutorial panels

What’s Next

  • First‑class authoring experience inside VS Code
  • Sharable tutorial templates and validation tooling
  • Community‑driven library of high‑quality tutorials