00:00:00Hey everybody, this is Scott the CEO of GitButler.
00:00:02Today I'm going to go through some of the cool features of GitButler and give you
00:00:05just a general overview of what this Git client can do.
00:00:07So I have an example project here. I have a little Twitter clone or X clone. I call it Y.
00:00:12What I'm going to do is I'm going to add some edits that I've already made and we're going to go through
00:00:16and look at how to create commits, how to create branches, how to create parallel branches, how to
00:00:20create stacked branches. If I edit some files, what you're going to see is something similar to like a
00:00:25Git status output of saying these are the files that are now modified in your working directory.
00:00:30What do you want to do with them? How do you want to commit them? So here we can inspect them. I can
00:00:34look into my application CSS, my sidebar, my index, right? There's a couple of small changes that I made
00:00:39here. And so what I want to do is I want to create a new branch and commit these changes to that
00:00:45branch. Now there's a couple different ways that I can do this. I can just hit this commit to new
00:00:49branch or I can explicitly create a new branch here and I'm going to make an independent branch
00:00:54rather than a dependent branch. We'll get to stacking in a second.
00:00:57So you give it a name, you create the branch and now there's a couple different things you can do. You can
00:01:03just commit some stuff, right? So I can just commit this application.css file
00:01:08by either dragging it into the lane and creating a commit or I can actually start a commit from here.
00:01:15You can either do a smaller commit message in this smaller thing or you can sort of expand it out and
00:01:19do a nice long commit message here. Let's keep this somewhat simple. Now the other thing I can do is I
00:01:27can decide what goes in this commit. So I have three files on the side here. I can not only say I don't
00:01:34want this particular file. I can also go into a file and say I only want these specific lines, right?
00:01:39But for now let's just actually commit all of the changes in this. Or actually let's do two
00:01:44different commits. So I don't want to do the sidebar stuff in this one. So I'll do front-end fixes and
00:01:48then I'll do another commit sidebar fixes. And now I have two commits in this new branch. I'm a little
00:01:55lazy so I'm going to use Claude code to actually do this work for me. I'm going to change the theme
00:01:59from blue to red and then we'll see about adding a new separate branch that just has that separate
00:02:04from my front-end fixes. That looks like that's done. So this is what the website looked like before.
00:02:09Kind of a little Twitter thing. If I apply those changes now I have a nice sort of red theme to
00:02:14everything and my front-end changes here are done. And you can see this actually these are independent
00:02:18branches. So if I say unapply the front-end fixes stack it's still red but I sort of have this. This
00:02:25is what I did here. And I can put that back in. And now that's gone. Or same thing. I can
00:02:34unapply the red color theme and now it's not red anymore. So let's put that back in. Now we have two
00:02:43different branches. Now the cool thing about this is that if I for example push this to GitHub
00:02:48these changes are separated from each other. But they're both applied at the same time. So it's
00:02:52just like Git branches except you can have more than one of them that you're working on simultaneously.
00:02:57So if I go in and say continue to work on something in the sidebar then I'll see it here. And I can
00:03:04do a bunch of different things. I can drag it into this and actually amend this commit if I'd like to.
00:03:10I could also commit it as a new commit on that branch. So now we have these two branches that
00:03:14are in parallel. Let's look at a different way that we can do this. What we could have done instead is
00:03:18let's say that the red theme depends on changes that we had done in the front-end. And so I really
00:03:24want to merge the front-end stuff before I actually look at merging the red stuff or merge them all
00:03:29together. So let's undo this commit. We'll uncommit it. And we'll do it as a stacked branch instead.
00:03:37So we'll uncommit it. Unapply the stack. Now what we'll do is we'll add a new dependent branch here.
00:03:42So you hit the create a new branch. You add a dependent branch. The other thing you can do is
00:03:47this. You can say create a dependent branch here and add the stacked front-end fixes. And let's say
00:03:51sc_red_theme. And now you can see that these these branches are stacked. And so I can take this and
00:03:58I can commit it to this one. So now if you have these stacked branches you can push it to GitHub.
00:04:06It's very easy to to sort of push these. If you have the GitHub integration set up you can also
00:04:11create a pull request. And so if I create a pull request that's called say red theme here but this
00:04:16is a stacked branch what it will do is it will inject a footer into the PR description that says
00:04:20this branch is actually dependent on another branch that it targets. And you you're going to have to
00:04:25either merge them all together or merge the front-end fixes before the red theme. But it's a
00:04:30very nice way of doing these sort of stacked branches. So if I look at this PR now it links
00:04:34to both of these in a stack. So this is part two in a stack and this is part one of a stack and
00:04:39they depend on each other. Now the other thing that's cool about this is that you can do what's
00:04:43called assigning to branches. So in this case I have two lanes. I have three branches. Two of them
00:04:48are stacked. One of them is independent. When I start making changes what I can do is I can assign
00:04:54hunks. I can assign changes to a particular branch and keep working on it. So it's sort of like
00:05:00each lane has its own independent staging area. So if you'd run git add and sort of stage changes
00:05:05in git this is similar to that except you can have multiple independent staging areas.
00:05:09So let's try that. I'm going to add a new feature where I add something to the admin page a little
00:05:14sort of section. I'm going to put it in its own branch again in the same working directory in a
00:05:19new branch that's not stacked it's an independent thing and I can open up a PR that is just those
00:05:24changes. Okay so this is the admin dashboard before. I've made some changes done some recent
00:05:31signups in here. I have these two changes here and so what I want to do is I want to assign them to
00:05:37this lane and then if I go in and make more changes it will either put it in unassigned if it can't
00:05:43figure it out. If it's within the same hunks then it will automatically kind of keep it in the assign
00:05:47lane. So let's make some changes to the admin controller here. Just a dumb comment but let's
00:05:55see what it does. So we can see that since the admin controller was already assigned to this lane
00:06:00I don't actually have to keep staging it. It says you know what actually this is part of that change
00:06:05as well and it puts it in that. So let's go ahead and create a new commit on this. I'm going to start
00:06:10the commit again. I can also expand this and do a really nice commit message. I can also use AI to
00:06:15sort of generate commit messages if you want sort of a starting point and you can go in and edit this.
00:06:19It'll look at sort of the differences that you've made and give you at least a starting point. Okay
00:06:23so now we have a commit here in the new signups admin page. We have this sort of stacked branch
00:06:27over on the side here and again I can push and create a PR off of this independently. And if I
00:06:31do that actually and I go check out this PR what we'll see is that even though all of these changes
00:06:37are are in my working directory at the same time it has separated them into different into different
00:06:42branches and so what I can do is I can go in and see just this admin thing. It's clearly only edited
00:06:48the admin pages and kept that in its own branch in its own commit and it isn't sort of connected with
00:06:55all of the other work that's in my working directory. Those are kept in separate branches.
00:06:58So that's the nice thing about working with parallel branches and with sort of stacked branches
00:07:02in git brother. All right so there's a lot of things that we can do that would be quite difficult in
00:07:06normal git and so I'll show you a couple of these. For one thing we can move commits from branch to
00:07:11branch. So if I wanted to take this this new signups commit and move it into the red theme
00:07:15commit I can just drag it and drop it and then I can go ahead and get rid of this stack. And now my
00:07:20commits over here. If I want to squash commits together I can just take this and I can drag it
00:07:26not only to the one below it but to any other commit sort of in the stack. So I can take this
00:07:30admin thing and I can take it down and and put it into sidebar fixes or I can even move it right so
00:07:36I can move it farther down the stack or I can squash it into another commit. And now you can see
00:07:41this admin stuff is also in the sidebar fixes. We can also do the opposite we can split up a commit
00:07:47and the way that we do that is we add in an empty commit and then we move changes into that commit.
00:07:52So if I do this I can add an empty commit anywhere in this stack in this case below. I can write the
00:07:58commit message now or I can move files into it first. Let's go ahead and look at all these files.
00:08:02So we have the admin controller and the sidebar thing. Let's just take this admin index and drag
00:08:08it into this middle one right. And so now this commit only has this admin index the sidebar fixes
00:08:13still have the other the other files in here. Admin controller and sidebar. I can also move just hunks
00:08:20around. So now this one has part of the sidebar fixes and this one has the other part of the sidebar
00:08:30fixes. And now if I want to after the fact I can change the commit message.
00:08:34This brings up another thing which is editing commit messages is very easy right other than
00:08:41just sort of moving the order of them or squashing them together or splitting them apart I can go back
00:08:46and say you know what actually I want to change this to part two. And it will rebase all of the
00:08:53commits on top of that. So the other interesting thing we can do is edit commits in place right and
00:08:57there's a couple of different ways that we can do this really quickly. Say somebody is giving me some
00:09:01feedback and say instead of margin top zero I want it to be margin top 10 pixels or something right.
00:09:06And so now how do we edit a commit that's not only four commits back but in another stack right. And
00:09:13it turns out with git brother this is very very easy. So let's go in and actually make this change.
00:09:16Okay so it's here so let's change this to 10 pixels. Inline CSS is the best. So this is the change that
00:09:23I made here. It is locked because we're editing a hunk that's already been edited so it has to go
00:09:28into this branch somewhere. We couldn't put it in sort of a separate parallel branch so that's that's
00:09:32how we know that. But how do we do that? So the easiest way is to just kind of take this file and
00:09:39we can drag it into this commit right. And so now if we look at this commit we have that 10 pixels in
00:09:46there we've modified that we've rebased the rest of the of the commits on top of that. The other way we
00:09:51can do it of course that we've already kind of seen is we can commit this into a temp commit
00:09:55and then we can just squash this into this one right. So that essentially does the same
00:10:02thing if we go in and we look again the margin is 10 pixels now. And the last interesting way
00:10:07that we can do this is by called edit mode. Let's pretend that we hadn't done anything here. We still
00:10:12have this zero pixels we want to edit this. What we can do is we can go into the actual commit here
00:10:20and we can say edit commit. And if you do edit commit what it does is something interesting.
00:10:25It's kind of like git doing a detached head checkout if you've ever done that. It essentially
00:10:30checks out this commit at that state. You can edit it however you want to and then when you exit that
00:10:36state it'll rebase everything else on top of it again. We'll go in we'll make our change again.
00:10:39It sees that it's modified right you've changed this file and we save and exit. And now again it
00:10:46rebases everything else. We can look at this and our change is stored there. So you can directly
00:10:52edit a commit. You can make the change and amend the commit. You can make the change do a commit
00:10:57and squash the commits. There's lots of different ways that you can manipulate sort of the changes
00:11:01that you have in git brother commits. And the last thing that I'm going to show you is this thing
00:11:05called operations history. So this is something that is very very hard to do in git if you've ever
00:11:10done sort of reflog stuff. I feel like everybody's a little bit afraid of this but everything that you
00:11:15do in git butler is stored in an operations log and you can go in look at your timeline and go back
00:11:21to any point of time in the past. So it's this button over here we can see our operations history
00:11:26over here sort of all the different things that we've done during the session. And I can go back
00:11:30in time to absolutely any point right. So if I wanted to go back before sort of I was starting
00:11:37to do this this 10 pixels thing I could come back here and I can look at this and I can see okay
00:11:42so here's the change that I had done then right before I had done any of that. Or I can even go
00:11:47back to sort of the very beginning of this session that we had right. What it doesn't undo is sort of
00:11:52what was pushed to GitHub. So here I can see these commits that were pushed to GitHub they're listed
00:11:56as upstream commits but I'm going back to before I had committed absolutely anything right. And I can
00:12:01actually get rid of this branch if I want and I can start over from scratch but it doesn't really
00:12:05matter what you do even that undo I can undo right. So if I come over here and I revert the revert
00:12:11snapshot then we're back to kind of where we were right. We can we can always go back in time to any
00:12:16to any point. So it's kind of nice you never really have to be afraid of any of these these actions.
00:12:22If you get into a weird state or you just know you want to go back to what it looked like 10 minutes
00:12:26ago it's very easy to open up the timeline go back hit revert and you're there. Okay so that's a quick
00:12:32overview of git whether rebaser commit editor parallel branches you can do stack branches
00:12:36all very easily without any other tooling. So go ahead and download it tell us in discord what you
00:12:41think, and enjoy.