Sign in to contributeSign in
ExperimentalUI/UX & Frontend

Live Plots over WebSocket in React

Stream decimated sensor data to a browser chart without blocking the UI thread.

Owner: Ana NovakInstrumentationContact ownerAdded 18 Sep 2026Updated 30 Sep 2026
  • Runs out of the box: yes
  • Tests: no
  • CI: no
  • Docs: no
  • Used in production: no
Open repository (opens in a new tab)Try it

Learning demo, not turnkey. This example is experimental: it shows an idea that works on the bench, but it has not been reviewed for production use. Expect rough edges and check with the owner before reusing it.

Purpose#

A React front end that plots a few hundred thousand samples per second without freezing the page. A small server decimates the stream to the screen width, the browser receives binary frames over a WebSocket, and a canvas renderer draws from a ring buffer inside a worker.

The example is a prototype for a bench-instrument dashboard; it has no authentication and plots simulated data.

Media#

Figure 1 — Dashboard with simulated channels

Technologies & features#

Technologies
TypeScriptReactWebSocketViteTailwind CSS
Features
Interactive PlottingResponsive Layout
Topics
UI/UX & FrontendprimaryHardware Integration

Lessons learned#

  • Worked

    Decimating on the server to one min/max pair per pixel column kept bandwidth flat no matter how fast the source ran.

  • Didn’t work

    Updating React state per frame stalled the page. Drawing from a ring buffer in a worker and updating React only for controls fixed it.

Try it#

Shell
git clone https://git.example.internal/instrumentation/live-plots.git
cd live-plots
pnpm install
pnpm dev:sim   # simulated sensor + web app on http://localhost:5173

Commands come from the owner’s README. Credentials are never stored here.

Resources#

Contributes to

StatusExperimental
OwnerAna Novak
TeamInstrumentation
Last commit29 Sep 2026
Slugreact-live-plots-websocket
Report a problem to the owner