Announcing ros-tool: The easiest way to create web UIs for ROS

Our new, free ros-tool capability makes it trivial to interact with ROS from the web. It provides a React API for subscribing and publish to topics and for placing service calls. It works with both ROS 1 and 2, and unlike rosbridge, it caches all data in the cloud, which means your UIs will work even when your robot is offline (just showing the latest data). Since all data is synced via the cloud, it is also much easier and more efficient to aggregate data from multiple robots, e.g., for showing your fleet on a map.


Here is an example of how to use it on the web:

import { CapabilityContext, CapabilityContextProvider } from '@transitive-sdk/utils-web'

const MyROSComponent = () => {
  // import the API exposed by the ros-tool capability
  const { ready, subscribe, deviceData, publish, call } = useContext(CapabilityContext)

  useEffect(() => {
      if (ready) {
        // subscribe to a ROS 1 topic on the robot
        subscribe(1, '/amcl_pose');
    }, [ready, subscribe])

  // get the pose from the reactively updating device data
  const pose = deviceData?.ros[1].messages?.amcl_pose?.pose.pose;
  if (!pose) return <div>Connecting..</div>;

  // Show pose x and y on page as text:
  return <div>
      x: {pose.position.x},
      y: {pose.position.y}

const MyPage = () => <CapabilityContextProvider jwt={jwt}>
    <MyROSComponent />

Getting Started

The easiest way to get started with this is to use our hosted solution on where you can create a (free) account, add your robots, and install the ros-tool capability. Then you can use the playground UI to try it out without writing any code. The playground UI shows you the list of topics on the robot and let’s you subscribe to them. For publishing messages and placing service calls it fetches the message/service schema and uses it to pre-populate an editor with a template where you can just edit the values and send it off.

And yes, Transitive is open-source, so if you prefer to self-host the service, you can.

Demo and Details

Watch the demo here.


I see this as a much needed product. There’s things like roslib which seem to use websockets to communicate with ros but yours is out of the box over the internet

Is this solution similar to what you’ve done with WebRTC to stream video data meaning that only the latest ros2 messages are utilized or are they sent chronologically which may end up causing increased latency for large messages

What message types are currently supported and how is it possible to implement custom message types


Thanks, @Hassan_Shahzad .

No, unlike the webrtc capabilities, this one uses MQTTSync (over mqtt, over TCP) to reliably synchronize data between robot, cloud, and web. It does this efficiently by only sending diffs, so it’s a lot more efficient than rosbridge + roslib, but it will not do any form of congestion control like WebRTC. So if you want to send images, then webrtc is definitely the better choice.

All message and services types installed on the robot are supported, and yes, it supports custom message types. See this section of the documentation: ROS Tool | Custom Message Types.

It’s very useful to us. Thanks.

1 Like

What is “MQTTSync”?
A google search for that did not turn up any clear winner for the term.

You are absolutely right. We need to create a standalone page for it so that Google can index it better. Here is the current documentation: high-level description + SDK functions.