Real-time robot dashboards in React without a separate visualization server

ROS ROS General
, , ,
1

If you’ve built an operator UI or ground station in React, you’ve probably hit the same wall I did: the moment you need real-time telemetry visualization, your options are to run Foxglove or Grafana as separate infrastructure and iframe them in, or hand-roll canvas components from scratch. Neither is great when what you actually want is telemetry views that live natively inside the app you’re already building.

So I built Altara: a set of MIT-licensed React components for real-time telemetry, with a one-line rosbridge adapter so you can pipe a sensor_msgs topic straight into a chart, gauge, or attitude indicator.

A minimal example:

tsx

import { AltaraProvider, TimeSeries } from '@altara/core'
import { createRosbridgeAdapter } from '@altara/ros'

const imu = createRosbridgeAdapter({
  url: 'ws://localhost:9090',
  topic: '/imu/data',
  messageType: 'sensor_msgs/Imu',
})

<AltaraProvider theme="dark">
  <TimeSeries dataSource={imu} height={240} />
</AltaraProvider>

It’s a monorepo of six packages: @altara/core (the base components), @altara/ros (rosbridge adapter with typed factories for common sensor_msgs types), @altara/mqtt, and three domain packages, @altara/aerospace (PFD, HSI, TCAS and other flight instruments), @altara/av (LiDAR point cloud via Three.js, occupancy grid, SLAM map), and @altara/industrial (SCADA-style panels, waterfall spectrogram, alarm annunciator). 41 components total, every one runs in a mockMode so you can build and demo without hardware.

Everything renders to canvas via requestAnimationFrame with the hot path kept out of React, so high-frequency streams don’t cause re-render jank.

It’s early and I’m the only maintainer, so I’m being upfront about that. The architecture is deliberately simple, plain canvas and React, no exotic dependencies, so it’s straightforward to fork and self-maintain if that matters to you.

Website: https://www.usealtara.dev/

Repo: GitHub - JayaSaiKishanChapparam/altara: React components for real-time telemetry dashboards — robotics, aerospace, autonomous vehicles, industrial IoT. PFD, HSI, time-series, gauges, GPS maps, and ROS2/MQTT adapters at 60fps. · GitHub
Live Storybook (all 41 components): @storybook/core - Storybook

Demo: Altara Demo

What are you currently using for in-app telemetry visualization, and where does it fall short? Trying to understand what’s actually missing for people building custom operator interfaces.

1 Like
2

May I suggest adding some screenshots to your post?

Ik took me 4 clicks to find how these graphs actually could look:

Very cool stuff!

1 Like