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 simple-3d-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.