Add focus_in and focus_out events (#19)

Author: almarklein

src/renderview.js

@@ -437,7 +437,11 @@ class BaseRenderView {
       if (this.wrapperElement) {
         this.wrapperElement.classList.add('has-focus')
       }
-      // at the moment the spec does not define focus and blur events, so only used internally for styling purposeses
+      const event = {
+        type: 'focus_in',
+        timestamp: getTimestamp()
+      }
+      this.onEvent(event)
     },
     { signal }
     )
@@ -446,6 +450,11 @@ class BaseRenderView {
       if (this.wrapperElement) {
         this.wrapperElement.classList.remove('has-focus')
       }
+      const event = {
+        type: 'focus_out',
+        timestamp: getTimestamp()
+      }
+      this.onEvent(event)
     },
     { signal }
     )

src/spec.md

@@ -3,7 +3,7 @@
 
 A protocol for interactive rendering surfaces.
 
-*Last update: 19-03-2026*
+*Last update: 03-04-2026*
 
 *This spec was previously known as the jupyter_rfb event spec, but was rolled into a separate project.*
 
@@ -106,6 +106,26 @@ Fields:
 * `timestamp`: A timestamp in seconds.
 
 
+### focus_in
+
+This event emitted when the canvas receives focus and can now receive key events.
+
+Fields:
+
+* `type`: 'focus_in'
+* `timestamp`: A timestamp in seconds.
+
+
+### focus_out
+
+This event emitted when the canvas loses focus (a.k.a. blur) and can no longer receive key events.
+
+Fields:
+
+* `type`: 'focus_out'
+* `timestamp`: A timestamp in seconds.
+
+
 ### pointer_down
 
 This event is emitted when the user interacts with mouse, touch or other pointer devices, by pressing it down.
@@ -308,6 +328,12 @@ To avoid straining the IO, certain events can be throttled. Their effect
 is accumulated if this makes sense(e.g. wheel event).
 
 
+## Changelog
+
+* 03-04-2026: add 'focus_in'  and 'focus_out' events.
+* 18-03-2026: add 'show' and 'hide' events.
+* 18-03-2026: create this document starting from a copy of the Jupyter event spec.
+
 
 <br><br>