VIMrly | Devpost

Inspiration

Many developers love Vim, but sometimes, using different IDEs such as Word and Google Docs is inevitable. These editors do not have native support for Vim Motions, forcing the developers to navigate text using less effective methods such as moving the cursor with a mouse. Inspired by plugins such as VSCode Extension for Vim, VIMrly was born with the same purpose: to make developers more productive on one of the most popular IDEs on the planet, Google Docs, with Vim Motions.

What it does

VIMrly is a Chrome extension that enables Vim Motions directly within Google Docs. With VIMrly, users can navigate and edit documents using familiar Vim commands without ever needing to touch the mouse.

How we built it

We built it using TypeScript, HTML, CSS, and webpack. First, we manipulated the Google Docs' text editor iframe and added listeners to listen for keystrokes to its DOM. We then managed different states that are available in Vim, such as Insert, Command, and Visual, and mapped each command to the native behaviour that we wanted to do, making the whole project come together. The final step was to bundle all files together using webpack and load them to the browser a Chrome Extension.

Challenges we ran into

We ran into a few challenges:

We had to learn Chrome extension development tools.
We had to understand the DOM tree of Google Docs' text editor and figure out how to listen for keystrokes and prevent the default behaviours. This is interesting because we didn't manipulate the text editor iframe's DOM at first, but the Google Docs webpage's DOM, which did not work since the listeners needed to be injected into the text editors' DOM to listen to keystrokes made on the editor.
We had to handle chained commands (Shift + 4), handle cases where two commands might start with the same keystroke (dd and d), and support commands that work on both platforms, Windows and MacOS.

Accomplishments that we're proud of

We’re proud to have successfully integrated a wide range of fundamental Vim commands into Google Docs, helping Vim users boost their productivity outside their cozy terminal space. Also, we managed to keep the extension lightweight and efficient, providing a smooth experience that respects Google Docs’ original interface (mouse cursor still available) while enhancing it.

What we learned

We learned how to develop a Chrome Extension by using webpack to bundle our HTML, CSS and JS files into a few optimized files that can be processed by the browser. We also deepened our understanding of TypeScript and how to transpile them into JavaScript. Most importantly, we learned event handling and DOM manipulation, which is a crucial skill to have as a developer.

What's next for VIMrly

Looking ahead, we aim to scale VIMrly by adding more advanced Vim commands and customizable keybindings. We plan to make it platform-independent, for example, for Windows, we have an Alt key but for MacOS we have an Option key. Additionally, we want to gather feedback from users to enhance usability and ensure compatibility with future updates to Google Docs. We will also publish the extension on the Chrome Web Store, ready for everyone to use.