What is whyframe?
whyframe enables rendering any UI framework markup within an
iframe, including Svelte, Vue, Solid, Preact, and React. Simply:
<iframe data-why> Hello world! </iframe>
whyframe, browsers would only render a blank
When do I use this?
It’s useful if you’re:
- Building documentation for a component library that shows isolated usage examples.
- Writing an article that shows static isolated examples.
- Building a Storybook/Histoire clone.
It cannot be used to:
- Build interactive code examples. It only works in compile-time.
iframes dynamically or using
- Mix UI frameworks. You can’t write React code and inside the iframe, write Svelte code.
How does it work?
iframes. Check out How it works for an in-depth explanation!
- Works well for Vite, Svelte, and Vue
- Improvements needed for Webpack, Solid, Preact, React, and Astro
- The API may change during the
See the 1.0 Roadmap for the full details.
- ESM project. The library is exported as ESM only.
- Node.js 16.
whyframe in your browser! Powered by StackBlitz.
All templates at a glance:
- Vite + Svelte
- Vite + Vue
- Vite + Solid
- Vite + Preact
- Vite + React
- Webpack + React
Check out the integration guides below to get started!