Inspiration
As avid users of Vim we could not help but bring the Vim functionalities to Google Docs with us. Our goal was to create a Google Chrome extension that allows users to seamlessly use Vim commands in Google Docs, enhancing productivity for users who rely on Vim’s powerful keyboard shortcuts.
What it does
VimDocs is a Chrome extension that enables Vim-like editing capabilities directly within Google Docs. With VimDocs, users can navigate and edit documents using familiar Vim commands without ever needing to touch the mouse.
How we built it
We build it using TypeScript, HTML, and CSS. We manipulated the Google Docs' text editor's DOM and added listeners to listen for keystrokes. We then managed different states that are available in Vim, such as Insert, Command, and Visual. Finally, we mapped each command to the native behaviour that we wanted to do, making the whole project come together.
Challenges we ran into
We ran into a few challenges:
- We had to learn and get familiarised with Chrome extension development tools.
- We had to understand the DOM tree of Google Docs and figure out how to listen for keystrokes and prevent the default behaviours.
- We had to handle chained commands and handle cases where two commands might start with the same keystroke.
Accomplishments that we're proud of
We’re proud to have successfully integrated a wide range of Vim commands into Google Docs, making it easy for Vim users to transition their skills to document editing. We also managed to keep the extension lightweight and efficient, providing a smooth experience that respects Google Docs’ original interface while enhancing it. Finally, we’re excited to have created a tool that could save time and increase productivity for many developers and writers alike.
What we learned
While working on this project we learned how to develop a Chrome extension, all the required files and how to manage the project folder. We deepened our understanding of the Chrome extensions API and JavaScript event handling. The project gave us hands-on experience with bridging desktop and web-based applications, translating command-based interfaces to web platforms.
What's next for VimDocs
Looking ahead, we aim to expand VimDocs by adding more advanced Vim commands and customizable keybindings. We plan to make it platform independent, for example for windows we have Alt key but for mac we have Option. Additionally, we want to gather feedback from users to enhance usability and ensure compatibility with future updates to Google Docs.
Log in or sign up for Devpost to join the conversation.