DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

Vim Keybindings in Firefox: Tridactyl Setup, Configuration, and Workflow

Vimperator, Pentadactyl, and Tridactyl are extensions that bring Vim-style keyboard navigation to Firefox. If you spend most of your time in a terminal or in Vim/Neovim, Tridactyl can make Firefox feel like a natural extension of that workflow.

Why Vim Keybindings in Firefox?

The keyboard-first philosophy:

  • Navigate without touching the mouse
  • Open links by typing "hints" that appear on links
  • Visual mode to select and copy text with hjkl
  • Command mode (:), insert mode, normal mode — same mental model as Vim

For keyboard-intensive users, browser navigation via Tab/Shift+Tab for link focus is slow. Vim-style "hint mode" puts a letter on every link and you type the letter to follow it. Much faster for link-heavy pages.

Tridactyl: The Current Standard

After Firefox's WebExtension migration (which killed Vimperator/Pentadactyl), Tridactyl emerged as the maintained Vim-keybindings extension.

Install: addons.mozilla.org → search "Tridactyl"

Core concepts after installing:

  • Press ? for the help page
  • Press Escape to return to normal mode
  • : opens the command line (like Vim's command mode)

Essential Navigation

Following links (hint mode):

  • f — open hint in current tab (type the highlighted letter(s) to follow)
  • F — open hint in new tab
  • gf — follow hint in background tab

When hints appear, each link gets a 1-3 letter code. Type the code to navigate.

Page navigation:

  • j / k — scroll down/up
  • gg / G — scroll to top/bottom
  • d — scroll down half page
  • u — scroll up half page
  • H / L — go back/forward in history

Tab management:

  • gt / gT — next/previous tab
  • t — open new tab
  • x — close current tab
  • r — reload
  • R — hard reload (bypass cache)

Opening URLs

  • o — open URL in current tab (shows address bar)
  • O — open URL in new tab
  • s — search with default search engine
  • S — search in new tab

Visual Mode

Press v to enter visual mode. Then:

  • hjkl — expand selection
  • y — yank (copy) selected text

For selecting text without a mouse — useful on pages where clicking to set a cursor is awkward.

Searching on Page

  • / — find mode (like Vim's /)
  • n / N — next/previous match

Command Mode

Press : to open the command line. Examples:

:set hintfiltermode vimperator  # Change hint filter behavior
:tabopen https://example.com    # Open URL in new tab
:bind ,d :tabclose<CR>          # Bind a key
:source ~/.tridactylrc           # Reload config
Enter fullscreen mode Exit fullscreen mode

Configuration File (.tridactylrc)

Tridactyl reads a config file:

" Location: ~/.tridactylrc (or platform-specific path)
" Example config

" Use h as hint trigger (instead of f)
bind h hint

" Passthrough mode for specific sites
bindurl https://gmail.com I <s-Escape>

" Smooth scrolling
set smoothscroll true

" Default search engine
set searchengine duckduckgo

" Custom search engine shortcuts
set searchurls.g https://www.google.com/search?q=%s
set searchurls.gh https://github.com/search?q=%s
set searchurls.mdn https://developer.mozilla.org/en-US/search?q=%s

" Hint characters (limit to easy keys)
set hintchars jkhlnmuvbeywozxdqr

" Colorscheme
set theme dark

" Bind ; for command mode (alternative to :)
bind ; fillcmdline_notrail
Enter fullscreen mode Exit fullscreen mode

Apply config: :source ~/.tridactylrc or restart Firefox.

Native Messenger (Recommended)

For full Tridactyl functionality (external editor, clipboard access), install the native messenger:

curl -fsSl https://raw.githubusercontent.com/tridactyl/tridactyl/master/native/install.sh | sh
Enter fullscreen mode Exit fullscreen mode

This allows:

  • <C-i> to open the focused textarea in your $EDITOR (like Vim's :!vim)
  • Clipboard operations that bypass Firefox's security restrictions
  • Persistent config file at ~/.tridactylrc

External Editor Integration

With the native messenger installed:

  • Press <C-i> in any text field to open it in your $EDITOR (usually Vim/Neovim)
  • Edit the text in your editor
  • Save and quit — the content appears in the browser textarea

This is particularly useful for:

  • Writing long GitHub PR descriptions in Neovim
  • Composing emails in web clients with your editor
  • Any long-form text input in a browser

Set your editor:

# In your shell profile
export EDITOR=nvim
Enter fullscreen mode Exit fullscreen mode

Site-Specific Passthrough

Some sites use keyboard shortcuts that conflict with Tridactyl. Use passthrough mode:

" Passthrough for specific sites
bindurl https://mail.google.com I <s-Escape>
bindurl https://twitter.com I <s-Escape>
bindurl https://app.asana.com I <s-Escape>
Enter fullscreen mode Exit fullscreen mode

Or temporarily press <s-Escape> to toggle passthrough mode for the current page.

Comparison: Tridactyl vs Vimium

Both are popular Vim-keybindings extensions for Firefox:

Feature Tridactyl Vimium
Command mode (:) Yes No
External editor (<C-i>) Yes (with native) No
Config file Yes (.tridactylrc) Settings page
Visual mode Yes Yes
Active development Yes Less active
Customization depth Higher Lower
Setup complexity Higher Lower

For Vim power users: Tridactyl with native messenger is more complete.
For casual Vim-keybindings users: Vimium is simpler to set up.

Quick Start Workflow

  1. Install Tridactyl from AMO
  2. Press ? to see the tutorial
  3. Practice: f to activate hints on any page
  4. Type the hint letters to follow a link
  5. j/k to scroll
  6. gt/gT to switch tabs
  7. H/L to navigate history

The learning curve is similar to learning Vim itself — once it clicks, you won't want to go back to mouse-heavy browsing.

Top comments (0)