Edit Tutorial

A GitHub Copilot canvas extension that turns the code edits the agent made in the current session into an interactive lesson, so a change to your source code becomes a chance to learn it.

Edit Tutorial canvas showing a walkthrough step with a before/after diff and a quiz

Features

Walkthrough: one step per focused edit, each with the file, an explanation, a before/after code view with change highlighting, and an optional multiple-choice quiz.
Exercise: finishing the walkthrough unlocks a hands-on task that applies the same technique as the session's edits, but as a slight variation (a different function, module, or parameter values). The learner writes the solution in the canvas editor.
Completion: local regex checks validate the attempt, hints reveal one at a time, a reference solution unlocks after repeated failed attempts, and the learner can send their code to Copilot for a coaching review. Passing the checks, or an approving review, completes the lesson.
Persistence: lesson content and learner progress survive canvas reloads through the session workspace.

For example, if the agent added retry-with-backoff logic to fetchUser, the lesson walks through that change and then asks the learner to apply the same pattern to fetchOrders with a different attempt cap and starting delay.

Usage

Let Copilot make a change to your code, then open the Edit Tutorial canvas and click "Build my tutorial" (or just ask: "teach me what you changed").
Copilot reviews the edits it made in the session and publishes the lesson to the canvas with the set_tutorial action.
Work through the steps, answer the quizzes, and finish the exercise in the canvas editor.

Canvas Actions

Action	Purpose
`set_tutorial`	Publish or replace the lesson (title, summary, steps, exercise)
`get_progress`	Read the learner's step progress and current exercise attempt
`approve_exercise`	Mark the exercise complete after a successful review
`reset_progress`	Restart the current lesson without changing its content

Example `set_tutorial` Payload

{
  "title": "Retry with exponential",
  "summary": "The API client now retries transient failures with exponential.",
  "steps": [
    {
      "file": "src/api/client.js",
      "heading": "Wrap the request in a retry loop",
      "explanation": "The single request call becomes a bounded loop.",
      "before": "const res = await get(\"/users/\" + id);",
      "after": "for (let attempt = 1; attempt <= maxAttempts; attempt++) { ... }",
      "quiz": {
        "question": "Why bound the loop?",
        "options": ["To avoid retrying forever", "To speed up requests"],
        "answerIndex": 0,
        "why": "A bounded loop guarantees the call eventually settles."
      }
    }
  ],
  "exercise": {
    "heading": "Your turn: retry the orders endpoint",
    "brief": "Apply the same pattern to fetchOrders, capped at 5 attempts.",
    "file": "src/api/orders.js",
    "starterCode": "async function fetchOrders(customerId) { ... }",
    "hints": ["Start from the loop shape used in fetchUser."],
    "solutionChecks": [
      { "pattern": "maxAttempts\\s*=\\s*5", "hint": "Cap the attempts at 5" }
    ],
    "solution": "async function fetchOrders(customerId) { ... }"
  }
}

Quizzes are optional per step. Each solutionChecks entry is a JavaScript regular expression the learner's attempt must match; its hint is shown when the check fails.

Repository Layout

extension.mjs          Canvas extension source (the extension entry point)
plugin.json            Plugin manifest
assets/                Branding and plugin logo (icon, logo, preview)
tools/make-preview.mjs Renders the canvas UI with sample data

Development

npm run check    # Syntax-check the extension source
npm run preview  # Write static preview pages to .tmp/preview/

The preview tool renders the real canvas UI with a sample lesson and no SDK or session required; open the generated pages in any browser to review styling and interaction states.

License

MIT