diff --git a/mesop/web/src/editor/editor.ts b/mesop/web/src/editor/editor.ts
index a88504b7..013191bf 100644
--- a/mesop/web/src/editor/editor.ts
+++ b/mesop/web/src/editor/editor.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, HostListener} from '@angular/core';
 import {
   DefaultHotReloadWatcher,
   HotReloadWatcher,
@@ -11,6 +11,8 @@ import {
   ErrorDialogService,
 } from '../services/error_dialog_service';
 import {Shell, registerComponentRendererElement} from '../shell/shell';
+import {isMac} from '../utils/platform';
+import {Channel} from '../services/channel';
 // Keep the following comment to ensure there's a hook for adding TS imports in the downstream sync.
 // ADD_TS_IMPORT_HERE
 
@@ -23,8 +25,27 @@ import {Shell, registerComponentRendererElement} from '../shell/shell';
 })
 class Editor {
   constructor(
+    private readonly channel: Channel,
     private readonly hotReloadWatcher: HotReloadWatcher /* Inject hotReloadWatcher to ensure it's instantiated. */,
   ) {}
+
+  @HostListener('window:keydown', ['$event'])
+  handleKeyDown(event: KeyboardEvent) {
+    // Hotkey for hot reload
+    //
+    // Binds:
+    // cmd + shift + r (MacOs)
+    // ctrl + shift + r (Other platforms)
+    if (
+      event.key === 'r' &&
+      (isMac() ? event.metaKey : event.ctrlKey) &&
+      event.shiftKey
+    ) {
+      this.channel.hotReload();
+      event.preventDefault();
+      return;
+    }
+  }
 }
 
 const routes: Routes = [{path: '**', component: Editor}];