Skip to main content
On this page

Getting Started

Getting Started with Gitorial

Welcome to Gitorial, a VS Code extension that enables interactive, step-by-step coding tutorials directly in your editor. Learn coding concepts, frameworks, and best practices through guided, hands-on experiences.

What is Gitorial?

Gitorial is an interactive learning platform that transforms Git repositories into step-by-step coding tutorials. Each tutorial step is a Git commit that you can navigate, edit, and learn from within VS Code.

Quick Installation

From VS Code Marketplace

  1. Open VS Code
  2. Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X)
  3. Search for “Gitorial”
  4. Click Install

Manual Installation

  1. Download the latest .vsix file from the releases page
  2. In VS Code, run Extensions: Install from VSIX... from the command palette
  3. Select the downloaded .vsix file

Your First Tutorial

1. Clone a Tutorial

Open the command palette (Ctrl+Shift+P or Cmd+Shift+P) and run:

Gitorial: Clone New Tutorial

Enter the Git URL of a tutorial repository and select where to clone it.

2. Open the Tutorial

The extension will automatically:

  • Clone the repository into a new folder
  • Open a new VS Code window with the tutorial
  • Load the Gitorial panel

3. Navigate Through Steps

Use the Gitorial panel to:

  • Next Step: Move forward through tutorial steps
  • Previous Step: Go back to review previous steps
  • Jump to Step: Navigate directly to any step
  • View Solutions: Compare your work with step solutions

Basic Usage

Tutorial Panel

The Gitorial panel provides:

  • Step Navigation: Move between tutorial steps
  • Content View: Rendered Markdown for each step
  • Progress Tracking: Visual progress indicator
  • File Management: Automatic file opening for each step

Git Integration

Gitorial uses Git commits as tutorial steps:

  • Each step represents a specific code change
  • Navigate between steps like Git commits
  • See exactly what changed in each step
  • Reset to any previous step if needed

VS Code Integration

The extension integrates seamlessly with VS Code:

  • Editor Management: Automatically opens relevant files
  • Tab Tracking: Keeps track of open files per step
  • Diff Views: Compare your changes with solutions
  • Persistent State: Remembers your progress across sessions

Next Steps

Now that you’re familiar with the basics:

  1. Explore Features - Learn about advanced Gitorial capabilities
  2. Create Tutorials - Start authoring your own interactive tutorials
  3. Contribute - Join the Gitorial development community

Ready to dive deeper? Check out the Features section to learn about all the powerful capabilities Gitorial offers.