{"id":33281685,"url":"https://github.com/wandelbotsgmbh/wandelbots-js-react-components","last_synced_at":"2026-04-15T12:02:03.845Z","repository":{"id":248532720,"uuid":"823691832","full_name":"wandelbotsgmbh/wandelbots-js-react-components","owner":"wandelbotsgmbh","description":"React UI component library for building apps on Wandelbots Platform","archived":false,"fork":false,"pushed_at":"2026-04-10T15:11:17.000Z","size":191595,"stargazers_count":13,"open_issues_count":12,"forks_count":3,"subscribers_count":10,"default_branch":"main","last_synced_at":"2026-04-10T15:19:30.182Z","etag":null,"topics":["react","react-three-fiber","wandelbots"],"latest_commit_sha":null,"homepage":"https://wandelbotsgmbh.github.io/wandelbots-js-react-components","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wandelbotsgmbh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-07-03T14:19:27.000Z","updated_at":"2026-04-10T15:10:18.000Z","dependencies_parsed_at":"2025-01-13T09:25:05.214Z","dependency_job_id":"b7920948-4926-492a-8ec2-a827455bfa13","html_url":"https://github.com/wandelbotsgmbh/wandelbots-js-react-components","commit_stats":null,"previous_names":["wandelbotsgmbh/wandelui"],"tags_count":293,"template":false,"template_full_name":null,"purl":"pkg:github/wandelbotsgmbh/wandelbots-js-react-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wandelbotsgmbh%2Fwandelbots-js-react-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wandelbotsgmbh%2Fwandelbots-js-react-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wandelbotsgmbh%2Fwandelbots-js-react-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wandelbotsgmbh%2Fwandelbots-js-react-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wandelbotsgmbh","download_url":"https://codeload.github.com/wandelbotsgmbh/wandelbots-js-react-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wandelbotsgmbh%2Fwandelbots-js-react-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31840113,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T11:29:19.690Z","status":"ssl_error","status_checked_at":"2026-04-15T11:29:19.171Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-three-fiber","wandelbots"],"created_at":"2025-11-17T13:05:12.907Z","updated_at":"2026-04-15T12:02:03.835Z","avatar_url":"https://github.com/wandelbotsgmbh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @wandelbots/wandelbots-js-react-components\n\n[![NPM version](https://img.shields.io/npm/v/@wandelbots/wandelbots-js-react-components.svg)](https://npmjs.org/package/@wandelbots/wandelbots-js-react-components) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@wandelbots/wandelbots-js-react-components)](https://bundlephobia.com/package/@wandelbots/wandelbots-js-react-components) [![Release](https://github.com/wandelbotsgmbh/wandelbots-js-react-components/actions/workflows/release.yml/badge.svg)](https://github.com/wandelbotsgmbh/wandelbots-js-react-components/actions/workflows/release.yml) [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://wandelbotsgmbh.github.io/wandelbots-js-react-components)\n\nReact UI components for building robotics applications on the [Wandelbots Nova platform](https://www.wandelbots.com/).\n\nBuilt with TypeScript, Material-UI, and React Three Fiber. Provides robot control interfaces, 3D visualizations, and automation components that integrate with the Nova ecosystem.\n\n## Interactive Documentation\n\nSee the [Storybook](https://wandelbotsgmbh.github.io/wandelbots-js-react-components) for interactive examples and API documentation.\n\n## Install\n\n```bash\npnpm add @wandelbots/wandelbots-js-react-components react react-dom @mui/material @emotion/react @emotion/styled\n```\n\nSome modules require extra dependencies, like three.js. If you don't need 3D rendering in your application, always import from `/core`.\n\n```typescript\nimport {\n  SafetyBar,\n  JoggingPanel,\n  DataGrid,\n  Timer,\n} from \"@wandelbots/wandelbots-js-react-components/core\"\n```\n\nFor 3D-enabled components, use `/3d`:\n\n```typescript\nimport { Robot, RobotCard } from \"@wandelbots/wandelbots-js-react-components/3d\"\n```\n\nFor SVG icon components (general UI icons and safety bar icons), use `/wb-icons`:\n\n```typescript\nimport {\n  RobotIcon,\n  HomeIcon,\n  ControllerTypeVirtualIcon,\n  SafetyStateNormalIcon,\n} from \"@wandelbots/wandelbots-js-react-components/wb-icons\"\n```\n\nYou can also import from the top-level package, but then you'll need to provide all optional dependencies:\n\n```bash\npnpm add @wandelbots/wandelbots-js-react-components \\\n react react-dom \\\n @mui/material @mui/icons-material @emotion/react @emotion/styled \\\n three @react-three/fiber @react-three/drei three-stdlib \\\n @monaco-editor/react shiki @shikijs/monaco\n```\n\n**Available Entry Points:**\n\n- **`.`** (Main) — All components. Requires: React 18+, MUI v6/v7, @emotion/react, @emotion/styled, @mui/icons-material + all below.\n- **`/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.\n- **`/wb-icons`** — SVG icon components (general UI icons, safety bar icons, jogging icons, axis icons). Requires: React 18+.\n- **`/3d`** — 3D visualization (Robot, RobotCard, CollisionSceneRenderer, SafetyZonesRenderer, TrajectoryRenderer). Requires: all from `/core` + three, @react-three/fiber, @react-three/drei, three-stdlib.\n\n## 4.x to 5.x Migration Guide\n\nSee section in [Migration Guide](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/migration-guide--docs#breaking-changes-from-4x-api-v1--v2-both-supported-to-5x-api-v2-only) for assistance.\n\n## 4.x Core Changes\n\nRobot data is now fetched from a running nova instance. This eliminates the need of shipping every react application with the robot data attached.\n\nIt 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)\n\nThe `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](#robot-model-testing) section below.\n\nThe 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.\n\nRobot dh-parameters are now using a new format.\n\n```\ninterface DHParameter {\n  'alpha': number;\n  'theta': number;\n  'a': number;\n  'd': number;\n  'reverse_rotation_direction': boolean;\n}\n```\n\n## 2.x to 3.x Migration Guide\n\nSee section in [Migration Guide](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/migration-guide--docs) for assistance.\n\n## Components\n\n### Robot Control \u0026 Jogging\n\nManual robot control interfaces.\n\n**[JoggingPanel](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/jogging-joggingpanel--docs)** - Complete jogging interface with cartesian and joint controls\n\n- Dual-mode operation (Cartesian \u0026 Joint space)\n- Real-time velocity control\n- Multiple coordinate systems support (Robot base or Tool)\n\n**Individual Jogging Controls**\n\n- **[JoggingCartesianAxisControl](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/jogging-joggingcartesianaxiscontrol--docs)** - Single-axis cartesian movement\n- **[JoggingJointValueControl](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/jogging-JoggingJointValueControl--docs)** - Individual joint controls\n- **[VelocitySlider](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/jogging-velocityslider--docs)** - Speed adjustment interface\n\n### Program Execution\n\nProgram control and monitoring components.\n\n**[ProgramControl](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-programcontrol--docs)** - Program lifecycle management\n\n- Play, pause, stop functionality\n- State machine integration\n- Manual reset capabilities\n\n**[ProgramStateIndicator](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-programstateindicator--docs)** - Visual program status\n\n- Live execution state monitoring\n- Error state visualization\n\n### 3D Visualization \u0026 Robotics\n\n3D components for robot visualization.\n\n**[Robot](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/3d-view-robot--docs)** - Real-time 3D robot rendering\n\n- Live pose updates from motion groups\n- Extensive robot model support from major manufacturers\n- [Supported Models](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/story/3d-view-robot-supported-models--abb-1010-037-15) - ABB, FANUC, KUKA, Universal Robots, Yaskawa (100+ models)\n- Automatic model loading from CDN\n\n**[SafetyZonesRenderer](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/3d-view-safetyzonesrenderer--docs)** - 3D safety visualization\n\n- Real-time safety zone rendering\n- Visual collision boundaries\n\n**[TrajectoryRenderer](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/3d-view-trajectoryrenderer--docs)** - Motion path visualization\n\n- Real-time trajectory display\n- Path planning visualization\n\n### Safety \u0026 Monitoring\n\nSafety components for production environments.\n\n**[SafetyBar](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/safety-safetybar--docs)** - Centralized safety status\n\n- Real-time safety monitoring\n- Emergency stop integration\n\n### Data \u0026 Interface Components\n\nUI components for data display and user interaction.\n\n**Data Components**\n\n- **[DataGrid](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-datagrid--docs)** - Data tables with robotics data formatting\n- **[LogPanel](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-logpanel--docs)** - Real-time log display and filtering\n- **[CycleTimer](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-cycletimer--docs)** - Production cycle timing and metrics\n\n**Robot Management**\n\n- **[RobotCard](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-robotcard--docs)** - Robot overview cards with status\n- **[RobotListItem](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-robotlistitem--docs)** - List view for multiple robots\n- **[RobotSetupReadinessIndicator](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-robotsetupreadinessindicator--docs)** - Setup validation status\n\n**Navigation**\n\n- **[AppHeader](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/navigation-appheader--docs)** - Application header with branding\n- **[TabBar](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/navigation-tabbar--docs)** - Multi-section navigation\n\n### Theming \u0026 Styling\n\nStyling system for consistent robotics applications.\n\n**[Theming components](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/theming-theming-components--docs)** - Interactive theming examples\n\n- Component theming demonstrations\n- Customization patterns\n\n**[Wandelbots MUI Theme](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/theming-wandelbots-mui-theme--docs)** - Material-UI theme\n\n- Dark/light mode support\n- Robotics-specific color schemes\n- Material Design integration\n\n## Architecture \u0026 Integration\n\n### Nova Platform Integration\n\nComponents integrate with the Wandelbots Nova ecosystem:\n\n- **NovaClient Integration** - Components accept either `NovaClient` instances or URL strings\n- **Real-time Updates** - WebSocket connections for live robot state updates\n- **Motion Group Management** - Direct integration with `ConnectedMotionGroup` objects\n- **State Synchronization** - Automatic state management with MobX reactivity\n\n### Technical Foundation\n\n- **TypeScript** - Full type safety and enhanced developer experience\n- **Material-UI v6/v7** - Professional design system and theming\n- **React Three Fiber** - High-performance 3D rendering for robotics visualization\n- **MobX** - Reactive state management for real-time updates\n- **i18next** - Internationalization support for global deployment\n\n## Installation \u0026 Setup\n\n### Prerequisites\n\n**Required for all entry points:**\n\n- React 18+ or 19+\n- Material-UI v6 or v7\n- @emotion/react and @emotion/styled\n\n### Additional Peer Dependencies\n\n**For `/3d` (3D visualization components):**\n\n- three\n- @react-three/fiber\n- @react-three/drei\n- three-stdlib\n\n## Development\n\nTo set up the project for development:\n\n```bash\ngit clone https://github.com/wandelbotsgmbh/wandelbots-js-react-components.git\ncd wandelbots-js-react-components\npnpm install\npnpm dev  # Start Storybook development server\n```\n\n## Robot Model Testing\n\nView Robot Models in web view:\n\n```bash\ngit clone https://github.com/wandelbotsgmbh/wandelbots-js-react-components.git\ncd wandelbots-js-react-components\npnpm install\npnpm td \u003cinstanceProviderURL\u003e # 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\npnpm dev  # Start Storybook development server\n```\n\ninstanceProviderConfig.json file:\n\n```\n{\n  \"url\": \"yourURL\"\n}\n```\n\n.env.local file:\n\n```\nWANDELAPI_BASE_URL=http://\u003cinstance-ip\u003e\nCELL_ID=cell\n```\n\n### Local Testing\n\nBuild and test the package locally:\n\n```bash\npnpm build\npnpm pack\npnpm add /path/to/wandelbots-wandelbots-js-react-components-x.x.x.tgz\n```\n\n\u003e **Note:** Use `pnpm add` with the `.tgz` file instead of `pnpm link` due to peer dependency requirements with React Three Fiber components.\n\n## Contributing\n\nWe welcome contributions! Please see our contributing guidelines and feel free to submit issues and pull requests.\n\n## License\n\nThis project is licensed under the terms specified in the LICENSE file.\n\n---\n\n[Explore the Storybook](https://wandelbotsgmbh.github.io/wandelbots-js-react-components) • [Visit Wandelbots.com](https://www.wandelbots.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwandelbotsgmbh%2Fwandelbots-js-react-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwandelbotsgmbh%2Fwandelbots-js-react-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwandelbotsgmbh%2Fwandelbots-js-react-components/lists"}