Develop components in isolation
<script>
import Popup from './Popup.svelte'
const content = 'Hoozah!'
</script>
<h2>This is a popup component</h2>
<p>It opens a fullscreen overlay ...</p>
<iframe data-why>
<Popup {content}>Open</Popup>
</iframe>
<p>... contained within the iframe!</p>
This is a popup component
It opens a fullscreen overlay ...
... contained within the iframe!
whyframe gives iframes superpowers,
making it easy to render anything in isolation.
Bundlers
Browsers ignore content within iframes by default,
whyframe leverages modern JavaScript bundlers to make it possible.
Frameworks
Supports most popular UI frameworks!
Features
Isolated
Anything within an iframe is isolated. Prevents scripts and styles from leaking out.
Seamless
Wrap anything with an iframe and it will just work. No context switching needed.
Compatible
Out-of-the-box support for major frameworks like Vite, SvelteKit, Astro, VitePress, and Nuxt.
Performant
Renders with your framework of choice as-is. Everything else is done in compile-time.
Flexible
Reuse iframes with components. Add custom styles and logic. Make it whatever you want!
Atomic
An iframe is simply a primitive. Build over it and bring your own opinions.
Support
whyframe is made possible thanks to these fine folks
