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
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 theExtensionContext
type, see@foxglove/studio
-
Registers your extension's panels - i.e.
ExamplePanel
, in this caseexport 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 data within your panel and rendering UI updates.
PanelExtensionContext
See the PanelExtensionContext
docs for available properties and methods.