GitHub. Website.

Status: Experimental.

Quick start

StackBlitz demo

Scaffold your app

If you have an existing Docusaurus app, you can skip this step.

Create a new Docusaurus project with:

$ npx create-docusaurus@latest

cd into your project directory and install dependencies with npm install.


whyframe comes in two packages, the core library and the UI framework integration.

# Install the core library
$ npm install -D @whyframe/core

# Install the JSX integration
$ npm install -D @whyframe/jsx


As whyframe works on the bundler level, @whyframe/jsx/docusaurus exports a Docusaurus plugin to add the necessary Webpack plugins and loaders to work:

/** @type {import('@docusaurus/types').Config} */
const config = {
  plugins: ['@whyframe/jsx/docusaurus']

module.exports = config

In some cases, you may need to run the docusaurus clear command for the changes to take effect.


You can edit src/pages/index.js or docs/intro.mdx to start creating an iframe. For example:

<iframe data-why>
  Hello world!

Start your app with npm run dev and watch Hello world! rendered within the iframe as-is!

To customize the default iframe content, the StackBlitz demo has an example of setting up a /frames/basic page.

Check out Features for more things you can do with whyframe.