Multiple Cursors

One of the most powerful features Helix has is multiple cursor.

Multiple cursors allow you to perform complex refactors which can be broken down to a series of steps, as well as search-and-replace.

The best way to learn is with examples, and we’ll provide you with many examples on this page.

Introduction

We have some HTML which has repeating classes:

    1  <a class="font-bold px-3" /> 
    2  <a class="font-bold px-3" /> 
    3  <a class="font-bold px-3" /> 
    4  <a class="font-bold px-3" /> 
 NOR   file.html [+]     1 sel  1:2 
                                    

And we want to change each px-3 class to px-4, as well as each font-bold class to font-thin:

    1  <a class="font-thin px-4" /> 
    2  <a class="font-thin px-4" /> 
    3  <a class="font-thin px-4" /> 
    4  <a class="font-thin px-4" /> 
 NOR   file.html [+]     1 sel  1:2 
                                    

---

1. First, begin by placing your cursor on the first 3:

       1  <a class="font-bold px-3" /> 
       2  <a class="font-bold px-3" /> 
       3  <a class="font-bold px-3" /> 
       4  <a class="font-bold px-3" /> 
    NOR   file.html [+]    1 sel  1:24 
                                       
   

2. Press C which creates a cursor below, until you have a cursor on each individual 3:

       1  <a class="font-bold px-3" /> 
       2  <a class="font-bold px-3" /> 
       3  <a class="font-bold px-3" /> 
       4  <a class="font-bold px-3" /> 
    NOR   file.html [+]   4 sels  4:24 
                                       
   

3. Press r which will replace the character, and then 4 to replace each of the 3s with a 4.

       1  <a class="font-bold px-4" /> 
       2  <a class="font-bold px-4" /> 
       3  <a class="font-bold px-4" /> 
       4  <a class="font-bold px-4" /> 
    NOR   file.html [+]   4 sels  4:24 
                                       
   

4. Our goal is to change the class font-bold to font-thin, which you can do by pressing bbb until each bold is highlighted:

       1  <a class="font-bold px-4" /> 
       2  <a class="font-bold px-4" /> 
       3  <a class="font-bold px-4" /> 
       4  <a class="font-bold px-4" /> 
    NOR   file.html [+]   4 sels  4:16 
                                       
   

5. Press c to change, and then type thin and Esc to return back to normal mode.

       1  <a class="font-thin px-4" /> 
       2  <a class="font-thin px-4" /> 
       3  <a class="font-thin px-4" /> 
       4  <a class="font-thin px-4" /> 
    NOR   file.html [+]   4 sels  4:21 
                                       
   

Choosing a Strategy

There are often many ways to accomplish the same refactoring with different keystrokes in Helix, which provides nice flexibility.

Let’s see the same example we have done previously, but in a slightly different manner.

---

1. From the following state:

       1  <a class="font-bold px-3" /> 
       2  <a class="font-bold px-3" /> 
       3  <a class="font-bold px-3" /> 
       4  <a class="font-bold px-3" /> 
    NOR   file.html [+]     1 sel  1:2 
                                       
   

2. Press gw to show two letters at the start of each word:

       1  <a aaass="abnt-acld ad-3" /> 
       2  <a aeass="afnt-agld ah-3" /> 
       3  <a aiass="ajnt-akld al-3" /> 
       4  <a amass="annt-aold ap-3" /> 
    NOR   file.html [+]     1 sel  1:2 
                        gw             
   

3. Navigate to the first instance of the bold word by pressing the 2-character key combination, which in our case that would be ac:

       1  <a class="font-bold px-3" /> 
       2  <a class="font-bold px-3" /> 
       3  <a class="font-bold px-3" /> 
       4  <a class="font-bold px-3" /> 
    NOR   file.html [+]    1 sel  1:19 
                                       
   

4. The entire bold word is highlighted now.

   Press C again 3 times until you select each instance of bold:

       1  <a class="font-bold px-3" /> 
       2  <a class="font-bold px-3" /> 
       3  <a class="font-bold px-3" /> 
       4  <a class="font-bold px-3" /> 
    NOR   file.html [+]   4 sels  4:19 
                                       
   

5. As you see, the visual selection gets transferred over!

   Change the contents of each selection by using c to delete and enter insert mode — then type thin and Esc to return back to normal mode.

       1  <a class="font-thin px-3" /> 
       2  <a class="font-thin px-3" /> 
       3  <a class="font-thin px-3" /> 
       4  <a class="font-thin px-3" /> 
    NOR   file.html [+]   4 sels  4:20 
                                       
   

6. Press f + 3 to find the next 3:

       1  <a class="font-thin px-3" /> 
       2  <a class="font-thin px-3" /> 
       3  <a class="font-thin px-3" /> 
       4  <a class="font-thin px-3" /> 
    NOR   file.html [+]   4 sels  4:24 
                                       
   

7. We could delete the entire px-3 class if we wanted.

   Instead press a to append at the end of each selection, which puts us into insert mode.

       1  <a class="font-thin px-3" /> 
       2  <a class="font-thin px-3" /> 
       3  <a class="font-thin px-3" /> 
       4  <a class="font-thin px-3" /> 
    INS   file.html [+]   4 sels  4:25 
                                       
   

8. Delete the 3 by pressing backspace, then add a 4, exiting back to insert mode with Esc:

       1  <a class="font-thin px-4" /> 
       2  <a class="font-thin px-4" /> 
       3  <a class="font-thin px-4" /> 
       4  <a class="font-thin px-4" /> 
    NOR   file.html [+]   4 sels  4:24 
                                       
   

As you become more familiar, you’ll learn to pick out more efficient ways of accomplishing the same task, and which method is better based upon circumstances.

Next step

Now that you’ve learned the basics of multiple cursor usage, take your refactoring skills to the next level with macros.