Enhance Your Development Workflow with Automated Visual Diffing for Git Changes
Streamline your UI review process with a simple yet powerful tool designed to make code changes visually accessible—no setup required.
As developers, we often face the challenge of verifying UI modifications efficiently. Manually testing each change or scribbling notes for reviewers can be time-consuming and error-prone. Recognizing this pain point, we’ve developed a solution that automatically captures visual representations of your UI updates directly from your code repository.
Introducing an intuitive command-line utility that analyzes your recent code alterations, identifies impacted interface components, and generates visual snapshots across multiple device viewports—all without writing extra tests, modifying configuration files, or performing manual setup steps.
How does it work?
Once you’ve made your code changes, simply run the following command:
bash
diffshot --compare main
The tool then:
- Detects which UI elements are affected by your modifications
- Launches your development server automatically
- Captures screenshots of the relevant UI sections across specified screen sizes
- Stores the generated images in a dedicated folder (
.diffshot/screenshots/) - Creates a markdown-formatted summary for easy inclusion in pull request comments
What sets this tool apart?
- Hassle-free setup: Just point it at your project; no additional configuration needed
- No end-to-end tests required: Save time by avoiding writing or maintaining extra test scripts
- Automatic server detection: The utility identifies your dev server command and runs it seamlessly
- Supports authentication flows: Handles login and protected routes out of the box
- Framework agnostic: Compatible with React, Vue, Laravel, and more
Ideal use cases:
- Performing quick visual validations before committing code
- Sharing UI snapshots during code reviews
- Confirming responsive or theme adjustments
Built with TypeScript and leveraging Playwright, this tool integrates smoothly into your existing workflow. It’s currently in development and will be open-sourced shortly. To ensure robustness, we’re looking for enthusiastic developers willing to test early versions, identify edge cases, and help shape the final product.
If you’re interested in a streamlined way to visualize your code changes without manual effort, leave a comment below. Early access will be provided to a select group willing to provide valuable feedback.
Transform the way you review UI changes—bringing clarity, speed, and confidence to your development process.
