wtf is iframe-pane?

iframe-pane is a small JavaScript and TypeScript library for keeping iframes alive and in their original state as you move them around a web page. Normally, when a piece of code removes an iframe from the page or moves it to a different spot in the layout, the iframe loses everything it was doing: its scroll position, whatever page it had navigated to, any typed input, all of it starts over. This is a common problem in apps built with frameworks like Vue or React, where switching tabs or re rendering part of the page can silently reset an embedded iframe. The library solves this by keeping every iframe parked inside one dedicated overlay area that is never re rendered by your framework. Your own components only render an empty placeholder element, and the library positions the real iframe on top of that placeholder, following it as it moves or resizes. Hiding an iframe does not remove it from the page, it just makes it invisible and unclickable while it keeps running in the background, so bringing it back later restores it exactly as it was left. It has no dependencies and works with any framework, or with no framework at all. It offers several extra conveniences: automatic resizing to match the size of its target element, a way to temporarily block iframes from capturing mouse and touch events during dragging or resizing elsewhere on the page, and an optional limit on how many iframes can be kept alive at once, automatically closing the least recently used ones when that limit is reached. It can also manage plain elements like a div in the same persistent way, not just iframes, and it is safe to use in server rendered applications since it only touches the actual page once the browser runs it. Installation is a single package manager command, and the basic usage is to create a manager, ask it to create or reuse a named pane pointed at a URL, then mount that pane onto any element on the page whenever you want it shown.