@wandelbots/wandelbots-js-react-components

React UI components for building robotics applications on the Wandelbots Nova platform.

Built with TypeScript, Material-UI, and React Three Fiber. Provides robot control interfaces, 3D visualizations, and automation components that integrate with the Nova ecosystem.

Interactive Documentation

See the Storybook for interactive examples and API documentation.

Install

pnpm add @wandelbots/wandelbots-js-react-components react react-dom @mui/material @emotion/react @emotion/styled

Some modules require extra dependencies, like three.js. If you don't need 3D rendering in your application, always import from /core.

import {
  SafetyBar,
  JoggingPanel,
  DataGrid,
  Timer,
} from "@wandelbots/wandelbots-js-react-components/core"

For 3D-enabled components, use /3d:

import { Robot, RobotCard } from "@wandelbots/wandelbots-js-react-components/3d"

For SVG icon components (general UI icons and safety bar icons), use /wb-icons:

import {
  RobotIcon,
  HomeIcon,
  ControllerTypeVirtualIcon,
  SafetyStateNormalIcon,
} from "@wandelbots/wandelbots-js-react-components/wb-icons"

You can also import from the top-level package, but then you'll need to provide all optional dependencies:

pnpm add @wandelbots/wandelbots-js-react-components \
 react react-dom \
 @mui/material @mui/icons-material @emotion/react @emotion/styled \
 three @react-three/fiber @react-three/drei three-stdlib \
 @monaco-editor/react shiki @shikijs/monaco

Available Entry Points:

• . (Main) — All components. Requires: React 18+, MUI v6/v7, @emotion/react, @emotion/styled, @mui/icons-material + all below.
• /core — Base components (AppHeader, ProgramControl, SafetyBar, VelocitySlider, JoggingPanel, DataGrid, Timer, themes, i18n, etc.). Requires: React 18+, MUI v6/v7, @emotion/react, @emotion/styled, @mui/icons-material.
• /wb-icons — SVG icon components (general UI icons, safety bar icons, jogging icons, axis icons). Requires: React 18+.
• /3d — 3D visualization (Robot, RobotCard, CollisionSceneRenderer, SafetyZonesRenderer, TrajectoryRenderer). Requires: all from /core + three, @react-three/fiber, @react-three/drei, three-stdlib.

4.x to 5.x Migration Guide

See section in Migration Guide for assistance.

4.x Core Changes

Robot data is now fetched from a running nova instance. This eliminates the need of shipping every react application with the robot data attached.

It is still possible to fetch robot data from local files. (See https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/3d-view-robot-robot--docs)

The wandelbots-js-react-components library can be used both with and without a Nova connection. For details on connecting to a Nova instance, see the Robot Model Testing section below.

The list of available robots will now be automatically updated along with the nova version. There is no more need to update nova apps whenether there is a new supported robot the app wants to feature.

Robot dh-parameters are now using a new format.

interface DHParameter {
  'alpha': number;
  'theta': number;
  'a': number;
  'd': number;
  'reverse_rotation_direction': boolean;
}

2.x to 3.x Migration Guide

See section in Migration Guide for assistance.

Components

Robot Control & Jogging

Manual robot control interfaces.

JoggingPanel - Complete jogging interface with cartesian and joint controls

• Dual-mode operation (Cartesian & Joint space)
• Real-time velocity control
• Multiple coordinate systems support (Robot base or Tool)

Individual Jogging Controls

• JoggingCartesianAxisControl - Single-axis cartesian movement
• JoggingJointValueControl - Individual joint controls
• VelocitySlider - Speed adjustment interface

Program Execution

Program control and monitoring components.

ProgramControl - Program lifecycle management

• Play, pause, stop functionality
• State machine integration
• Manual reset capabilities

ProgramStateIndicator - Visual program status

• Live execution state monitoring
• Error state visualization

3D Visualization & Robotics

3D components for robot visualization.

Robot - Real-time 3D robot rendering

• Live pose updates from motion groups
• Extensive robot model support from major manufacturers
• Supported Models - ABB, FANUC, KUKA, Universal Robots, Yaskawa (100+ models)
• Automatic model loading from CDN

SafetyZonesRenderer - 3D safety visualization

• Real-time safety zone rendering
• Visual collision boundaries

TrajectoryRenderer - Motion path visualization

• Real-time trajectory display
• Path planning visualization

Safety & Monitoring

Safety components for production environments.

SafetyBar - Centralized safety status

• Real-time safety monitoring
• Emergency stop integration

Data & Interface Components

UI components for data display and user interaction.

Data Components

• DataGrid - Data tables with robotics data formatting
• LogPanel - Real-time log display and filtering
• CycleTimer - Production cycle timing and metrics

Robot Management

• RobotCard - Robot overview cards with status
• RobotListItem - List view for multiple robots
• RobotSetupReadinessIndicator - Setup validation status

Navigation

• AppHeader - Application header with branding
• TabBar - Multi-section navigation

Theming & Styling

Styling system for consistent robotics applications.

Theming components - Interactive theming examples

• Component theming demonstrations
• Customization patterns

Wandelbots MUI Theme - Material-UI theme

• Dark/light mode support
• Robotics-specific color schemes
• Material Design integration

Architecture & Integration

Nova Platform Integration

Components integrate with the Wandelbots Nova ecosystem:

• NovaClient Integration - Components accept either NovaClient instances or URL strings
• Real-time Updates - WebSocket connections for live robot state updates
• Motion Group Management - Direct integration with ConnectedMotionGroup objects
• State Synchronization - Automatic state management with MobX reactivity

Technical Foundation

• TypeScript - Full type safety and enhanced developer experience
• Material-UI v6/v7 - Professional design system and theming
• React Three Fiber - High-performance 3D rendering for robotics visualization
• MobX - Reactive state management for real-time updates
• i18next - Internationalization support for global deployment

Installation & Setup

Prerequisites

Required for all entry points:

• React 18+ or 19+
• Material-UI v6 or v7
• @emotion/react and @emotion/styled

Additional Peer Dependencies

For /3d (3D visualization components):

• three
• @react-three/fiber
• @react-three/drei
• three-stdlib

Development

To set up the project for development:

git clone https://github.com/wandelbotsgmbh/wandelbots-js-react-components.git
cd wandelbots-js-react-components
pnpm install
pnpm dev  # Start Storybook development server

Robot Model Testing

View Robot Models in web view:

git clone https://github.com/wandelbotsgmbh/wandelbots-js-react-components.git
cd wandelbots-js-react-components
pnpm install
pnpm td <instanceProviderURL> # instanceProviderURL can be provided via an instanceProviderConfig.json file. The entire command can be substituted by writing a nova instance ip into a file named .env.local
pnpm dev  # Start Storybook development server

instanceProviderConfig.json file:

{
  "url": "yourURL"
}

.env.local file:

WANDELAPI_BASE_URL=http://<instance-ip>
CELL_ID=cell

Local Testing

Build and test the package locally:

pnpm build
pnpm pack
pnpm add /path/to/wandelbots-wandelbots-js-react-components-x.x.x.tgz

Note: Use pnpm add with the .tgz file instead of pnpm link due to peer dependency requirements with React Three Fiber components.

Contributing

We welcome contributions! Please see our contributing guidelines and feel free to submit issues and pull requests.

License

This project is licensed under the terms specified in the LICENSE file.

Explore the Storybook • Visit Wandelbots.com