Guide: Create custom panel

This guide takes you through making a custom panel extension. You'll learn how to setup your extension project, build a basic panel to subscribe to a topic, and register the panel so it can be added to the 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/studio

• 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 the turtlesim 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.