APIs & SDKs

UI SDK

The UI SDK offers a bevy of React components based on the Material UI, or MUI, library.

For any custom view, we recommend using the UI SDK to make it appear to be a seamless part of the Formant web application.

Installation

The Formant UI SDK is published as a Node package. The easiest way to install it is with the Yarn package manager:

yarn add @formant/ui-sdk

See this example for a typical installation.

Additionally, Formant publishes the following specialized packages:

  • @formant/ui-sdk-joystick for getting a simple joystick with keyboard controls
  • @formant/ui-sdk-login for using a native-looking login window
  • @formant/ui-sdk-realtime-player for displaying low-latency video

Example Library

Below is the library of UI SDK components to use in your custom views or modules. See the UI-SDK code powering this page here.

For example, to create a select box, your code might look like this (adapted from the link above):

import { createRoot } from "react-dom/client";
import { Typography, Select } from "@formant/ui-sdk";

function App() {
  return (
		<Typography variant="h2" sx={{ textDecoration: "underline" }}>
  		Select
    </Typography>
    <Select
      label="Age"
      items={[
           { label: "0-10", value: "0-10" },
           { label: "11-20", value: "11-20" },
           { label: "21-30", value: "21-30" },
           ]}
      />
    );
}
    
const container = document.getElementById("app");
if (container) {
  const root = createRoot(container);
  root.render(
    <FormantProvider>
      <App />
    </FormantProvider>
  );
}

Read on for more details about creating custom views.

👋

If you notice an issue with this page or need help, please reach out to us! Use the 'Did this page help you?' buttons below, or get in contact with our Customer Success team via the Intercom messenger in the bottom-right corner of this page, or at [email protected].