Inspired by a conversation on Twitter initiated by @fmontes, where developers sought ways to generate aesthetically pleasing screenshots of Git diffs, the idea for Beautiful Git Diffs ↗ was born. This project aims to provide a solution that is both elegant and functional, filling a gap in the developer community for a free, on-the-go tool for generating visually appealing Git diff screenshots.
Beautiful Git Diffs ↗ is a web application built using the Next.js framework. It offers users the ability to effortlessly create stunning screenshots from their Git differentials. The application operates entirely on the client-side, ensuring seamless customization and interaction without the need for server-side processing. Embracing a minimalist philosophy, the design prioritizes simplicity and ease of use, empowering users to configure their screenshots with precision and skill.
Features
Effortless Setup: Paste your code, configure a few options, and watch the magic happen.
Dynamic Diff Viewer: Leveraging diff algorithm capabilities, the application accurately renders code differences, ensuring precise visualization.
Customizable Code Editor: Empowering users to input their code on a robust code editor. The application's code editor interface allows seamless input of code snippets.
Flexible Customization: Providing users with complete control over their screenshots' appearance. Features such as resizable parent and child containers and the ability to reposition elements ensure unparalleled customization freedom.
Challenges
I did faced some challenges as well on the way, Here are some that I can remember at the time of writing this.
-
I had to create a diff viewer that looks like how we see diffs in source control websites like github/gitlab/bitbucket. There were some packages that helped with initial diff calculation. Later I found react-diff-viewer which is basically what I wanted to build on my own. The package uses jsdiff to calculate the diffs and present it in a code editor like container.
-
Designing an editor that seamlessly integrates with Git and supports user input proved challenging too, But after some research I found out monaco editor the editor which is the fully featured code editor from VS Code, After playing around with monaco editor a bit, I was able to reach to a state that I wanted
-
Providing extensive customization options while maintaining simplicity presented a delicate balance. Iterative design and feedback loops were instrumental in refining the application's customization features.
What's next?
There are some planned updates for this project. Here are some of the items that have priority.
- More config options to user while exporting the image
- Ability to share directly to social platform
- More customisation options for code editor
- Let user save their snippets -- Requires registration
This is an open source project and can be found at GitHub