Glide is in alpha. There will be missing features and bugs.

Hints

Glide supports a hint mode that lets you operate web pages entirely using the keyboard.

Press f to enter hint mode and Glide will overlay text labels over every hintable element, e.g. links and buttons. Typing the label for a hint will then focus and click the element.

You can press <Esc> to exit hint mode at any time.

Note: Hints are static. Scroll or DOM changes require pressing f again to regenerate, although existing hints will still point to their original elements.

Reference

Hintable elements

An element is considered "hintable" if any of the following are true:

It is one of <a>, <input>, <textarea>, <button>, <details>, <summary>, <option>, <label>, <toolbarbutton>, <richlistitem>, <menulist>, <checkbox>, or <radio>.
It has one of the following roles: link, button, option, menuitem, menuitemcheckbox, menuitemradio, tab, checkbox, radio.
The element is editable

Then, for the element to actually have a hint generated, it must be visible on the page and not be overlapped by another element.

For example, if a modal is open then only elements inside the modal will have hints.

Label generation

Labels are generated using the following lowercase alphabet with this priority order:

hjklasdfgyuiopqwertnmzxcvb

tip

You can customise this alphabet with glide.o.hint_chars.

If there are too many hints for each label to have a single character from the alphabet, then labels are generated by appending additional characters from the same alphabet. For example, if there are 30 hintable elements on a page:

Elements 2-26 get single-character labels: j, k, l, a etc.
Elements 1 & 27-30 get two-character labels: hh, hj, hk, hl

The algorithm above is implemented by glide.hints.label_generators.prefix_free. You can provide your own generator function by setting glide.o.hint_label_generator.

Prefix conflicting labels

If you're using anything other than the default hint label generator, you may have hints where the labels overlap, e.g. a, and ab.

When this happens, and you want to select the shorter hint (e.g. a), you'll need to explicitly tell Glide to select it. You can do so by pressing a and then <enter> (aka <CR>).

Actions

The builtin actions you can perform on the selected element are:

click (default)
newtab-click

For example:

glide.hints.show({ action: "newtab-click" });

You can also perform arbitrary actions with the selected element.

For example, to copy the text of an element to your clipboard you can use:

glide.hints.show({
  async action({ content }) {
    const text = await content.execute((target) =>
      target.textContent ?? ""
    );
    await navigator.clipboard.writeText(text);
  },
});

Default key mappings

Key	Action
f	Enter hint mode and activate the selected element via click.
F	Enter hint mode and activate the selected element in a new tab
<leader>f	Enter hint mode for elements in the browser UI
<esc>	Leave hint mode and clear all labels
<enter>	Select the hint with the currently entered label

Excmds

:hint

Flag	Default	Types	Description
-s	null	string	Only show hints for all elements matching this CSS selector.
-e	null	boolean	Only show hints for elements that are editable.
--include	null	string	Extend the default set of hintable elements with a custom CSS selector.
--action	click	click \| newtab-click	How to activate the element
--location	content	content \| browser-ui	Where to generate hints from

Note that filters use a logical and, they all must pass for the element to be hinted.

For example, -s "label" -e will never result in any hints because <label>s are never editable.

Examples:

:hint
:hint --action=newtab-click
:hint --location=browser-ui
:hint -s "a, input"
:hint -s "[onclick]"
:hint -e
:hint --include ".custom-button"