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.


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" }}>
           { 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);
      <App />

Read on for more details about creating custom views.