A VS Code–Inspired Watch Face for Garmin Forerunner 55

Sometimes the most fun projects come from combining unrelated interests.

In this case it was running and coding.

I wanted to build a custom watch face for my Garmin Forerunner 55 that looked like a code editor. The idea was simple: display fitness data as if it were properties inside a JavaScript object.

The result is a watch face that feels a bit like having VS Code running on your wrist.

The Idea

Instead of the usual watch layout with large numbers and icons, the interface mimics a small code snippet.

Things like time, steps, and heart rate are displayed as fields inside a structured object.

Example layout:

WatchInfo {
  time: "10:30",
  date: "2024-01-31",
  steps: 4500,
  heartRate: "75 bpm",
  sunrise: "06:45",
  sunset: "17:30"
}

The layout uses a monospaced font and color styling similar to the VS Code editor to create the illusion of syntax highlighting.

Design Choices

Monospaced Font

Using a monospaced font helps sell the “code editor” illusion. It also keeps the layout predictable and easy to align on a small screen.

Syntax Highlighting

Different pieces of information use slightly different colors, similar to how variables and values are highlighted in a code editor.

Minimal Layout

Garmin watches have limited screen space, so the design had to stay simple. The goal was to keep the coding theme while still making the information easy to read during a run.

Implementation

The watch face was built using Garmin’s Connect IQ SDK and written in Monkey C, Garmin’s programming language for wearable apps.

The main tasks were:

designing the layout for a small display
updating data fields in real time
keeping the rendering efficient to preserve battery life

Testing was done both in the Garmin simulator and on the actual device.

Final Thoughts

This was a small but fun side project that combines two things I spend a lot of time with: writing code and going for runs.

It’s also a nice reminder that not every project needs to be serious or complicated. Sometimes it’s enough to build something that simply makes you smile when you look at your watch.

Watch Face Preview

Watch face preview.