Foxglove offers a suite of [Visualization Panels](https://docs.foxglove.dev/docs/visualization/panels/introduction), but many require data in a specific format.

**With our newly released** [**Message Converter Extensions**](https://docs.foxglove.dev/docs/visualization/extensions/introduction#message-converters) **, you can visualize custom messages in Foxglove’s built-in panels – even when these messages don’t adhere to the Panels’ supported schemas.**

## When to use Message Converters

Before Foxglove v1.33, visualizing your custom robotics data with non-standard message types required building entirely new custom panels. While building a panel from scratch tailored to your unique message schemas and visualization needs is infinitely flexible, this route requires a significant amount of work.

With the release of Message Converter Extensions, this process becomes much easier. Instead of building your own panel, you can visualize your team’s proprietary data by leveraging the powerful visualizations Foxglove offers in built-in panels.

Some example uses of Message Converters are visualizing a robot planning path within the [3D Panel](https://docs.foxglove.dev/docs/visualization/panels/3d), building 3D scenes from perception output, or plotting custom GPS messages in the [Map Panel](https://docs.foxglove.dev/docs/visualization/panels/map).

## Building a message converter extension

For the purpose of this tutorial, let’s assume that we have custom GPS messages that we want to plot in Foxglove’s [Map Panel](https://docs.foxglove.dev/docs/visualization/panels/map) ( [download example MCAP file here](https://drive.google.com/file/d/1SuFkJyAFPwwgVdWYow9cIl1-b4Puf884/view?usp=sharing)). However, we have one small problem – the panel only supports [`foxglove.LocationFix`](https://docs.foxglove.dev/docs/visualization/message-schemas/location-fix) messages, whereas our data uses our custom `sensors.MyGps` schema:

```
type MyGps = {
  lat: number;
  lon: number;
};
```

Instead of creating an entirely new panel to handle your custom messages, let’s write a Message Converter that transforms them into already-supported `foxglove.LocationFix` messages, so that they can be visualized in the existing Map Panel.

### Set up your extension directory

Use `create-foxglove-extension` to generate our extension directory:

```
$ npm init foxglove-extension@latest myGpsConverter
```

This will create a `myGpsConverter` directory with some template source code.

### Write the converter

The `index.ts` file in your project’s `src` folder is the entry point for your extension source code. It exports an `activate` function that accepts a single `extensionContext` argument of type `ExtensionContext`.

To register a Message Converter, we call `registerMessageConverter` on the `extensionContext` argument with three arguments: the source schema name (`sensors.MyGps`), the destination schema name (`foxglove.LocationFix`), and the `converter` function that will do the transformation:

```
export function activate(extensionContext: ExtensionContext) {
  extensionContext.registerMessageConverter({
    fromSchemaName: 'sensors.MyGps',
    toSchemaName: 'foxglove.LocationFix',
    converter: (inputMessage) => {
      // logic to turn sensors.MyGps messages into foxglove.LocationFix messages
    },
  });
}
```

Fill out the `converter` function to re-map our `sensors.MyGps` messages’ `lat` and `lon` fields to the `foxglove.LocationFix` schema’s `latitude` and `longitude` fields:

```typescript
converter: (inputMessage: MyGps) => {
    return {
      latitude: inputMessage.lat,
      longitude: inputMessage.lon,
    };
  },
```

### Test the extension

To build and install your extension for local testing in the Foxglove desktop app, run the following command in the extension directory:

```
$ yarn local-install
```

In the Foxglove desktop app, open your [app settings](https://docs.foxglove.dev/docs/organization-setup/account) to see `myGpsConverter` appear in the list of installed extensions.

Connect to your data source, and add a Map Panel to the [layout](https://docs.foxglove.dev/docs/visualization/layouts). You should now see your custom GPS messages visualized on the map!

## Release your extension

Once you are happy with how your extension works, you can package it and share it with your team using the [`foxglove` CLI tool](https://github.com/foxglove/foxglove-cli). This will deploy the extension to all users within your organization.

```
$ yarn package
$ foxglove extensions publish ./my-extension.1.0.0.foxe
```

Check out our documentation to learn more about [sharing with your team](https://docs.foxglove.dev/docs/visualization/extensions/publish#sharing-with-your-team).

## Share your feedback

Read [the extensions documentation](https://docs.foxglove.dev/docs/visualization/extensions/introduction) for more details on Foxglove’s extension API.

As we continue building out extension support, we’d love to hear your feedback. Join the conversation in our [Discord community](/content/chat/index.html) or [on Twitter](https://twitter.com/foxglove).