The idea for Beautiful Git Diffs ↗ came from a conversation on Twitter started by @fmontes, where developers were discussing better ways to create good-looking screenshots of Git diffs.
I wanted a free, fast, on-the-go tool that could turn code changes into polished images without requiring a complicated setup.
Beautiful Git Diffs ↗ is a Next.js web app that runs entirely on the client. Users can paste a diff, customize the presentation, and export a screenshot without sending the code to a server.
The design goal was simple: make the output look good while keeping the editor easy to use.
Features
Effortless setup: Paste your code, adjust a few options, and export the image.
Dynamic diff viewer: The app uses diffing libraries to render additions, deletions, and changes accurately.
Customizable editor: Users can edit snippets directly in a familiar code editor interface.
Flexible styling: Users can resize containers, reposition elements, and adjust the screenshot layout.
Challenges
I ran into a few interesting challenges while building it.
-
I needed a diff viewer that felt familiar to developers who use GitHub, GitLab, or Bitbucket. I started with packages for the diff calculation, then found react-diff-viewer, which already handled much of the rendering I wanted. It uses jsdiff to calculate diffs and present them in a code-editor-like container.
-
Designing an editor that supported direct user input was also tricky. After some research, I used Monaco Editor, the editor that powers VS Code. After experimenting with it, I was able to get the editing experience close to what I wanted.
-
Balancing customization with simplicity took iteration. Too many options made the tool feel heavy, while too few made it less useful. Feedback loops helped me refine the controls.
What's next?
I still have a few planned updates for the project:
- More export configuration options
- Direct sharing to social platforms
- More code editor customization
- Saved snippets for signed-in users
This is an open source project and can be found at GitHub