techlist.io
KR EN
figma

Introducing BrowserView for Electron | Figma Blog (opens in new tab)

webassemblyelectronwebglchromiumwebviewdesktop-appsbrowserview

Figma introduced BrowserView for Electron to address the performance, stability, and feature bugs it experienced with <webview>. BrowserView embeds web apps at the operating-system window level, similar to Chrome tabs, allowing them to perform more like native Chrome content. Although it requires manual positioning and layering, Figma found the trade-off worthwhile and shipped it in Figma Desktop 2.0.

Why Figma Chose Electron

  • Figma uses the web to make its design tools broadly accessible.
  • Its desktop app is built with Electron, extending the web experience to desktop platforms.
  • Figma had already improved performance through technologies such as WebGL and WebAssembly.
  • The company also contributed fixes and improvements to Electron and Chromium.

Problems with <webview>

  • Electron commonly uses <webview> to embed remote web applications.
  • Unlike an iframe, a webview renders content in a separate process, improving security, stability, and performance.
  • Over time, Figma encountered:
    • Drag-and-drop bugs
    • Performance below that of Chrome
    • Other fundamental reliability issues
  • Because webview is implemented inside Chromium, fixing its underlying problems would require major Chromium changes.
  • Figma and Electron maintainers therefore chose to develop an alternative rather than continue waiting for Chromium fixes.

How BrowserView Works

  • <webview> exists within the page’s DOM hierarchy.
  • BrowserView lives in the operating system’s window hierarchy, much like Chrome’s browser tabs.
  • This design benefits from the more mature and actively maintained code paths used for Chrome tabs.
  • BrowserView eliminates many webview-specific bugs.
  • Applications embedded through BrowserView can perform similarly to applications running directly in Chrome.

Trade-offs and Adoption

  • BrowserViews cannot be positioned or layered using ordinary HTML and CSS.
  • Developers must manually manage their size, location, and stacking order.
  • This can be difficult for applications with complex interfaces.
  • For Figma, converting to BrowserView was relatively straightforward.
  • At the time of publication, BrowserView was experimental and still planned for further refinement.

Figma recommends BrowserView as a promising replacement for <webview> when improved performance and reliability outweigh the added layout complexity.