Foxglove’s data visualizations are now just an <iframe> away.
Announcing Foxglove iframe embedding, a new way to bring Foxglove Visualization directly into your own tools using our TypeScript and React SDKs.
If you’re running robots in the real world, you probably already have a handful of internal tools: an operations console, a CI dashboard, maybe a customer portal. Today, Foxglove often sits alongside those tools as “the place you go when you really need to see what happened.”
Embedding pulls Foxglove into that flow instead of sitting off to the side.
An ops engineer can open an incident and immediately scrub through live or recent telemetry in an embedded Foxglove view; a customer can review their robot’s performance in your portal and still get the rich spatial and temporal context Foxglove is known for.
Foxglove SDKs create and manage the iframe for you, so you get the full viewer experience with a clean, well-typed API instead of custom postMessage wiring or one-off integrations.
The embedded viewer is the same under the hood whether you integrate it via TypeScript or React.
If you’re in a TypeScript or JavaScript codebase, the TypeScript SDK gives you an object you can instantiate, configure, and control. You decide where it mounts, how it authenticates, and how it responds to user actions in your app.
If you’re building in React, the React SDK wraps that viewer in a component. You render it as part of your layout, hook into lifecycle events, and use a ref when you need to drive viewer behavior from your own controls.
Whichever you choose, the result is the same: a fully featured Foxglove viewer embedded in your UI, without having to reinvent a robotics visualization stack.
If you’ve built custom Foxglove extensions—specialized panels, domain-specific overlays, or internal tools—you don’t have to abandon them when you embed. Enterprise customers can install extensions programmatically into embedded viewers.
Layouts are where Foxglove becomes tailored to your team, and that carries over to embedded views.
Embedded layouts persist locally in the browser, so when someone adjusts a panel arrangement, zoom level, or 3D view, those changes are saved automatically on their device. The next time they open that view in your product, Foxglove comes back exactly as they left it, without you having to build layout storage yourself.
You also get programmatic control over layouts. From your own UI you can:
Instead of treating layouts as something users manage in a separate app, you can make them part of how your product guides people through debugging and analysis.
By default, embedded viewers are served from https://embed.foxglove.dev/. You get a fully managed, up-to-date viewer with authentication wired into your Foxglove organization, while your app remains in control of the surrounding experience.
For teams with stricter requirements, the Enterprise option includes a fully self-hosted embedded viewer. You can run it on your own infrastructure, control how it’s exposed, and support more tightly controlled or air-gapped environments.
In both cases, the iframe boundary keeps the integration isolated while still feeling seamless to end users.
Decide whether the TypeScript or React SDK fits your stack, wire up a container or component, and point the viewer at the data sources and layouts that matter most for your team.
When you’re ready to dive in, you can learn more in:
With iframe embedding, Foxglove becomes another building block in your interface, so your team can see what your robots see without leaving the tools they already trust.
