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.
See the Storybook for interactive examples and API documentation.
pnpm add @wandelbots/wandelbots-js-react-components react react-dom @mui/material @emotion/react @emotion/styledSome 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/monacoAvailable 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.
See section in Migration Guide for assistance.
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;
}
See section in Migration Guide for assistance.
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 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 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 components for production environments.
SafetyBar - Centralized safety status
- Real-time safety monitoring
- Emergency stop integration
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
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
Components integrate with the Wandelbots Nova ecosystem:
- NovaClient Integration - Components accept either
NovaClientinstances or URL strings - Real-time Updates - WebSocket connections for live robot state updates
- Motion Group Management - Direct integration with
ConnectedMotionGroupobjects - State Synchronization - Automatic state management with MobX reactivity
- 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
Required for all entry points:
- React 18+ or 19+
- Material-UI v6 or v7
- @emotion/react and @emotion/styled
For /3d (3D visualization components):
- three
- @react-three/fiber
- @react-three/drei
- three-stdlib
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 serverView 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 serverinstanceProviderConfig.json file:
{
"url": "yourURL"
}
.env.local file:
WANDELAPI_BASE_URL=http://<instance-ip>
CELL_ID=cell
Build and test the package locally:
pnpm build
pnpm pack
pnpm add /path/to/wandelbots-wandelbots-js-react-components-x.x.x.tgzNote: Use
pnpm addwith the.tgzfile instead ofpnpm linkdue to peer dependency requirements with React Three Fiber components.
We welcome contributions! Please see our contributing guidelines and feel free to submit issues and pull requests.
This project is licensed under the terms specified in the LICENSE file.