Axiom

Overview

Axiom is a custom built code editor for SE212 (Logic and Computation) at UWaterloo. This class has a custom programming language used to check proofs and program correctness. There are already editors out there that get the job done, but we saw room for improvement. The workflow felt repetitive, and the design could be more polished. With that in mind, we set out to refine the experience and make it more efficient—not just for ourselves, but for future students as well.

This case study will focus more on the frontend and design decisions but be sure to check out the technical breakdown written by Ishaan Dey.

Building Axiom

The Editor

Axiom is built using Monaco for the text editor, which provides a powerful, familiar, and customizable code editing experience.

We implemented an explorer panel where homework and assignment files would be preloaded. We made it so users can open and look at multiple files at the same time through tabs. This was a missing feature in previous editors.

Editing Experience

One of the most common complaints from students was with line numbering. We had to manually write line numbers and add reference different lines in our rule declarations. Axiom takes care of this by adding lines automatically when the user hits enter, and also updating lines if a new line is added in the middle of the program.

We also added hover tooltips which would give brief descriptions of the logic rules.

Menu

Axiom is super customizable because we know that everyone has their own preferences when its comes to coding experience.

We also added keyboard shortcuts to better the editing experience for everyone.

The most customizable part of Axiom is the color themes. We went beyond simply adding a dark mode and light mode toggle. We designed a beautiful color theme inspired by our favorites, but on top of that, we made it so users can entirely create their own.

We also designed some presets for the user to choose from and this feature is coming soon!

Results & Takeaways

Though this was an ambitious task, I am really proud of the finished product. We demoed the project to our classmates and also to the professor and after a few meetings, we were happy to find out that Axiom will be the primary code editor for SE212! Sadly, we couldn't get it deployed on time for our own year due to university delays, but it will be used to improve the course experience for future cohorts!

Check out the demo video here: