Skip to main content

Create custom panel

Build a simple panel extension that subscribes to a topic, and then register it so that you can add it to a Foxglove layout.

Setting up​

In a Terminal window, cd into the directory where your source code will live and run the following command:

npm init foxglove-extension@latest myExtensionName

This uses create-foxglove-extension to create a myExtensionName directory containing source code for an example custom panel.

index.ts​

index.ts is the entry point for your extension source code.

It must export an activate function that:

  • Accepts an extensionContext argument - For more info on the ExtensionContext type, see @foxglove/extension

  • Registers your extension's panels - i.e. ExamplePanel, in this case

    export function activate(extensionContext: ExtensionContext) {
      extensionContext.registerPanel({ name: "example-panel", initPanel: initExamplePanel });
    }

ExamplePanel.tsx​

The panel file(s) referenced in index.ts define the behavior and UI of the custom panel(s) that your extension will install.

While ExamplePanel.tsx is written in React, panels are framework agnostic - i.e. they can be written using DOM primitives, React, or any other front-end framework. Check out custom-image-extension for an example panel written without React.

The initPanel function accepts a PanelExtensionContext argument, which contains properties and methods for accessing panel data and rendering UI updates. It also returns an optional cleanup function to run when the extension panelElement unmounts.

PanelExtensionContext​

See the PanelExtensionContext docs for available properties and methods.

Troubleshooting memory leaks​

Panels within Foxglove are often processing continuous streams of data at rates of 60 fps or more. Such processing can surface memory issues faster than you might experience in other "web apps".

Memory or reference issues can quickly consume the available memory and lead to an out-of-memory or OOM error. When this error occurs, you will see a tab crash page (in the web app) or a crash report page (in the desktop app). If you notice that the entire app crashes more often when using your extension, there's a chance that it could have a memory leak.

Here are some best practices to use in your extensions to help prevent memory leaks:

  • Minimize references to past message data, or aggregation of message data over time.
  • When aggregating message data over time, always have a maximum limit on the amount of data you're storing.
  • De-reference large objects or arrays that are no longer needed to ensure they are garbage collected.
  • Avoid storing data in the global scope.

Please reach out to us on Discord or support with your extension code and we'll be happy to help you debug the issue.