From aea52d0891cb44b687f9c25b139f83f808001c32 Mon Sep 17 00:00:00 2001
From: Adrian Papari <junkdog@angelhill.net>
Date: Mon, 26 Jan 2026 23:23:12 +0100
Subject: [PATCH 1/6] feat(webgl2): add `responsive_resize` option for
 CSS-controlled layouts

---
 src/backend/webgl2.rs | 51 +++++++++++++++++++++++++++++++------------
 1 file changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/backend/webgl2.rs b/src/backend/webgl2.rs
index 11dec5b..b3cd13d 100644
--- a/src/backend/webgl2.rs
+++ b/src/backend/webgl2.rs
@@ -77,6 +77,8 @@ pub struct WebGl2BackendOptions {
     measure_performance: bool,
     /// Enable console debugging and introspection API.
     console_debug_api: bool,
+    /// Use responsive resize mode (CSS controls canvas display size).
+    responsive_resize: bool,
 }
 
 impl WebGl2BackendOptions {
@@ -219,6 +221,19 @@ impl WebGl2BackendOptions {
         self.console_debug_api = true;
         self
     }
+
+    /// Enables responsive resize mode for CSS-controlled layouts.
+    ///
+    /// When enabled, the backend clears inline CSS dimensions after resize operations,
+    /// allowing external CSS rules (e.g., `width: 100%`) to control the canvas display
+    /// size. The canvas buffer is still sized correctly for crisp HiDPI rendering.
+    ///
+    /// Use this when the canvas should automatically fill its container based on
+    /// CSS layout rules rather than having a fixed pixel size.
+    pub fn responsive_resize(mut self) -> Self {
+        self.responsive_resize = true;
+        self
+    }
 }
 
 /// WebGl2 backend for high-performance terminal rendering.
@@ -389,12 +404,16 @@ impl WebGl2Backend {
         self
     }
 
-    /// Sets the canvas viewport and projection, reconfigures the terminal grid.
+    /// Resizes the terminal to match the current CSS display size of the canvas.
+    ///
+    /// This method reads the canvas's CSS dimensions and updates beamterm's
+    /// internal state, viewport, and grid layout accordingly.
     pub fn resize_canvas(&mut self) -> Result<(), Error> {
-        let size_px = self.beamterm.canvas_size();
+        let width = self.beamterm.canvas().client_width();
+        let height = self.beamterm.canvas().client_height();
 
         // resize the terminal grid and viewport
-        self.beamterm.resize(size_px.0, size_px.1)?;
+        self.beamterm.resize(width, height)?;
 
         // clear any hyperlink cells; we'll get them in the next draw call
         if let Some(hyperlink_cells) = &mut self.hyperlink_cells {
@@ -417,17 +436,14 @@ impl WebGl2Backend {
 
     /// Checks if the canvas size matches the display size and resizes it if necessary.
     fn check_canvas_resize(&mut self) -> Result<(), Error> {
-        let canvas = self.beamterm.canvas();
-        let display_width = canvas.client_width() as u32;
-        let display_height = canvas.client_height() as u32;
-
-        let buffer_width = canvas.width();
-        let buffer_height = canvas.height();
-
-        if display_width != buffer_width || display_height != buffer_height {
-            canvas.set_width(display_width);
-            canvas.set_height(display_height);
-
+        // Compare CSS display size against beamterm's stored logical size.
+        // Both are in CSS/logical pixels, so DPR scaling is handled correctly
+        // by beamterm internally (buffer = logical × DPR).
+        let display_width = self.beamterm.canvas().client_width();
+        let display_height = self.beamterm.canvas().client_height();
+        let (stored_width, stored_height) = self.beamterm.canvas_size();
+
+        if display_width != stored_width || display_height != stored_height {
             self.resize_canvas()?;
         }
 
@@ -707,6 +723,13 @@ impl Backend for WebGl2Backend {
         self.beamterm.render_frame().map_err(Error::from)?;
         self.toggle_cursor(); // restore cell to previous state
 
+        // For responsive layouts, clear inline CSS so external rules take effect
+        if self.options.responsive_resize {
+            let style = self.beamterm.canvas().style();
+            let _ = style.remove_property("width");
+            let _ = style.remove_property("height");
+        }
+
         self.measure_end(WEBGL_RENDER_MARK);
 
         Ok(())

From 9b833fcdf9e96f624d56036fc55c90e9f062f02e Mon Sep 17 00:00:00 2001
From: Adrian Papari <junkdog@angelhill.net>
Date: Tue, 27 Jan 2026 20:09:37 +0100
Subject: [PATCH 2/6] add WebGl2BackendOptions::disable_auto_css_resize

---
 src/backend/webgl2.rs | 30 +++++++++++++-----------------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/backend/webgl2.rs b/src/backend/webgl2.rs
index b3cd13d..63b7308 100644
--- a/src/backend/webgl2.rs
+++ b/src/backend/webgl2.rs
@@ -77,8 +77,8 @@ pub struct WebGl2BackendOptions {
     measure_performance: bool,
     /// Enable console debugging and introspection API.
     console_debug_api: bool,
-    /// Use responsive resize mode (CSS controls canvas display size).
-    responsive_resize: bool,
+    /// Disable automatic canvas CSS sizing (let external CSS control dimensions).
+    disable_auto_css_resize: bool,
 }
 
 impl WebGl2BackendOptions {
@@ -222,16 +222,17 @@ impl WebGl2BackendOptions {
         self
     }
 
-    /// Enables responsive resize mode for CSS-controlled layouts.
+    /// Disables automatic canvas CSS sizing for CSS-controlled layouts.
     ///
-    /// When enabled, the backend clears inline CSS dimensions after resize operations,
-    /// allowing external CSS rules (e.g., `width: 100%`) to control the canvas display
-    /// size. The canvas buffer is still sized correctly for crisp HiDPI rendering.
+    /// When called, the renderer does not set inline CSS `width` and `height`
+    /// properties on the canvas, allowing external CSS rules (flexbox, grid,
+    /// percentages) to control the canvas display size. The canvas buffer is
+    /// still sized correctly for crisp HiDPI rendering.
     ///
-    /// Use this when the canvas should automatically fill its container based on
-    /// CSS layout rules rather than having a fixed pixel size.
-    pub fn responsive_resize(mut self) -> Self {
-        self.responsive_resize = true;
+    /// Use this when the canvas should fill its container based on CSS layout
+    /// rules rather than having a fixed pixel size.
+    pub fn disable_auto_css_resize(mut self) -> Self {
+        self.disable_auto_css_resize = true;
         self
     }
 }
@@ -688,6 +689,8 @@ impl WebGl2Backend {
             beamterm
         };
 
+        let beamterm = beamterm.auto_resize_canvas_css(!options.disable_auto_css_resize);
+
         Ok(beamterm.build()?)
     }
 }
@@ -723,13 +726,6 @@ impl Backend for WebGl2Backend {
         self.beamterm.render_frame().map_err(Error::from)?;
         self.toggle_cursor(); // restore cell to previous state
 
-        // For responsive layouts, clear inline CSS so external rules take effect
-        if self.options.responsive_resize {
-            let style = self.beamterm.canvas().style();
-            let _ = style.remove_property("width");
-            let _ = style.remove_property("height");
-        }
-
         self.measure_end(WEBGL_RENDER_MARK);
 
         Ok(())

From e36c913a1ebbdbcb7f5773bab7da9232a80d46d6 Mon Sep 17 00:00:00 2001
From: Adrian Papari <junkdog@angelhill.net>
Date: Tue, 27 Jan 2026 20:31:41 +0100
Subject: [PATCH 3/6] bump beamterm to 0.14.0

---
 Cargo.lock | 8 ++++----
 Cargo.toml | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 58f11a2..5044b71 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -33,9 +33,9 @@ checksum = "c08606f8c3cbf4ce6ec8e28fb0014a2c086708fe954eaa885384a6165172e7e8"
 
 [[package]]
 name = "beamterm-data"
-version = "0.13.0"
+version = "0.14.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d5a70ff46e4e31f7b921e7c1c527cb4086765eb2393dff52a1a67a7c71e199c0"
+checksum = "c27be7035a920d4507f78264a0ee99fcd70e7d179be4b453da737f5e40155e04"
 dependencies = [
  "compact_str",
  "miniz_oxide",
@@ -43,9 +43,9 @@ dependencies = [
 
 [[package]]
 name = "beamterm-renderer"
-version = "0.13.0"
+version = "0.14.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "89eb957a01ba980c6cc8718ffc4186630e0e04306805be2e6dadec7294d795fb"
+checksum = "9b67db3888a56bc541c93e58196abcf4385446545d4889601f09ab0569093706"
 dependencies = [
  "beamterm-data",
  "bitflags",
diff --git a/Cargo.toml b/Cargo.toml
index 6da5791..fadcae4 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -42,7 +42,7 @@ ratatui = { version = "0.30", default-features = false, features = ["all-widgets
 console_error_panic_hook = "0.1.7"
 thiserror = "2.0.18"
 bitvec = { version = "1.0.1", default-features = false, features = ["alloc", "std"] }
-beamterm-renderer = "0.13.0"
+beamterm-renderer = "0.14.0"
 unicode-width = "0.2.2"
 
 [dev-dependencies]

From 14326f71cdec6b1d23cd02bfe1aea6fd0a7ebcf0 Mon Sep 17 00:00:00 2001
From: Adrian Papari <junkdog@angelhill.net>
Date: Wed, 28 Jan 2026 08:24:08 +0100
Subject: [PATCH 4/6] actually use disable_auto_css_resize somewhere

---
 examples/demo/index.html  | 9 +++++++++
 examples/demo/src/main.rs | 6 +-----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/examples/demo/index.html b/examples/demo/index.html
index 1d67f95..6b800cd 100644
--- a/examples/demo/index.html
+++ b/examples/demo/index.html
@@ -5,7 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Ratzilla Demo</title>
     <style>
+      html {
+        height: 100%;
+      }
       body {
+        height: calc(100% - 40px);
         margin: 20px;
         display: flex;
         flex-direction: column;
@@ -14,6 +18,11 @@
         align-content: center;
         background-color: #121212;
       }
+      canvas {
+        display: block;
+        width: calc(100vw - 40px);
+        height: 100%;
+      }
       pre {
         font-family: "Fira Code", monospace;
         font-size: 16px;
diff --git a/examples/demo/src/main.rs b/examples/demo/src/main.rs
index a42a70a..24fb94f 100644
--- a/examples/demo/src/main.rs
+++ b/examples/demo/src/main.rs
@@ -22,17 +22,13 @@ mod ui;
 fn main() -> Result<()> {
     let app_state = Rc::new(RefCell::new(App::new("Demo", true)));
 
-    // Create backend with explicit size like main branch (1600x900)
-    let canvas_options = CanvasBackendOptions::new().size((1600, 900));
-
     let webgl2_options = WebGl2BackendOptions::new()
         .measure_performance(true)
         .enable_console_debug_api()
         .enable_mouse_selection()
-        .size((1600, 900));
+        .disable_auto_css_resize(); // canvas size managed by css in index.html
 
     let terminal = MultiBackendBuilder::with_fallback(BackendType::WebGl2)
-        .canvas_options(canvas_options)
         .webgl2_options(webgl2_options)
         .build_terminal()?;
 

From 49135f9a999dc12fcc2a80637f79246f6c02aa40 Mon Sep 17 00:00:00 2001
From: Adrian Papari <junkdog@angelhill.net>
Date: Wed, 28 Jan 2026 14:28:36 +0100
Subject: [PATCH 5/6] update demos for webgl2 backend

---
 examples/Cargo.toml            |  4 ++--
 examples/clipboard/Cargo.toml  |  2 +-
 examples/clipboard/src/main.rs | 12 ++++++++----
 examples/unicode/src/main.rs   | 13 +++++++++++--
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/examples/Cargo.toml b/examples/Cargo.toml
index bd32d0c..7e6808f 100644
--- a/examples/Cargo.toml
+++ b/examples/Cargo.toml
@@ -26,11 +26,11 @@ exclude = [
 ratzilla = { path = "../" }
 examples-shared = { path = "shared" }
 console_error_panic_hook = "0.1.7"
-tachyonfx = { version = "0.22.0", default-features = false, features = ["web-time"] }
+tachyonfx = { version = "0.23.0", default-features = false, features = ["wasm"] }
 web-time = "1.1.0"
 palette = "0.7.6"
 rand = { version = "0.9.2", default-features = false }
-wasm-bindgen = "0.2.104"
+wasm-bindgen = "0.2.108"
 wasm-bindgen-futures = "0.4.54"
 web-sys = "0.3.81"
 
diff --git a/examples/clipboard/Cargo.toml b/examples/clipboard/Cargo.toml
index 9730f71..8913455 100644
--- a/examples/clipboard/Cargo.toml
+++ b/examples/clipboard/Cargo.toml
@@ -7,7 +7,7 @@ publish = false
 [dependencies]
 color-eyre = "0.6.5"
 console_error_panic_hook.workspace = true
-ratatui = { version = "0.30.0", default-features = false }
+ratatui = { version = "0.30.0", default-features = false, features = ["layout-cache"] }
 ratzilla.workspace = true
 examples-shared.workspace = true
 wasm-bindgen.workspace = true
diff --git a/examples/clipboard/src/main.rs b/examples/clipboard/src/main.rs
index 70f186d..6bdc33e 100644
--- a/examples/clipboard/src/main.rs
+++ b/examples/clipboard/src/main.rs
@@ -7,15 +7,19 @@ use ratatui::{
     Frame, Terminal,
 };
 
-use ratzilla::{
-    event::{KeyCode, KeyEvent},
-    WebRenderer,
-};
+use ratzilla::{event::{KeyCode, KeyEvent}, SelectionMode, WebRenderer};
 use examples_shared::backend::{BackendType, MultiBackendBuilder};
+use ratzilla::backend::webgl2::WebGl2BackendOptions;
 
 fn main() -> io::Result<()> {
     std::panic::set_hook(Box::new(console_error_panic_hook::hook));
+
+    let webgl2_options = WebGl2BackendOptions::new()
+        .enable_mouse_selection_with_mode(SelectionMode::Linear)
+        .measure_performance(true);
+
     let terminal = MultiBackendBuilder::with_fallback(BackendType::Dom)
+        .webgl2_options(webgl2_options)
         .build_terminal()?;
 
     let state = Rc::new(App::default());
diff --git a/examples/unicode/src/main.rs b/examples/unicode/src/main.rs
index faa31ad..64e8112 100644
--- a/examples/unicode/src/main.rs
+++ b/examples/unicode/src/main.rs
@@ -6,12 +6,21 @@ use ratzilla::ratatui::{
     widgets::{Block, Paragraph},
 };
 
-use ratzilla::WebRenderer;
+use ratzilla::{FontAtlasConfig, SelectionMode, WebRenderer};
 
 use examples_shared::backend::{BackendType, MultiBackendBuilder};
+use ratzilla::backend::webgl2::WebGl2BackendOptions;
 
 fn main() -> io::Result<()> {
-    let terminal = MultiBackendBuilder::with_fallback(BackendType::Dom).build_terminal()?;
+    let webgl2_options = WebGl2BackendOptions::new()
+        .enable_mouse_selection_with_mode(SelectionMode::Block)
+        .enable_console_debug_api()
+        .measure_performance(true)
+        .font_atlas_config(FontAtlasConfig::dynamic(&["Maple Mono NF CN"], 15.0));
+
+    let terminal = MultiBackendBuilder::with_fallback(BackendType::Dom)
+        .webgl2_options(webgl2_options)
+        .build_terminal()?;
 
     terminal.draw_web(move |f| {
         f.render_widget(

From 8836e9e4399b7f31ca40b69dd5ca5c853851882e Mon Sep 17 00:00:00 2001
From: Adrian Papari <junkdog@angelhill.net>
Date: Tue, 17 Feb 2026 19:37:37 +0100
Subject: [PATCH 6/6] beamterm 0.15.0 and simplify url handling

---
 Cargo.lock            |  12 +-
 Cargo.toml            |   2 +-
 src/backend/webgl2.rs | 293 +++++++++++-------------------------------
 3 files changed, 84 insertions(+), 223 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 5044b71..97ba99e 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -33,9 +33,9 @@ checksum = "c08606f8c3cbf4ce6ec8e28fb0014a2c086708fe954eaa885384a6165172e7e8"
 
 [[package]]
 name = "beamterm-data"
-version = "0.14.0"
+version = "0.15.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c27be7035a920d4507f78264a0ee99fcd70e7d179be4b453da737f5e40155e04"
+checksum = "d7927a4e9de1e0028f777ace6cd5cd5e8d7f87a5cfec44a4f8dc135f18bc1f0e"
 dependencies = [
  "compact_str",
  "miniz_oxide",
@@ -43,9 +43,9 @@ dependencies = [
 
 [[package]]
 name = "beamterm-renderer"
-version = "0.14.0"
+version = "0.15.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9b67db3888a56bc541c93e58196abcf4385446545d4889601f09ab0569093706"
+checksum = "7a0d1b38455b427293dffbb0eb970c91c04f8ab32cb47b3884ed46924fda5819"
 dependencies = [
  "beamterm-data",
  "bitflags",
@@ -64,9 +64,9 @@ dependencies = [
 
 [[package]]
 name = "bitflags"
-version = "2.10.0"
+version = "2.11.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "812e12b5285cc515a9c72a5c1d3b6d46a19dac5acfef5265968c166106e31dd3"
+checksum = "843867be96c8daad0d758b57df9392b6d8d271134fce549de6ce169ff98a92af"
 
 [[package]]
 name = "bitvec"
diff --git a/Cargo.toml b/Cargo.toml
index fadcae4..c0916ab 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -42,7 +42,7 @@ ratatui = { version = "0.30", default-features = false, features = ["all-widgets
 console_error_panic_hook = "0.1.7"
 thiserror = "2.0.18"
 bitvec = { version = "1.0.1", default-features = false, features = ["alloc", "std"] }
-beamterm-renderer = "0.14.0"
+beamterm-renderer = "0.15.0"
 unicode-width = "0.2.2"
 
 [dev-dependencies]
diff --git a/src/backend/webgl2.rs b/src/backend/webgl2.rs
index 63b7308..792914c 100644
--- a/src/backend/webgl2.rs
+++ b/src/backend/webgl2.rs
@@ -1,12 +1,12 @@
 use crate::{
     backend::{color::to_rgb, utils::*},
     error::Error,
-    widgets::hyperlink::HYPERLINK_MODIFIER,
     CursorShape,
 };
 pub use beamterm_renderer::SelectionMode;
-use beamterm_renderer::{mouse::*, select, CellData, GlyphEffect, Terminal as Beamterm, Terminal};
-use bitvec::prelude::BitVec;
+use beamterm_renderer::{
+    mouse::*, CellData, CursorPosition, GlyphEffect, Terminal as Beamterm, Terminal,
+};
 use compact_str::CompactString;
 use ratatui::{
     backend::{ClearType, WindowSize},
@@ -48,6 +48,14 @@ impl FontAtlasConfig {
     }
 }
 
+/// Pending hyperlink mouse events, communicated from the mouse handler to
+/// [`WebGl2Backend::process_hyperlink_events`].
+#[derive(Clone, Copy, Default)]
+struct PendingHyperlinkEvent {
+    hover: Option<(u16, u16)>,
+    click: Option<(u16, u16)>,
+}
+
 // Labels used by the Performance API
 const SYNC_TERMINAL_BUFFER_MARK: &str = "sync-terminal-buffer";
 const WEBGL_RENDER_MARK: &str = "webgl-render";
@@ -304,14 +312,14 @@ pub struct WebGl2Backend {
     cursor_position: Option<Position>,
     /// Performance measurement.
     performance: Option<web_sys::Performance>,
-    /// Hyperlink tracking.
-    hyperlink_cells: Option<Rc<RefCell<BitVec>>>,
     /// Mouse handler for hyperlink clicks.
     _hyperlink_mouse_handler: Option<TerminalMouseHandler>,
-    /// Current cursor state over hyperlinks (shared with mouse handler).
-    cursor_over_hyperlink: Option<Rc<RefCell<bool>>>,
+    /// Whether cursor is currently over a hyperlink.
+    cursor_over_hyperlink: bool,
     /// Hyperlink click callback.
-    _hyperlink_callback: Option<HyperlinkCallback>,
+    hyperlink_callback: Option<HyperlinkCallback>,
+    /// Shared state for deferred hyperlink processing in [`WebGl2Backend::flush`].
+    hyperlink_state: Option<Rc<std::cell::Cell<PendingHyperlinkEvent>>>,
 }
 
 impl WebGl2Backend {
@@ -342,50 +350,27 @@ impl WebGl2Backend {
 
         let beamterm = Self::init_beamterm(&mut options, &parent)?;
 
-        let hyperlink_cells = if options.hyperlink_callback.is_some() {
-            let indices = BitVec::repeat(false, beamterm.cell_count());
-            Some(Rc::new(RefCell::new(indices)))
-        } else {
-            None
-        };
-
         // Extract hyperlink callback from options
         let hyperlink_callback = options.hyperlink_callback.take();
 
-        // Initialize cursor state tracking if hyperlinks are enabled
-        let cursor_over_hyperlink = if hyperlink_callback.is_some() {
-            Some(Rc::new(RefCell::new(false)))
-        } else {
-            None
-        };
-
-        // Set up hyperlink mouse handler if callback is provided
-        let hyperlink_mouse_handler = if let Some(ref callback) = hyperlink_callback {
-            let hyperlink_cells = hyperlink_cells
-                .clone()
-                .expect("known to exist at this point");
-            let cursor_state = cursor_over_hyperlink
-                .clone()
-                .expect("known to exist at this point");
-            Some(Self::create_hyperlink_mouse_handler(
-                &beamterm,
-                hyperlink_cells.clone(),
-                callback.callback.clone(),
-                cursor_state,
-            )?)
+        // Set up hyperlink mouse handler and shared state if callback is provided
+        let (hyperlink_mouse_handler, hyperlink_state) = if hyperlink_callback.is_some() {
+            let state = Rc::new(std::cell::Cell::new(PendingHyperlinkEvent::default()));
+            let handler = Self::create_hyperlink_mouse_handler(&beamterm, state.clone())?;
+            (Some(handler), Some(state))
         } else {
-            None
+            (None, None)
         };
 
         Ok(Self {
             beamterm,
             cursor_position: None,
             options,
-            hyperlink_cells,
             _hyperlink_mouse_handler: hyperlink_mouse_handler,
             performance,
-            cursor_over_hyperlink,
-            _hyperlink_callback: hyperlink_callback,
+            cursor_over_hyperlink: false,
+            hyperlink_callback,
+            hyperlink_state,
         })
     }
 
@@ -416,21 +401,8 @@ impl WebGl2Backend {
         // resize the terminal grid and viewport
         self.beamterm.resize(width, height)?;
 
-        // clear any hyperlink cells; we'll get them in the next draw call
-        if let Some(hyperlink_cells) = &mut self.hyperlink_cells {
-            let cell_count = self.beamterm.cell_count();
-
-            let mut hyperlink_cells = hyperlink_cells.borrow_mut();
-            hyperlink_cells.clear();
-            hyperlink_cells.resize(cell_count, false);
-        }
-
-        // Reset cursor state when canvas is resized
-        if let Some(cursor_state) = &self.cursor_over_hyperlink {
-            if let Ok(mut state) = cursor_state.try_borrow_mut() {
-                *state = false;
-            }
-        }
+        // Reset hyperlink cursor state when canvas is resized
+        self.cursor_over_hyperlink = false;
 
         Ok(())
     }
@@ -459,29 +431,10 @@ impl WebGl2Backend {
         // If enabled, measures the time taken to synchronize the terminal buffer.
         self.measure_begin(SYNC_TERMINAL_BUFFER_MARK);
 
-        // If hyperlink support is enabled, we need to track which cells are hyperlinks,
-        // before passing the content to the beamterm renderer.
-        if let Some(hyperlink_cells) = self.hyperlink_cells.as_mut() {
-            let w = self.beamterm.terminal_size().0 as usize;
-
-            let mut hyperlink_cells = hyperlink_cells.borrow_mut();
-
-            // Mark any cells that have the hyperlink modifier set (don't blink!).
-            // At this stage, we don't care about the actual cell content,
-            // as we can extract it on demand.
-            let cells = content.inspect(|(x, y, c)| {
-                let idx = *y as usize * w + *x as usize;
-                let is_hyperlink = c.modifier.contains(HYPERLINK_MODIFIER);
-                hyperlink_cells.set(idx, is_hyperlink);
-            });
-            let cells = cells.map(|(x, y, cell)| (x, y, cell_data(cell)));
-
-            self.beamterm.update_cells_by_position(cells)
-        } else {
-            let cells = content.map(|(x, y, cell)| (x, y, cell_data(cell)));
-            self.beamterm.update_cells_by_position(cells)
-        }
-        .map_err(Error::from)?;
+        let cells = content.map(|(x, y, cell)| (x, y, cell_data(cell)));
+        self.beamterm
+            .update_cells_by_position(cells)
+            .map_err(Error::from)?;
 
         self.measure_end(SYNC_TERMINAL_BUFFER_MARK);
 
@@ -571,81 +524,72 @@ impl WebGl2Backend {
         }
     }
 
-    /// Creates a mouse handler specifically for hyperlink clicks and hover effects.
+    /// Creates a mouse handler that records hyperlink-relevant mouse events
+    /// for deferred processing in [`WebGl2Backend::process_hyperlink_events`].
     fn create_hyperlink_mouse_handler(
         beamterm: &Beamterm,
-        hyperlink_cells: Rc<RefCell<BitVec>>,
-        callback: Rc<RefCell<dyn FnMut(&str)>>,
-        cursor_state: Rc<RefCell<bool>>,
+        hyperlink_state: Rc<std::cell::Cell<PendingHyperlinkEvent>>,
     ) -> Result<TerminalMouseHandler, Error> {
         let grid = beamterm.grid();
         let canvas = beamterm.canvas();
-        let hyperlink_cells_clone = hyperlink_cells.clone();
-        let hyperlink_cells_move = hyperlink_cells.clone();
-        let canvas_clone = canvas.clone();
-        let cursor_state_clone = cursor_state.clone();
 
         let mouse_handler = TerminalMouseHandler::new(
             canvas,
             grid,
-            move |event: TerminalMouseEvent, grid: &beamterm_renderer::TerminalGrid| {
+            move |event: TerminalMouseEvent, _grid: &beamterm_renderer::TerminalGrid| {
+                let mut state = hyperlink_state.get();
                 match event.event_type {
-                    MouseEventType::MouseUp => {
-                        // Handle hyperlink clicks (left mouse button only)
-                        if event.button() == 0 {
-                            if let Some(url) = extract_hyperlink_url(
-                                hyperlink_cells_clone.clone(),
-                                grid,
-                                event.col,
-                                event.row,
-                            ) {
-                                if let Ok(mut cb) = callback.try_borrow_mut() {
-                                    cb(&url);
-                                }
-                            }
-                        }
+                    MouseEventType::MouseUp if event.button() == 0 => {
+                        state.click = Some((event.col, event.row));
                     }
                     MouseEventType::MouseMove => {
-                        // Handle cursor style changes on hover
-                        let is_over_hyperlink = Self::is_over_hyperlink(
-                            hyperlink_cells_move.clone(),
-                            grid,
-                            event.col,
-                            event.row,
-                        );
-
-                        // Only update cursor style if state has changed
-                        if let Ok(mut current_state) = cursor_state_clone.try_borrow_mut() {
-                            if *current_state != is_over_hyperlink {
-                                *current_state = is_over_hyperlink;
-                                Self::update_canvas_cursor_style(&canvas_clone, is_over_hyperlink);
-                            }
-                        }
+                        state.hover = Some((event.col, event.row));
                     }
-                    _ => {}
+                    _ => return,
                 }
+                hyperlink_state.set(state);
             },
         )?;
 
         Ok(mouse_handler)
     }
 
-    /// Checks if the given coordinates are over a hyperlink.
-    fn is_over_hyperlink(
-        hyperlink_cells: Rc<RefCell<BitVec>>,
-        grid: &beamterm_renderer::TerminalGrid,
-        col: u16,
-        row: u16,
-    ) -> bool {
-        let (cols, _) = grid.terminal_size();
-        let row_start_idx = row as usize * cols as usize;
-        let cell_idx = row_start_idx + col as usize;
+    /// Processes pending hyperlink events using [`Beamterm::find_url_at`].
+    ///
+    /// Called during [`WebGl2Backend::flush`] where `self.beamterm` is accessible.
+    fn process_hyperlink_events(&mut self) {
+        let state = match self.hyperlink_state.clone() {
+            Some(state) => state,
+            None => return,
+        };
+
+        let mut pending = state.get();
 
-        hyperlink_cells
-            .borrow()
-            .get(cell_idx)
-            .map(|b| *b)
-            .unwrap_or(false)
+        // Process pending click
+        if let Some((col, row)) = pending.click {
+            pending.click = None;
+            if let Some(url_match) = self.beamterm.find_url_at(CursorPosition::new(col, row)) {
+                if let Some(ref callback) = self.hyperlink_callback {
+                    if let Ok(mut cb) = callback.callback.try_borrow_mut() {
+                        cb(&url_match.url);
+                    }
+                }
+            }
+        }
+
+        // Update cursor style on hover
+        if let Some((col, row)) = pending.hover {
+            let is_over = self
+                .beamterm
+                .find_url_at(CursorPosition::new(col, row))
+                .is_some();
+            if self.cursor_over_hyperlink != is_over {
+                self.cursor_over_hyperlink = is_over;
+                Self::update_canvas_cursor_style(&self.beamterm.canvas(), is_over);
+            }
+        }
+
+        state.set(pending);
     }
 
     /// Initializes the beamterm renderer with the given options and parent element.
@@ -717,6 +661,7 @@ impl Backend for WebGl2Backend {
     /// This function is called after the [`WebGl2Backend::draw`] function to
     /// actually render the content to the screen.
     fn flush(&mut self) -> IoResult<()> {
+        self.process_hyperlink_events();
         self.check_canvas_resize()?;
 
         self.measure_begin(WEBGL_RENDER_MARK);
@@ -748,10 +693,6 @@ impl Backend for WebGl2Backend {
 
         self.beamterm.update_cells(cells).map_err(Error::from)?;
 
-        if let Some(hyperlink_cells) = &mut self.hyperlink_cells {
-            hyperlink_cells.borrow_mut().clear();
-        }
-
         Ok(())
     }
 
@@ -790,86 +731,6 @@ impl Backend for WebGl2Backend {
     }
 }
 
-/// Extracts text from beamterm grid using `[get_text(CellQuery)`].
-fn extract_text_from_grid(
-    grid: &beamterm_renderer::TerminalGrid,
-    start_col: u16,
-    end_col: u16,
-    row: u16,
-) -> Option<String> {
-    // Create a selection query for the hyperlink range
-    let query = select(SelectionMode::Block)
-        .start((start_col, row))
-        .end((end_col, row))
-        .trim_trailing_whitespace(true);
-
-    let text = grid.get_text(query);
-    if text.is_empty() {
-        None
-    } else {
-        Some(text.to_string())
-    }
-}
-
-/// Extracts hyperlink URL from grid coordinates.
-fn extract_hyperlink_url(
-    hyperlink_cells: Rc<RefCell<BitVec>>,
-    grid: &beamterm_renderer::TerminalGrid,
-    start_col: u16,
-    row: u16,
-) -> Option<String> {
-    let hyperlink_cells = hyperlink_cells;
-    let (cols, _) = grid.terminal_size();
-
-    // Find hyperlink boundaries
-    let (link_start, link_end) =
-        find_hyperlink_bounds(&hyperlink_cells.borrow(), start_col, row, cols)?;
-
-    // Extract text using beamterm's grid
-    extract_text_from_grid(grid, link_start, link_end, row)
-}
-
-/// Finds the start and end boundaries of a hyperlink.
-fn find_hyperlink_bounds(
-    hyperlink_cells: &BitVec,
-    start_col: u16,
-    row: u16,
-    cols: u16,
-) -> Option<(u16, u16)> {
-    let row_start_idx = row as usize * cols as usize;
-
-    // Ensure clicked cell is a hyperlink
-    if !hyperlink_cells
-        .get(row_start_idx + start_col as usize)
-        .map(|b| *b)
-        .unwrap_or(false)
-    {
-        return None;
-    }
-
-    // Find start of hyperlink (scan left)
-    let mut link_start = start_col;
-    while link_start > 0 {
-        let idx = row_start_idx + (link_start - 1) as usize;
-        if !hyperlink_cells.get(idx).map(|b| *b).unwrap_or(false) {
-            break;
-        }
-        link_start -= 1;
-    }
-
-    // Find end of hyperlink (scan right)
-    let mut link_end = start_col;
-    while link_end < cols - 1 {
-        let idx = row_start_idx + (link_end + 1) as usize;
-        if !hyperlink_cells.get(idx).map(|b| *b).unwrap_or(false) {
-            break;
-        }
-        link_end += 1;
-    }
-
-    Some((link_start, link_end))
-}
-
 /// Resolves foreground and background colors for a [`Cell`].
 fn resolve_fg_bg_colors(cell: &Cell) -> (u32, u32) {
     let mut fg = to_rgb(cell.fg, 0xffffff);