A simple React application that allows you to convert git diff output to images.
- Upload or drag and drop git diff files
- Toggle between light and dark mode
- Download the diff as an image
- Full syntax highlighting for added/removed lines
- Clone the repository:
git clone https://github.com/yourusername/diff-to-image.git
cd diff-to-image- Install dependencies:
npm install- Start the development server:
npm start- Generate a git diff using one of these methods:
# Method 1: Save diff to a file
git diff > my-changes.diff
# Method 2: Diff between two commits
git diff commit1..commit2 > my-changes.diff-
Upload the .diff file to the application by either:
- Dragging and dropping the file onto the drop zone
- Clicking the drop zone and selecting the file from your file explorer
-
Once the diff is displayed, click the "Download Image" button to save it as a PNG file.
- React with TypeScript
- Tailwind CSS for styling
- html-to-image for image generation
- Create React App as the build toolchain
MIT