Skip to main content

Self-hosted embedded viewer

Secure context required

Foxglove must run in a secure context. Serve your application over HTTPS or from localhost.

The self-hosted embedded viewer is available exclusively through a custom Enterprise agreement — it is not included in standard Enterprise plans. Enabling it requires a dedicated onboarding engagement with Foxglove. To learn more, contact us.

Viewer setup​

For the case of the fully self-hosted embedded viewer, you need to provide the parent element to which the iframe will be appended and the URL from which the embedded viewer will be served. The organization slug is not required for the self-hosted embedded viewer, so you can pass undefined.

import { FoxgloveViewer } from "@foxglove/embed";

// Create a frame with a parent element
const viewer = new FoxgloveViewer({
  parent: document.getElementById("container")!,
  orgSlug: undefined,
  src: "http://localhost:8080/",
});

Extensions​

warning

Since the self-hosted embedded viewer runs on your own infrastructure, you won't be able to access your organization's extensions hosted on Foxglove's servers.

You can install extensions to the embedded viewer using the installExtensions method. You can pass a list of .foxe file handles or URLs to a .foxe file.

The following example shows how to open a file picker and install the selected extension.

window
  .showOpenFilePicker({
    multiple: false,
    types: [
      {
        description: ".foxe",
        accept: {
          "application/zip": [".foxe"],
        },
      },
    ],
  })
  .then(async (handles) => {
    const file = await handles[0]!.getFile();
    viewer.installExtensions([file]);
  });