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 [email protected] myExtensionName

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


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 });


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 data within your panel and rendering UI updates.


See the PanelExtensionContext docs for available properties and methods.