DEV Community

Cover image for Using Vim Navigation (h, j, k, l) as Arrow Keys on Mac with Karabiner-Elements
SeongKuk Han
SeongKuk Han

Posted on

1

Using Vim Navigation (h, j, k, l) as Arrow Keys on Mac with Karabiner-Elements

It’s been six months since I switched to neovim from vscode, and a year since I started using Vim motions. I don’t mind using function keys or the escape key because they’re easy to reach if I flatten my hands. However, pressing the arrow keys requires lowering my right hand, which I found bothersome.

Recently, I was talking to a colleague who uses a split keyboard, and his setup was fascinating. One feature that caught my attention was the ability to remap keys dynamically while holding down a specific key.

He mentioned that I could achieve this using Karabiner Elements on a regular keyboard. While I’ve been using Karabiner Elements, my experience was limited to simple key remapping, like replacing one key with another or creating key combinations. Implementing the feature was surprisingly straightforward, and there’s even a predefined rule in Karabiner for using h, j, k, and l as arrow keys. I realized I’d been limiting myself by sticking to familiar setups.

Using the predefined rule worked for basic navigation with h, j, k, and l as arrow keys. However, it didn’t support modifier keys like Option, Command, or Shift, which I frequently use. After some customization, everything worked perfectly. I figured others might be looking for a similar solution, so I’m sharing my configuration here.

If you have a better way or your own setup, please share it in the comments or link to your blog post. Let’s exchange ideas!

There are just two steps to follow—copy and paste the configuration, and you’re good to go. Without further ado, let’s dive in.


Set a modifier key

To enable keys to behave differently while held down, you need to dedicate a specific key for this purpose. In my case, I chose to sacrifice the Caps Lock key. I regularly use the Shift key, and I rely on another key configured with Karabiner Elements to switch keyboard languages, so not using Caps Lock doesn’t affect me. Of course, you can choose any key that works best for you.

karabiner keysetup

{
    "manipulators": [
        {
            "description": "Change caps_lock to My Hyper Key.",
            "from": { "key_code": "caps_lock" },
            "to": [{ "key_code": "right_option" }],
            "type": "basic"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

In my setup, the Caps Lock key acts as the Right Option key. While I mentioned using one key, we actually need two keys to make this work. You can assign any unused key on your keyboard for this purpose. Some might consider using a "Hyper key," which combines Ctrl, Option, Cmd, and Shift. However, this can cause conflicts with combinations like Shift+Arrow or Option+Arrow because those modifiers are already in use. For this reason, I opted for the Right Option key, but you can choose any key that suits your workflow.


Vim Arrow Keys Setup

{
    "description": "Hyper + Arrow Keys",
    "manipulators": [
        {
            "from": {
                "key_code": "h",
                "modifiers": {
                    "mandatory": ["right_option"],
                    "optional": ["any"]
                }
            },
            "to": [{ "key_code": "left_arrow" }],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "j",
                "modifiers": {
                    "mandatory": ["right_option"],
                    "optional": ["any"]
                }
            },
            "to": [{ "key_code": "down_arrow" }],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "k",
                "modifiers": {
                    "mandatory": ["right_option"],
                    "optional": ["any"]
                }
            },
            "to": [{ "key_code": "up_arrow" }],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "l",
                "modifiers": {
                    "mandatory": ["right_option"],
                    "optional": ["any"]
                }
            },
            "to": [{ "key_code": "right_arrow" }],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "h",
                "modifiers": {
                    "mandatory": ["right_option", "command"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "left_arrow",
                    "modifiers": "command"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "j",
                "modifiers": {
                    "mandatory": ["right_option", "command"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "down_arrow",
                    "modifiers": "command"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "k",
                "modifiers": {
                    "mandatory": ["right_option", "command"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "up_arrow",
                    "modifiers": "command"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "l",
                "modifiers": {
                    "mandatory": ["right_option", "command"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "right_arrow",
                    "modifiers": "command"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "h",
                "modifiers": {
                    "mandatory": ["right_option", "option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "left_arrow",
                    "modifiers": "option"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "j",
                "modifiers": {
                    "mandatory": ["right_option", "option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "down_arrow",
                    "modifiers": "option"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "k",
                "modifiers": {
                    "mandatory": ["right_option", "option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "up_arrow",
                    "modifiers": "option"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "l",
                "modifiers": {
                    "mandatory": ["right_option", "option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "right_arrow",
                    "modifiers": "option"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "h",
                "modifiers": {
                    "mandatory": ["right_option", "shift"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "left_arrow",
                    "modifiers": "shift"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "j",
                "modifiers": {
                    "mandatory": ["right_option", "shift"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "down_arrow",
                    "modifiers": "shift"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "k",
                "modifiers": {
                    "mandatory": ["right_option", "shift"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "up_arrow",
                    "modifiers": "shift"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "l",
                "modifiers": {
                    "mandatory": ["right_option", "shift"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "right_arrow",
                    "modifiers": "shift"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "b",
                "modifiers": {
                    "mandatory": ["right_option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "left_arrow",
                    "modifiers": ["shift", "option"]
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "w",
                "modifiers": {
                    "mandatory": ["right_option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "right_arrow",
                    "modifiers": ["shift", "option"]
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "h",
                "modifiers": {
                    "mandatory": ["right_option", "shift", "left_option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "left_arrow",
                    "modifiers": ["shift", "left_option"]
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "j",
                "modifiers": {
                    "mandatory": ["right_option", "shift", "left_option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "down_arrow",
                    "modifiers": ["shift", "left_option"]
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "k",
                "modifiers": {
                    "mandatory": ["right_option", "shift", "left_option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "up_arrow",
                    "modifiers": ["shift", "left_option"]
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "l",
                "modifiers": {
                    "mandatory": ["right_option", "shift", "left_option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "right_arrow",
                    "modifiers": ["shift", "left_option"]
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "h",
                "modifiers": {
                    "mandatory": ["right_option", "shift", "left_command"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "left_arrow",
                    "modifiers": ["shift", "left_command"]
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "j",
                "modifiers": {
                    "mandatory": ["right_option", "shift", "left_command"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "down_arrow",
                    "modifiers": ["shift", "left_command"]
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "k",
                "modifiers": {
                    "mandatory": ["right_option", "shift", "left_command"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "up_arrow",
                    "modifiers": ["shift", "left_command"]
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "l",
                "modifiers": {
                    "mandatory": ["right_option", "shift", "left_command"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "right_arrow",
                    "modifiers": ["shift", "left_command"]
                }
            ],
            "type": "basic"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

There are two additional key combinations:

Caps Lock + W: Dragging + Tab Forward
Caps Lock + B: Dragging + Tab Backward

I use these combinations frequently, but if you don’t need them, feel free to remove them from the setup.


Wrap up

I hope you found this guide helpful. I’ve become quite accustomed to using these key remappings, although there’s one minor downside: the proximity of the Shift and Caps Lock keys can make things a bit uncomfortable at times. However, the two extra combinations help mitigate this issue.

That’s it! I wrote my first draft and used ChatGPT to make it sound better. I hope I can be better at writing as time goes, today. I just gave my all words to it and replaced them all.

Anyway,

Wishing you a wonderful end of the year and the best of luck for the new year!

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay