Preview iframe

Strapkit.prototype.showPreview(port, frameId?)

showPreview(port: number, frameId?: string): Promise<void>

Show the server running on port inside a preview iframe. Your page needs an iframe element for Strapkit to target:

<iframe id="my-preview" sandbox="allow-scripts"></iframe>

sk.showPreview(3000, "my-preview");

frameId defaults to "strapkit-preview-frame" when omitted.

Each call generates a new isolated origin, so opening a fresh preview can never see cookies or storage from a previous one. The host page forwards requests from the iframe to your server; responses stream back the same way.

Strapkit.prototype.onPortOpen(callback)

onPortOpen(callback: (port: number, info: { addr: string }) => void): void

Register a callback that fires every time a server inside Strapkit starts listening on a port. No log scraping — Strapkit tells you the moment it happens.

Auto-open the preview when a dev server starts

The natural pairing with showPreview: wait for the right port to bind, then open the iframe automatically.

sk.onPortOpen((port) => {
  if (port === 3000) sk.showPreview(port, "my-preview");
});

Now npm run dev (or any other server start) inside the shell flips the iframe on as soon as the port binds — no manual button click, no "copy this URL" step.

Caveats

• Fires the instant a port binds, not when the server is fully ready. Next.js, for example, opens its port before the first build finishes, so the iframe may briefly show a "compiling…" page. Usually fine.
• You'll see internal ports too. Vite's HMR socket, Next's RSC channel, and similar background services also trigger the callback. Filter to the port your user is actually serving on.