Whop apps are embedded into the site using iFrames. This SDK provides a type-safe way for you to communicate with the Whop application using a request/response style API powered by window.postMessage.

Since this package relies on window.postMessage, it only works in Client Components.


The main function exported from this package is the createAppIframeSDK function. When called, this function sets up a listener for messages from the main Whop site, using window.on('message', ...).

Next.js Setup

If you’re using Next.js, you’ll need to make sure that you’re only calling createAppIframeSDK on the client. You can do this by using a client layout defined in the root of your app.

Here is an example of the project structure:

├─ layout.tsx
├─ layout.client.tsx
├─ iframe.ts
import { ClientLayout } from "./layout.client";

export default function RootLayout({
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang="en">

Next.js Will mount this code on the client:

"use client"; // this line is important
import { FC, PropsWithChildren } from "react";
import "@/lib/iframe";

export const ClientLayout: FC<PropsWithChildren> = ({ children }) => {
  return <>{children}</>;

We declare the SDK in a separate file, such that we can import it throughout the rest of the app.

import { createAppIframeSDK } from "@whop-apps/sdk";

export const WhopApp = createAppIframeSDK({
  onMessage: {},
We have now setup the SDK and iFrame.