Git Canvas for VS Code
A focused visual Git client that runs directly inside a VS Code editor tab.
Git Canvas is currently available as a public preview.
Requirements
- Visual Studio Code 1.120 or later.
- Git installed and available in your environment.
- An open local Git repository.
Installation
Install Git Canvas from the Visual Studio Marketplace, or download the latest VSIX from the GitHub Releases page and run Extensions: Install from VSIX... in VS Code.
Open Git Canvas
- Open a Git repository in VS Code.
- Run
Git Canvas: Open Git Client from the Command Palette (Cmd/Ctrl+Shift+P).
Git Canvas is also available from the Source Control view title bar.
Features
- visual commit graph with branches, remotes, tags, and stashes;
- staged and unstaged working tree changes;
- file and repository Git actions;
- fetch, pull, push, merge, rebase, and cherry-pick workflows;
- commit inspection, search, and diff previews;
- conflict detection and resolution;
- colors adapted to the active VS Code theme.
Development
yarn install --frozen-lockfile
yarn compile
yarn test:unit
Press F5 in VS Code to start the Extension Development Host. Run yarn package:vsix to create a local Marketplace package.
Releases
GitHub releases are automated through .github/workflows/publish.yml and require no publishing secret. Create a release with:
yarn release:patch # or release:minor / release:major
git push --follow-tags
The version commit and v* tag trigger validation, VSIX packaging, artifact upload, and creation of the matching GitHub pre-release. Download the resulting VSIX from GitHub Releases to upload it manually to the Visual Studio Marketplace.
Privacy
Git Canvas operates on the local repository opened in VS Code. It does not include analytics or telemetry and does not upload repository contents.
Contributing and support
See CONTRIBUTING.md before submitting a pull request. Report bugs through GitHub Issues. Security reports should follow SECURITY.md.
License
Git Canvas is released under the MIT License.
Architecture
src/
├── domain/ # Models and message contracts
├── panels/ # Webview lifecycle and orchestration
├── services/ # Git access and use cases
├── webview/ # Secure HTML document generation
└── extension.ts # Composition root and VS Code commands
media/
├── features/
│ ├── toolbar/
│ ├── sidebar/ # Sidebar HTML, CSS, menus, and dialogs
│ ├── changes/
│ ├── content/
│ ├── history/
│ ├── diff/ # Diff HTML, CSS, and renderer
│ └── commit-form/
├── scripts/ # Webview bootstrap
├── styles/ # Global styles
└── templates/ # main.html shell
The domain layer does not depend on VS Code. The panel orchestrates services and sends typed messages to the webview. HTML components are declared in src/webview/manifest.ts and can recursively compose other components. The final document receives only its secure URIs, icons, and CSP nonce. Frontend resources remain restricted to the media directory through localResourceRoots and a Content Security Policy.
