GitHub. Website.

Quick start

StackBlitz demo:

Scaffold your app

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

Create a new Vite project with:

$ npm create [email protected]

Choose any framework of choice to start. whyframe supports all UI frameworks except Lit.

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 Svelte integration
$ npm install -D @whyframe/svelte

# Or install the Vue integration
$ npm install -D @whyframe/vue

# Or install the JSX integration (includes Solid, Preact & React)
$ npm install -D @whyframe/jsx


whyframe works on the bundler level, so the packages are simply Vite plugins. You can initialize these plugins in your vite.config.js:

import { defineConfig } from 'vite'
import { whyframe } from '@whyframe/core'
import { whyframeSvelte } from '@whyframe/svelte'
import { whyframeVue } from '@whyframe/vue'
import { whyframeJsx } from '@whyframe/jsx'

export default defineConfig({
  plugins: [
    // Initialize core plugin

    // Initialize Svelte integration plugin

    // Or initialize Vue integration plugin

    // Or initialize JSX integration plugin (also specify the UI framework)
    whyframeJSX({ defaultFramework: 'react' })

The integration plugin must come before the UI framework plugin, e.g. whyframeSvelte() should come before the svelte() plugin, as whyframe needs to preprocess the raw framework code instead of the compiled code.


Depending on which UI framework you’re using, you can edit App.svelte, App.vue, or App.jsx 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!

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