Getting started

Write and publish extensions to display custom panels in Foxglove Studio, using the @foxglove/studio SDK and @foxglove/fox extension tool.

While Studio offers a suite of general-purpose tools for robotics data visualization & debugging, many users have domain-specific needs that our out-of-the-box offering does not address.

To empower users to develop tools customized to their specific needs, Studio's extensions library provides an API for building & installing bespoke panels. This allows developers to create custom extensions in TypeScript using the @foxglove/studio SDK. These extensions can then be loaded and executed in the Studio app.

Currently, users can create extensions to add custom panels. In the future, users will also be able to create Studio extensions for different file formats and data sources.

Creating an extension for a custom panel

Before you start, make sure you have Node.js 14+ and yarn installed.

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

$ npx @foxglove/fox create myExtensionName

This uses fox, Studio's extension tool, to create a myExtensionName directory containing all the source code for an example panel extension, with all dependencies installed.

For a simple example of how to create and register a custom panel, open myExtensionName in the editor of your choice and pull up the files src/index.ts and src/ExamplePanel.tsx.

index.ts

The index.ts file acts as 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, check out @foxglove/studio

  • Registers your extension's panels – in this case, just ExamplePanel

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

The extensionContext contains your panel's root element, as well as various API methods for interfacing with the rest of Studio.

ExamplePanel.tsx

The panel file(s) referenced in index.ts will 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 Foxglove Studio's own turtlesim extension for an example of a panel written without React.

Your panel files must include:

  • Panel component definition – Accepts an argument with a context field (for more info on the PanelExtensionsContext type, check out @foxglove/studio)

    function ExamplePanel({ context }: { context: PanelExtensionContext }): JSX.Element { ... }
    
  • Exported initialization function – Initializes your defined panel component

    export function initExamplePanel(context: PanelExtensionContext) {
      ReactDOM.render(<ExamplePanel context={context} />, context.panelElement);
    }