How to add GIFs to your GitHub README

What is the best way to display your web development projects to potential employers, friends and family?

Joe Cardillo
2 min readMay 10, 2018
Photo by Ben Sweet on Unsplash

Images and videos capture our attention more than static code on GitHub. (At least for most of us.)

GitHub is clearly a great tool for version control and collaborating on projects. But what if you just want to show them to friends, family, or potential employers without hosting all of them on Heroku?

Friend: Can you show me what you’ve been working on?
You: Just clone my repo.

Yeah, right!

GIPHY Capture

A bite-sized option is to add a GIPHY of your project on GitHub (or Facebook) showing it in action.

Note: GIPHY Capture only records up to 30 seconds, so if there are additional pages and features you want to show, consider adding screen shots of these (or multiple GIFs) to your README.

1) To get started, download GIPHY Capture from the App Store.

2) Run your project(s) on your local machine. Open GIPHY Capture and resize it to fit your browser:

3) Record for up to 30 seconds, then trim the clip:

4) Save the file to your desktop, then upload it to the root of your GitHub Repository.

5) Add this line to your README.md file where you want the GIF to show:

![](name-of-giphy.gif)

Le voilà!

--

--