Sometimes you may need to access a running sandbox application and preview the content in real time in a front-end client. This is useful for example to instantly preview React code generated by a codegen AI agent.

You can do this via a preview URL that routes to a specific port on your sandbox (e.g. port 3000 for npm run dev). This preview URL does not require you to be authenticated to access it.

​
Current limitations of real-time previews

JavaScript module bundlers handle real-time previewing. Here are the key compatibility requirements and limitations:

  • Module bundler must implement ping-pong
  • Webpack has been tested and works
  • Turbopack currently doesn’t work as it doesn’t support ping-pong (see issue raised to Vercel)
  • Blaxel has a 15-minute connection timeout. To maintain previews beyond this limit, ensure your bundler implements automatic reconnection

​
Public and private preview URLs

Preview URLs can be created in either one of two modes:

  • public: anyone can access the URL
  • private: a key is required to access the URL (this feature is coming soon!)

​
Manage preview URLs

​
Blaxel console

You can create a preview URL for a sandbox from the Blaxel Console, on the overview of a sandbox:

​
Blaxel SDK

Create and manage a sandbox’s preview URL:

	import { SandboxInstance } from "@blaxel/core";

	const sandbox = await SandboxInstance.get("my-sandbox")

  try {
    await sandbox.previews.create({
      metadata: {
        name: "preview-test-1"
      },
      spec: {
        port: 443,
        public: true
      }
    })
    const previews = await sandbox.previews.list()
    if (previews.length < 1) {
      throw new Error("No previews found");
    }
    const preview = await sandbox.previews.get("preview-test-1")
    if (preview.name !== "preview-test-1") {
      throw new Error("Preview name is not correct");
    }
    const url = preview.spec?.url
    if (!url) {
      throw new Error("Preview URL is not correct");
    }
    const response = await fetch(`${url}/health`)
    if (response.status !== 200) {
      throw new Error("Preview is not working");
    }
    console.log("Preview is healthy :)")
  } catch (e) {
    console.log("ERROR IN PREVIEWS NOT EXPECTED => ", e.error);
  } finally {
    await sandbox.previews.delete("preview-test-1")
  }