____  _     ___ ____  _____ 
  / ___|| |   |_ _|  _ \| ____|
 | |  _ | |    | || | | |  _|  
 | |_| || |___ | || |_| | |___ 
  \____||_____|___|____/|_____|
          

Welcome to the Glide tutorial! If you can't see the introduction, press the j key until you can.

Welcome to the Glide browser! Glide is a bit different from other browsers you may be used to as it is modal based, meaning that pressing the same key combination will perform different operations in different contexts.

The main modes you'll interact with are normal mode, insert mode, and hint mode.

normal mode is where most key mappings are defined and is the default mode when Glide is launched.

insert mode is for inserting text into elements, and Glide will automatically switch to it when an input element is focused.

hint mode lets you navigate web pages using only your keyboard, more on that later.

At any time, you can tell which mode Glide is in with the indicator at the top left next to the reload button.

You can come back to this tutorial at any time by typing :tutor and pressing Enter when in normal mode.

Get back to normal mode at any time by pressing Escape.

Hints are the main way that Glide lets you operate web pages using just your keyboard.

Press f to enter hint mode and Glide will overlay text labels over every hintable element. Typing the label for an element will then focus and click the element.

Try it now with the button below!

      naughty naughty
           ___________    ____
    ______/   \__//   \__/____\
  _/   \_/  :           //____\\
 /|      :  :  ..      /        \
| |     ::     ::      \        /
| |     :|     ||     \ \______/
| |     ||     ||      |\  /  |
 \|     ||     ||      |   / | \
  |     ||     ||      |  / /_\ \
  | ___ || ___ ||      | /  /    \
   \_-_/  \_-_/ | ____ |/__/      \
                _\_--_/    \      /
               /____             /
              /     \           /
              \______\_________/
              

Setup the TypeScript config file by executing :config_init home, which will create a config file at ~/.config/glide/glide.ts plus some boilerplate files so that the TypeScript LSP will work.

Then execute :config_reload so that Glide will detect the new config file.

Config file detected? ⨯

Let's customise the hint label size so that it's a bit bigger.

Open the config file by running :config_edit or opening your editor and navigating to .

Then type this in:

glide.o.hint_size = "30px";

After saving the file, you should see a notification below the URL bar telling you that the config has been modified, click the reload button or execute :config_reload.

Now press f to enter hint mode and you should see some very large hint labels! Then press Escape to exit hint mode.

Let's revert the hint size back to a reasonable value, open the config file in your editor again and either delete the code we just added or adjust the value. For reference, the default hint size is 11px.

For more information on what you can do with the config file, see the API reference for all the APIs or the Cookbook for examples of common things you might want to do.

In normal mode if an input element is focused then hjkl will move the caret, otherwise it can be used to scroll the page.

Try moving around and using the input box below to get a feel for it and then hold j move on to the next lesson

                      ↑

                      k

                      │
                      │
      ← h ────────────┼──────────── l →
                      │
                      │

                      j

                      ↓

┌───────────────── Legend ─────────────────┐
│ h: move left            l: move right    │
│ j: move down            k: move up       │
└──────────────────────────────────────────┘
          

As you may have noticed in lesson 2, when you clicked on the input element, Glide switched to insert mode. This mode has very few builtin key mappings as it's primary purpose, like the name implies, is to enter text.

While in normal mode, you can manually enter insert mode by pressing i. This can be useful for websites that define key maps that conflict with Glide's normal mode mappings.