{"slug": "native-foxglove-visualization-in-lerobot", "title": "Native Foxglove Visualization in LeRobot", "summary": "LeRobot 0.6.0 now includes native Foxglove visualization support, enabling live streaming of teleoperation, recording, and dataset playback without custom code. Users can add a single flag to stream camera feeds and joint data over WebSocket, and replay datasets as seekable timelines. This integration simplifies imitation learning workflows by providing real-time feedback and consistent topic layouts across live and replay modes.", "body_md": "# Native Foxglove Visualization in LeRobot\n\nStream teleop, recording, and dataset playback from LeRobot straight into Foxglove without any code\n\n**tl;dr** [LeRobot](https://github.com/huggingface/lerobot) 0.6.0 ships native Foxglove support. Add `--display_mode=foxglove`\n\nto `lerobot-teleoperate`\n\n, `lerobot-record`\n\n, or `lerobot-rollout`\n\nto stream camera feeds and joint/action plots live over WebSocket. Replay any recorded dataset as a seekable timeline with `lerobot-dataset-viz --display-mode foxglove`\n\n. Connect the Foxglove app to `ws://localhost:8765`\n\nand you’re done — no custom integration code required.\n\nWith [PR #3902](https://github.com/huggingface/lerobot/pull/3902), Foxglove becomes a first-class visualization backend for LeRobot — selectable at runtime with a single flag. We are excited about this development and can’t wait to see how the community embraces simpler workflows.\n\n## Why Foxglove for LeRobot\n\nLeRobot’s control loop produces a rich mix of data every timestep: per-motor joint positions, action targets, one or more camera images, and (optionally) depth maps. Foxglove’s multi-panel layouts let you see all of this side by side — camera feeds in Image panels, joint traces in Plot panels, all synced to the same timeline.\n\nThree things make this integration useful for imitation learning workflows:\n\n**Live feedback during teleop and recording.** Spot a dead camera, a stuck joint, or a misaligned gripper*before*you’ve recorded fifty episodes. The Foxglove app updates in real time as you move the leader arm.**Seekable dataset playback.** Recorded episodes are served as a scrubbable timeline using Foxglove’scapability. Play, pause, seek, and change speed — frames are read from the on-disk dataset on demand and stamped at their original timestamps.`PlaybackControl`\n\n**Consistent topic layout across live and replay.** Whether you’re streaming live or replaying a dataset, data appears on the same topics:`/observation/state`\n\n,`/action/state`\n\n, and`/observation/images/<camera>`\n\n. Build a layout once and reuse it everywhere.\n\nUnder the hood, LeRobot uses the [Foxglove SDK](https://github.com/foxglove/foxglove-sdk) (`foxglove-sdk>=0.25.1`\n\n) to start a WebSocket server. Scalar features are published as typed JSON messages on a static `lerobot.Scalars`\n\nschema — a flat `{label, value}`\n\narray so every joint and action dimension is automatically named in Plot panels. Images are published as `RawImage`\n\n(or JPEG `CompressedImage`\n\nwhen compression is enabled).\n\n## Getting started\n\nLeRobot requires Python 3.12+. We run it using uv, but conda is also supported.\n\n```\nuv venv --python 3.12\nsource .venv/bin/activate\nuv pip install 'lerobot[feetech,dataset_viz]'\n```\n\nRefer to [LeRobot Installation documentation](https://huggingface.co/docs/lerobot/v0.6.0/en/installation) for more information.\n\n### Connect Foxglove\n\n- In the Foxglove app, select\n**Open connection** from the dashboard or left-hand menu. - Choose\n**Foxglove WebSocket** and enter`ws://localhost:8765`\n\n(the default bind address). - Start any LeRobot command with\n`--display_mode=foxglove`\n\n(live) or`--display-mode foxglove`\n\n(dataset replay) — data appears as soon as the server starts. [Download our layout](https://github.com/foxglove/foxglove-sdk/blob/main/python/foxglove-sdk-examples/so101-visualization/foxglove/lerobot_layout.json)for LeRobot or[create your own](https://docs.foxglove.dev/docs/visualization/layouts). We show you how to open a layout in Foxglove[in this video](https://youtu.be/TathDUV1ad0).\n\n## Live teleoperation\n\nThe fastest way to see Foxglove in action is during teleoperation. Pass `--display_data=true --display_mode=foxglove`\n\nto `lerobot-teleoperate`\n\nand move the leader arm — camera feeds and joint plots update in the Foxglove app in real time.\n\n```\nuv run lerobot-teleoperate \\\n  --robot.type=so101_follower \\\n  --robot.port=/dev/tty.usbmodemFOLLOWER \\\n  --robot.id=my_follower \\\n  --robot.cameras=\"{ front: {type: opencv, index_or_path: 0, width: 640, height: 480, fps: 30}}\" \\\n  --teleop.type=so101_leader \\\n  --teleop.port=/dev/tty.usbmodemLEADER \\\n  --teleop.id=my_leader \\\n  --display_data=true \\\n  --display_mode=foxglove\n```\n\nReplace the USB port paths with your actual device paths (find them with `lerobot-find-port`\n\n). Each motor’s position appears as a named series on `/observation/state`\n\n, and the teleoperator’s targets appear on `/action/state`\n\n. Camera frames stream to `/observation/images/front`\n\n.\n\n## Recording with live visualization\n\nWhen collecting demonstration data, live visualization is invaluable for catching problems early. Add the same flags to `lerobot-record`\n\n, and you’ll see exactly what the dataset will contain as each episode is captured.\n\n```\nuv run lerobot-record \\\n  --robot.type=so101_follower \\\n  --robot.port=/dev/tty.usbmodemFOLLOWER \\\n  --robot.id=my_follower \\\n  --robot.cameras=\"{ front: {type: opencv, index_or_path: 0, width: 640, height: 480, fps: 30}}\" \\\n  --teleop.type=so101_leader \\\n  --teleop.port=/dev/tty.usbmodemLEADER \\\n  --teleop.id=my_leader \\\n  --dataset.repo_id=${HF_USER}/foxglove-demo \\\n  --dataset.num_episodes=5 \\\n  --dataset.single_task=\"Pick up the cube\" \\\n  --display_data=true \\\n  --display_mode=foxglove\n```\n\nThe live Foxglove panel gives you instant feedback on camera framing, joint ranges, and action tracking — much easier than discovering a bad episode after recording dozens of them.\n\n## Seekable dataset playback\n\nThe most powerful part of this integration is dataset replay. `lerobot-dataset-viz`\n\ncan serve any LeRobot dataset — from the Hugging Face Hub or recorded locally — as a seekable timeline in Foxglove. The playback bar drives play, pause, seek, and speed; frames are read from disk on demand and stamped at their original dataset timestamps.\n\n```\n# A public SO-101 pick-and-place dataset\nuv run lerobot-dataset-viz \\\n  --repo-id lerobot/svla_so101_pickplace \\\n  --episode-index 0 \\\n  --display-mode foxglove\n\n# A dataset you recorded locally\nuv run lerobot-dataset-viz \\\n  --repo-id ${HF_USER}/foxglove-demo \\\n  --root ~/.cache/huggingface/lerobot/${HF_USER}/foxglove-demo \\\n  --episode-index 0 \\\n  --display-mode foxglove\n```\n\nThis uses the same `PlaybackControl`\n\ncapability described in our [earlier post on local player integration](/blog/connect-foxglove-to-your-local-player-with-playback-control). LeRobot advertises the episode’s time range, and the Foxglove app sends playback commands back to the server. A background thread reads frames from the on-disk dataset for whatever time you scrub to — no need to load the entire episode into memory upfront.\n\nDataset replay also publishes episode metadata (`done`\n\n, `truncated`\n\n, `reward`\n\n, `success`\n\n) on `/episode/state`\n\n, and uses the dataset’s feature metadata to label each scalar series with the correct joint names.\n\n## Policy rollout visualization\n\nThe same flags work for policy evaluation. When running `lerobot-rollout`\n\n, add `--display_data=true --display_mode=foxglove`\n\nto watch a trained policy execute in Foxglove — useful for comparing what the policy observes and commands against what you demonstrated during recording.\n\n## Tips and options\n\nA few handy flags beyond the basics:\n\n| Goal | Live commands (`teleoperate` / `record` / `rollout` ) | Dataset replay (`lerobot-dataset-viz` ) |\n|---|---|---|\n| JPEG-compress images | `--display_compressed_images` | `--display-compressed-images` |\n| Custom port | `--display_port=8766` | `--web-port 8766` |\n| Stream to another machine | `--display_ip=0.0.0.0` | `--host 0.0.0.0` |\n| Don’t auto-play on connect | — | `--no-autoplay` |\n\nWhen streaming to another machine, connect the Foxglove app to `ws://<robot-ip>:8765`\n\ninstead of `localhost`\n\n.\n\n**Depth images:** if your robot has a depth camera, LeRobot handles it automatically. During live streaming, depth values are normalized for display contrast. During dataset replay, raw depth measurements are preserved so you can inspect the actual values.\n\n**Flag naming:** live commands use underscores (`--display_mode`\n\n, `--display_data`\n\n) while `lerobot-dataset-viz`\n\nuses hyphens (`--display-mode`\n\n). This matches each tool’s CLI convention — just something to watch for when switching between workflows.\n\n## What’s next\n\nLeRobot’s Foxglove integration covers the full imitation learning loop: teleoperate, record, replay, and evaluate — all through the same WebSocket topics and schemas. No need to roll it out yourself anymore.\n\nTo go further, check out the [Foxglove SDK examples](https://github.com/foxglove/foxglove-sdk/tree/main/python/foxglove-sdk-examples) for building custom visualizations on top of LeRobot’s topic layout — like a live 3D kinematic model driven from joint positions.\n\nResources:\n\n[LeRobot Foxglove visualization source](https://github.com/huggingface/lerobot/blob/main/src/lerobot/utils/foxglove_visualization.py)[LeRobot dataset visualization docs](https://huggingface.co/docs/lerobot/en/using_dataset_tools)[Foxglove PlaybackControl documentation](https://docs.foxglove.dev/docs/sdk/websocket-server#playback-control)[Foxglove WebSocket connections](https://docs.foxglove.dev/docs/connecting-to-data/frameworks/custom#foxglove-websocket)\n\nDownload the latest [Foxglove desktop app](/download) and try it with your LeRobot setup today. Join our [Discord](https://foxglove.dev/community) community or follow us on [X](https://x.com/foxglove) and [LinkedIn](https://www.linkedin.com/company/foxglovedev) to stay up to date on all Foxglove releases.", "url": "https://wpnews.pro/news/native-foxglove-visualization-in-lerobot", "canonical_source": "https://foxglove.dev/blog/native-foxglove-visualization-in-lerobot", "published_at": "2026-07-17 05:27:49+00:00", "updated_at": "2026-07-17 05:51:06.134983+00:00", "lang": "en", "topics": ["robotics", "developer-tools", "ai-tools"], "entities": ["LeRobot", "Foxglove", "Hugging Face", "Foxglove SDK"], "alternates": {"html": "https://wpnews.pro/news/native-foxglove-visualization-in-lerobot", "markdown": "https://wpnews.pro/news/native-foxglove-visualization-in-lerobot.md", "text": "https://wpnews.pro/news/native-foxglove-visualization-in-lerobot.txt", "jsonld": "https://wpnews.pro/news/native-foxglove-visualization-in-lerobot.jsonld"}}