@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.

Quick Start

npm install @wandelbots/wandelbots-js-react-components

Getting Started

For setup instructions, integration examples, and basic usage patterns, visit the Getting Started Guide in our Storybook documentation.

Documentation

See the Storybook for interactive examples and API documentation.

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

Individual Jogging Controls

• JoggingCartesianAxisControl - Single-axis cartesian movement
• JoggingJointRotationControl - 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

Code Editing

Code editing capabilities for robot programming.

WandelscriptEditor - Code editor

• Monaco editor integration
• Wandelscript syntax highlighting
• IntelliSense support

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

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

Optional Dependencies (for 3D components)

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

See the Getting Started Guide for complete setup instructions and integration examples.

Development

To set up the project for development:

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

Local Testing

Build and test the package locally:

npm run build
npm pack
npm install /path/to/wandelbots-wandelbots-js-react-components-x.x.x.tgz

Note: Use npm install with the .tgz file instead of npm 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