@limbar/ui

This package contains all the UI components that you can use to serve Android emulators and iOS simulators from Limbar to your users over WebRTC, such as RemoteControl which is a React component written in TypeScript.

Get Started

For full example with both backend and frontend, see examples/simple

Add the dependency to your frontend package.

npm install @limbar/ui

Styling

The components come with their own CSS styles and do not require Tailwind CSS or any other CSS framework. The styles are self-contained and included automatically when you import the components.

You can customize the appearance by:

• Using CSS custom properties (CSS variables) for theming
• Adding custom CSS classes via the className prop
• Overriding the default styles with your own CSS

/* Example: Customize spinner color */
:root {
  --rc-spinner-color: #your-brand-color;
  --rc-muted-foreground: #your-text-color;
}

It's recommended that you trigger creation over a backend endpoint of yours that will call Limbar with an organization token. Making the call from browser to Limbar directly risks leaking your organization token.

Here is an example:

import { RemoteControl } from '@limbar/ui';

function MyRemoteControl() {
  return (
    <RemoteControl 
      url="https://your-webrtc-url" 
      token="your-auth-token"
    />
  );
}

To get the WebRTC URL and token, you can add an endpoint to your backend that calls Limbar using our type-safe client package @limbar/api or you can make the HTTP calls directly according to our API Reference.

Components

RemoteControl

The RemoteControl component allows you to stream the screen of an Android emulator to your application as well as control it with your mouse and keyboard.

Some of the features include:

• Multiple users can connect to the same instance simultaneously which is super useful for demos and presentations.
  • You can build and deploy your app in a cloud editor that has lim connect android running and see your app in the browser.
• The component is optimized for low latency and high performance by using WebRTC as the transport layer for both video and the control signals.

Props

| Prop | Type | Description | |------|------|-------------| | url | string | The URL of the instance to connect to | | token | string | Token used to authenticate the connection to the instance | | className | string? | Optional class name to apply to the component on top of the default styles | | sessionId | string? | Optional unique identifier for the WebRTC session to prevent conflicts between users connected to the same source. If not provided, a random one will be generated | | openUrl | string? | Optional URL to open in the instance when the component is ready, such as an Expo URL |