PR Review Canvas

PR Review Canvas · Open source. On your machine.

Big PR.
Clear picture.

Follow the intent behind the diff.

Turn a large pull request into a guided canvas. Review semantic layers one by one. Follow changes across files, inspect focused diffs, and make informed decisions with an AI copilot by your side.

Explore a sample reviewView on GitHub

Built by Vinta Software

A sample canvas for one pull request

PR review canvaslocalhost:3010EXCERPTS FROM A REAL PR · INTERACTIVE WALKTHROUGH

#9612 Configurable timers

TanStack Query #9612 +471 −51 18 files

0 of 3 sample layers reviewed

Layer 1 of 3 PROVIDER API

Make the timer provider replaceable.

A manager delegates timer creation and cancellation to a configurable provider. Its new tests check that calls reach the provider.

Attention points · 1

When can a provider change?

Check what happens to existing timer IDs if a different provider is installed after timers have started.

Files · 2

query-core/src/timeoutManager.tsdiff excerpt 
+  setTimeout(callback: TimeoutCallback, delay: number): ManagedTimerId {+    if (process.env.NODE_ENV !== 'production') {+      this.#providerCalled = true+    }+    return this.#provider.setTimeout(callback, delay)+  }++  clearTimeout(timeoutId: ManagedTimerId | undefined): void {+    this.#provider.clearTimeout(timeoutId)
query-core/src/__tests__/timeoutManager.test.tsxSAME LAYER

Tests

Added test: proxies calls to the configured timeout provider Read this excerpt in the source ↗
Based on TanStack/query #9612: configurable timers.TanStack MIT license
Runs on localhostClaude Code or CodexGitHub comments & reviewsApache-2.0 licensed

01 / SEMANTIC LAYERS

Understand the change.
One concern at a time.

Follow a change from schema to test.

A feature can span a migration, an endpoint, a client, and tests. Semantic layers bring those related changes together so you can review one concern at a time.

The same file can belong to different layers depending on semantics.

Each layer can include rationale, trade-offs, test notes, checks to do by hand, and a diagram when it helps explain the change. You review the source and mark your progress as you go.

Explore the sample layers
Layer 2 of 3Query lifecycle

One layer brings related changes across files into a single review.

  • Create and clear stale timersqueryObserver.ts
  • Schedule garbage collectionremovable.ts

Two files from the same layer. One concern: timer lifecycle.

query-core/src/queryObserver.tsreal diff excerpts
Import-only change2 additions folded 
   shallowEqualObjects,   timeUntilStale, } from './utils'+import { timeoutManager } from './timeoutManager'+import type { ManagedTimerId } from './timeoutManager' import type { FetchOptions, Query, QueryState } from './query'
⋯ separate chunk · timer cancellation
   #clearStaleTimeout(): void {     if (this.#staleTimeoutId) {-      clearTimeout(this.#staleTimeoutId)+      timeoutManager.clearTimeout(this.#staleTimeoutId)       this.#staleTimeoutId = undefined     }   }

The behavior change stays in view.
Click the fold to inspect the imports. View the full PR diff ↗

02 / MECHANICAL-CHANGE FOLDS

Less scrolling.
More signal.

Keep your attention on behavior changes. Import-only edits, moved code, and mechanical changes start collapsed behind a brief summary.

Expand a fold whenever you need the details.

Folded means tucked away, but you can still check those.

03 / AI CHAT, IN CONTEXT

Ask where
the question starts.

Choose Ask on a layer, file, attention point, or selected lines. The chat gets that review context, so you can dig into a decision or edge case without assembling another prompt from scratch.

Waste no API credits. Use your locally installed, signed-in Claude Code or Codex agent through acpx.

Set up optional AI Chat
AI ChatSCRIPTED EXAMPLE
Context: TanStack Query · timer provider
Does changing the timer provider also change notification scheduling?
EXAMPLE RESPONSE

No. The default notification scheduler uses systemSetTimeoutZero, which calls global setTimeout(callback, 0) directly. The provider controls managed timers. The added test checks that zero-delay scheduling still uses the global timer after a custom provider is installed.

Read the zero-delay scheduling test ↗

Scripted explanations grounded in the linked PR, not a live agent conversation. This website makes no AI requests.

YOUR MACHINE. YOUR AGENT.

Put the subscription
you already have to work.

A cost-effective review workflow built around your existing Claude Code or Codex subscription. PR Review Canvas is free and open source, with no API costs.

01

A local review workspace

The app runs on localhost. Canvases, preferences, review progress, and chat history are saved in your project's .pr-review/ directory.

02

Your existing AI account

Generation and optional chat use your installed coding agent and its account. Your provider's plan limits and any usage charges still apply.

03

GitHub stays in the loop

Fetch PR data and shared canvases, then post comments, replies, approvals, or requests for changes using your GitHub CLI login. GitLab merge requests work through glab.

Local app, connected services. Generation and chat send review context to your selected AI provider. GitHub requests fetch PR data and submit feedback you choose to post. “Local” describes where the app and review state live; it doesn't mean offline AI.

FROM INSTALL TO FIRST REVIEW

Bring a PR.
Build some context.

You'll need Node.js 22+, npm, Git, and an authenticated GitHub CLI (or GitLab CLI for GitLab).
Use Claude Code or Codex to generate a canvas.

01

Install & set up a project

Install the CLI once. Set up the skill in each repository you want to review.

npm install -g @vintasoftware/pr-review-canvas
cd /path/to/your-project
gh auth login
pr-review install-skill
pr-review doctor
02

Author: generate & share

In your coding agent, run the skill with your PR number:

/pr-review-canvas 123

The skill automatically shares the canvas in a GitHub PR or GitLab MR comment. Open the returned local URL to review it. If sharing fails, the skill warns you and gives you a ZIP to upload manually into the PR or MR description.

Then self-review: read the canvas before asking for review. Points marked yours are for you to settle. Resolve each with a reason, and reviewers see only what's left.

03

Reviewer: open & review

From your own clone of the project, start the local server:

pr-review serve

It opens the project's page in your browser: enter the PR number there, or run pr-review open 42 to go straight to it. Leave the terminal running; in another project, pr-review open adds it to the same server. The app discovers the shared canvas and gets source diffs from your clone.

+

Add optional AI Chat

Install acpx and sign in to Claude Code or Codex on the same machine.

npm install -g acpx
pr-review doctor --all-checks

Restart the server. In settings, under AI Chat choose the chat agent, optionally set a chat model, click Test agent, and save. Reading a canvas doesn't require chat.

MAKE IT FIT YOUR CODEBASE

Your review standards.
Your canvas.

Commit pr-review.config.yml to share review guidance with the team. Keep personal preferences in the Git-ignored .pr-review/settings.yml.

Shape the review
Supply a rulebook, suggest layers by concern and path, and flag high-risk changes. Layer hints guide the agent; it can split, combine, or reorder them.
Tune generation
Choose strict quality review or a surfacing walkthrough, and the model each agent generates with. Define test-file patterns, adjust text caps, and replace prompt templates.
Make it yours
Choose a skin, light or dark theme, chat agent, model, timeout, and turn limit. Projects can disable chat entirely.
Full configuration reference
pr-review.config.ymlshared with your team 
# A starting point for your project
version: 1

layers:
  - id: caching
    title: Cache behavior
    description: Query caching and invalidation
    paths: ['src/cache/**']

highRisk:
  - pattern: '**/migrations/**'
    label: schema

generation:
  mode: surfacing
  models:
    claude: opus

tests:
  patterns: ['**/*.test.*', '**/*.spec.*']

chat:
  enabled: true

Optional settings. Start with the defaults, then add the guidance your project needs.

A FEW PRACTICAL DETAILS

Frequently Asked Questions

What is PR Review Canvas?

PR Review Canvas is a free, open-source code review tool built by Vinta Software. It runs locally and groups GitHub pull request or GitLab merge request diffs into semantic layers so reviewers can follow related changes across files. Authors generate a canvas with Claude Code or Codex; reviewers open it in their browser.

What are semantic layers in code review?

Semantic layers group diff chunks by the behavior or concern they change, even when those chunks span multiple files. A single layer can connect a schema change, endpoint, client, and tests. Each layer includes review context and tracks your progress.

Does PR Review Canvas support GitLab?

Yes. PR Review Canvas supports GitHub pull requests and GitLab merge requests. Use the authenticated GitHub CLI (gh) or GitLab CLI (glab) for your host. See the installation guide for GitLab and self-hosted GitLab setup.

Does this replace my GitHub workflow?

Your PR and feedback still live on GitHub. The canvas is another way to read the changes and post comments or reviews. Teammates can keep reviewing directly in GitHub.

What's shared in the canvas comment?

PR description, file and chunk metadata, and generated review notes. Source diffs come from each reviewer's clone, and chat history stays local. The compressed payload is readable by anyone with access to the PR or MR. A ZIP upload carries the same data when automatic sharing fails.

Can I review without AI Chat?

Yes. The author uses a coding agent to generate the canvas, but a reviewer can read the shared canvas and diffs without installing acpx or enabling chat.

How does review completion work?

Track progress as you inspect each layer. Approval requires every layer except Other changes to be reviewed for the current head. Requesting changes doesn't require completion. Preview and edit the review body before posting.

How much does it cost?

PR Review Canvas is free, Apache-2.0 open-source software. Reuse your existing Claude Code or Codex subscription for generation and chat. Provider usage limits and charges still apply; there's no separate Canvas subscription.

Where can I find the complete documentation?

See the README for setup and the CLI and configuration reference for commands, settings, and troubleshooting.

BUILT FOR THE HUMAN DOING THE REVIEW

Your next big PR
could use a canvas.

Get started Explore the source