Enabling Pin-Based Commenting on Live HTML Iframes: Open-Source, Framework-Agnostic Solution with Adapter Flexibility

Introduction & Problem Statement Imagine trying to annotate a live, interactive webpage with the precision of Figma’s pin-based comments. Now, imagine doing this within an iframe —a nested HTML document isolated by its own DOM and coordinate system. This is the core technical challenge Washi solves. While tools like Figma excel at static design files, replicating their annotation precision on live, dynamic HTML content within iframes introduces a cascade of complexities: DOM mutations, cross-origin restrictions, and coordinate system discrepancies. The Problem: Why Pin-Based Commenting in Iframes is Hard At its core, pin-based commenting requires pixel-perfect synchronization between the annotation layer and the underlying content. In iframes, this breaks down due to: DOM Isolation: Iframes operate in a separate document context, making direct DOM manipulation from the parent page impossible without explicit permissions. Coordinate Mismatch: The iframe’s internal scroll position and el