Top Git GUI Tools and Extensions for 2020

Simplifying Git with awesome GUI tools and IDEs extensions.

Beginners generally start with Git terminal commands to understand the basics of Git. While it a good idea to learn Git’s terminal commands, you may feel tedious when going back to the terminal for a fairly simple task as a commit or a push.

In this post, we discuss the top Git GUI tools and extensions to make such simple tasks in Git easier, thereby increasing the efficiency of your workflow.

First, we cover certain things that one must be aware of before using tools and extensions. Next, we cover popular Git extensions for popular text editors, Sublime Text and Atom. Finally, we look at three popular Git GUI tools.

Independent Versioning of JavaScript Components

Thanks to tools like Bit, you can a version individual components, on top of your ‘regular’ repo-level versioning.

Bit tracks your app’s components (vanilla JS, React, Vue, Angular, etc.) as independent pieces of code and publishes them to Bit.dev, a cloud component hub that makes reusable components available and discoverable for you and your team.

Browsing through shared React components in Bit.dev

It’s a great way to maximize code reuse (in and across repositories), speed up development and build a more maintainable codebase.

Components published on Bit.dev can also be cloned (as source-code) into any project, where they can be modified and published back to Bit.dev, with a bumped version. That means collaboration is no longer limited by the borders of your repository.

A Note on Git GUI Tools and Extensions

Before you decide to use these tools and extensions full time, let us take a step back and examine what are the pros and cons. Git GUI tools and extensions provide a fantastic way of completing your Git actions quickly and efficiently. They offer the benefit of visual demonstration of diffs and project history, that is certainly challenging to demonstrate on the terminal. Git GUI tools and extensions integrate seamlessly into your workflow without having to switch between your text editor and the terminal.

While they offer plenty of benefits, there are potential issues that you should be aware of. First, these tools and extensions can only offer a certain number of Git features — complex actions like cherry-pick can still be performed only on the terminal. Therefore, it is a good idea to learn Git’s terminal commands too. Further, the learning curve for each of these tools is easier when you are aware of how Git works in the background through terminal commands. Next, terminal commands are often faster to execute, since there is no lag between execution and display of the results. Finally, the biggest deterrent to relying solely on these tools is that their UI may not be consistent across platforms and versions.

Therefore, we suggest that you use Git GUI tools and extensions only once you have grown comfortable with terminal commands. In this post, we will demonstrate how to complete regular Git tasks with these tools and extensions.

1. Git Extension for Sublime Text

Sublime Text is a popular cross-platform text editor for Windows, Linux, and Mac. It has an untimed trial, with a single user license for $80 if you intend to use it permanently. One reason for the popularity of Sublime Text is the availability of third party extensions, that you can install through Package Control.

To use Git’s abilities from the comforts of Sublime Text, press Ctrl/Cmd + Shift + p , and select “Package Control: Install Package”. Select Git from the list. This will initiate the installation of Sublime Text’s Git extension.

Installation of a Sublime Text Plugin

Once the extension has been installed, open the root directory of a Git repository. Select Ctrl/Cmd + Shift + p and start typing any Git command. For instance, to check the changes in your current repository, type git diff and press enter. The output of the command opens up as a new tab.

Checking the diff of all files

You can similarly check the history of a project, which opens up within the menu on typing git log .

Git History

When you select a single commit within the project history, the commit details open up in a new tab.

Commit Details

Advanced commands such as git blame are enabled in this Git extension too.

Git Blame

You can use additional Git related extensions in Sublime Text such as Git Gutter, which shows the changes in a file that is open in the gutter next to the line numbers.

2. Built-in Git Extension in Atom

Atom is a desktop text editor built by GitHub. Git and GitHub capabilities are available from within Atom’s UI if you need to use it. Just select the Git or GitHub option on the bottom right of the text editor which shows a relevant menu for Git related tasks.

In this menu, when you select the Git tab, you are able to see the unstaged changes, files, and staged changes. You can proceed to stage changes and create a commit with a message.

Status of a repository

You can change the active branch or create a new one from the options at the bottom right. You can also update your current repository from the remote.

Change active branch in Atom

Once you have created a commit, you can push any new changes from within Atom’s UI from the options at the bottom right.

Push changes once a commit is created

While these basic Git related commands are easily doable in Atom, you can switch over to the GitHub tab to create a pull request if you have new commits, which will redirect you to a link on GitHub comparing the changes between the branches.

3. GitHub Desktop

While we have checked the Git extensions for two popular text editors, let us move on to Git GUI tools. These tools provide a bit more freedom as compared to the text editor extensions as their UI is created extensively for this purpose.

GitHub Desktop is a free desktop client launched by GitHub to manage Git repositories on your local computer. This desktop tool is available for Mac and Windows only. While it’s really convenient to manage GitHub repositories with GitHub Desktop, you can also manage local Git repositories with this tool.

Notice that UI of the changes in the GitHub Desktop look similar to that of Atom. There are two categories of files for staged and unstaged changes. The diff of each selected file is shown on the right. Select files to stage for a commit and type in a commit message to create a commit.

Status of a repository in GitHub Desktop

The three options at the top are there to select the repository, the current branch, and action to update the repository from the origin remote. The third button changes to push changes to the origin when you create a commit.

Push changes to the origin remote

Changing to the history tab shows the history of the project. However, it only shows the history of a single branch and does not show linkages between multiple branches.

History of the project in GitHub Desktop

Overall, GitHub Desktop is a great tool to manage GitHub hosted repositories, but you will need to occasionally turn to the terminal to perform certain advanced commands like cherry-pick.

4. SourceTree

SourceTree is a Git GUI tool developed by Atlassian, the creators of BitBucket. It is a free Git GUI tool for Mac and Windows. Since BitBucket supports both Git and Mercurial, the SourceTree application can manage a repository that uses either of these version control systems.

The status of the repository looks similar to that of GitHub Desktop in terms of the staged and unstaged area, the diff in a selected file and the ability to enter a commit message in the same window.

Status of a repository in SourceTree

The history of the project is much better in this tool. Linkages between branches and loops created by merges are all shown when you click on the history option from the left menu

History of project in SourceTree

The buttons on the top allow you to perform simple operations in Git. You can commit changes, manage branches and remotes, and even create a stash in Git from the top menu.

Top Menu in SourceTree

Advanced options such as tags, sub-modules, and sub trees are also available in SourceTree.

Final Thoughts

In this post, we covered the basic usage of two Git extensions for popular text editors and two popular Git GUI tools. We also discussed the pros and cons of GUI tools and why they should serve as a complement to Git’s terminal commands to bring in efficiency to your Git workflow.

What is your favorite Git GUI tool or extension? Comment and let us know.

Learn More