Overview

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>

Without whyframe, browsers would only render a blank iframe.

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.
• Create iframes dynamically or using whyframe through a CDN. It requires a JavaScript bundler.
• Mix UI frameworks. You can’t write React code and inside the iframe, write Svelte code.

How does it work?

whyframe relies on JavaScript bundlers to apply HTML extraction within the iframes. Check out How it works for an in-depth explanation!

Project status

• Works well for Vite, Svelte, and Vue
• Improvements needed for Webpack, Solid, Preact, React, and Astro
• The API may change during the v0.x period
• A 1.0 Roadmap has been set out
• The author (bluwy) is currently working on other projects and has not put much time working on this, but contributions or maintainers are always welcome!

Requirements

• ESM project. The library is exported as ESM only.
• Node.js 16.

Quick start

Play with whyframe in your browser! Powered by StackBlitz.

https://whyframe.dev/new

All templates at a glance:

• Vite + Svelte
• Vite + Vue
• Vite + Solid
• Vite + Preact
• Vite + React
• Webpack + React
• SvelteKit
• Astro
• VitePress
• Nuxt
• Next
• Docusaurus

Manual setup

whyframe requires a JavaScript bundler to work. Currently, only Vite is supported, which powers major meta-frameworks such as SvelteKit, Astro, VitePress, and Nuxt.

Check out the integration guides below to get started!

• Vite
• Webpack
• SvelteKit
• Astro
• VitePress
• Nuxt
• Next
• Docusaurus