Open source · MIT licensed

Real-time telemetry visualizationfor React

Canvas-rendered flight instruments, LiDAR viewers, SCADA panels, and more, embeddable in any React app. No platform required.

6 packages41 componentsMIT licensed

View in Storybook GitHub

Get started in seconds

$ npm install @altara/core

→ Live demo

usealtara.dev/storybook

$ npm install @altara/core @altara/ros

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

const battery = createRosbridgeAdapter({
  url: 'ws://localhost:9090',
  topic: '/battery_state',
})

export function Dashboard() {
  return (
    <AltaraProvider theme="dark">
      <TimeSeries dataSource={battery} height={240} />
      <Gauge dataSource={battery} min={0} max={100} />
    </AltaraProvider>
  )
}

Live output

Built for engineers working in

RoboticsAerospaceAutonomous VehiclesIndustrial IoT

Foundation

Real-time components and ROS2 for any robot

The core of Altara: canvas-rendered telemetry components plus a one-line ROS2 rosbridge adapter. Subscribe to a sensor_msgs topic and pipe live data into a TimeSeries, Gauge, or attitude indicator in minutes. This is the layer every other Altara package builds on, so it works with any ROS2 robot, not just a specific domain.

createRosbridgeAdapter subscribe to any sensor_msgs topic in one line
TimeSeries 60fps canvas chart for high-frequency sensor streams
AltaraProvider theming and data context for every component

$ npm install @altara/core

$ npm install @altara/ros

Explore core in Storybook ->

@altara/core

TimeSeries60fps canvas time-series chart
Gaugeradial gauge for a single value
Attitudeartificial horizon attitude indicator
SignalPanelmulti-signal readout panel
LiveMaplive position and track map
EventLogstreaming event and log list
ConnectionBardata source connection status
MultiAxisPlotmulti-axis synchronized plot
DashboardLayoutdraggable dashboard grid

@altara/ros

createRosbridgeAdaptersubscribe to any rosbridge topic
createBatteryStateAdaptersensor_msgs/BatteryState source
createNavSatFixAdaptersensor_msgs/NavSatFix GPS source
createRangeAdaptersensor_msgs/Range distance source
createTemperatureAdaptersensor_msgs/Temperature source
createImuAdaptersensor_msgs/Imu orientation source

Aerospace

Flight instruments for drone ground stations

Eleven flight instruments built to aviation display conventions, ready to embed in a React ground control station. Built for drone GCS, eVTOL monitoring, UAV simulators, and aviation research, where generic charting libraries fall short.

PrimaryFlightDisplay composite attitude, airspeed, altitude, heading
HorizontalSituationIndicator course and heading with CDI
TCASDisplay traffic collision avoidance

$ npm install @altara/aerospace

Explore Aerospace in Storybook ->

@altara/aerospace

PrimaryFlightDisplaycomposite attitude, airspeed, altitude, heading
HorizontalSituationIndicatorcourse and heading with CDI
Altimeterbarometric altitude dial
AirspeedIndicatorairspeed dial with V speeds
VerticalSpeedIndicatorclimb and descent rate
EngineInstrumentClusterRPM, EGT, oil, fuel flow
RadioAltimeterheight above terrain with DH
TCASDisplaytraffic collision avoidance
AutopilotModeAnnunciatorflight mode annunciator
TerrainAwarenessterrain awareness and warning
FuelGaugemulti tank fuel quantity

Autonomous Vehicles

Perception and planning visualization for autonomous systems

Eleven components for the autonomous vehicle stack, from LiDAR point clouds to occupancy grids to perception pipeline monitoring. Speaks the ROS2 message formats teams already use, embeddable in a custom operator interface.

LiDARPointCloud Three.js sensor_msgs/PointCloud2 renderer
OccupancyGrid nav_msgs/OccupancyGrid overhead map
SLAMMap live mapping with pose graph

$ npm install @altara/av

Explore Autonomous Vehicles in Storybook ->

@altara/av

LiDARPointCloudThree.js PointCloud2 renderer
OccupancyGridoverhead occupancy map
ObjectDetectionOverlaybounding boxes and labels
PathPlannerOverlayplanned and alternate paths
VelocityVectorDisplayheading and speed vector
PerceptionStateMachinepipeline state view
SensorHealthMatrixper sensor status grid
CameraFeedannotated camera stream
ControlTracesteering and throttle trace
RadarSweepradar returns and tracks
SLAMMaplive mapping with pose graph

Industrial

SCADA and HMI components for the factory floor

Nine components styled to industrial control conventions, for manufacturing HMIs, energy control rooms, and process monitoring. Built to look like the panels operators already trust, running in a modern React app.

WaterfallSpectrogram real-time FFT for vibration and acoustic analysis
OEEDashboard overall equipment effectiveness
AlarmAnnunciatorPanel industrial alarm tile grid

$ npm install @altara/industrial

Explore Industrial in Storybook ->

@altara/industrial

WaterfallSpectrogramreal-time FFT waterfall
PIDTuningPanelPID gain tuning
OEEDashboardoverall equipment effectiveness
AlarmAnnunciatorPanelindustrial alarm tile grid
TrendRecordermulti pen chart recorder
PIDNodesingle loop PID controller
ProcessFlowDiagramlive P and ID flow diagram
MotorDashboardmotor load and temperature
PredictiveMaintenanceGaugeremaining useful life

How Altara compares

Altara is not a replacement for observability platforms. It solves a different problem: embedding real-time telemetry directly in your own React app. Here is how it differs from the tools teams already use.

Altara vs Foxglove

Embeddable React components vs a standalone robotics observability platform.

Compare ->

Altara vs Grafana

Native React telemetry components vs iframe-embedded observability dashboards.

Compare ->