Building a Desktop Plugin

Now that we have the native side covered, let's display the data we're sending on the desktop side.

Scaffolding a new Desktop plugin

A new Flipper Desktop plugin can be scaffolded by running npx flipper-pkg init in the directory where you want to store the plugin sources (Don't run this command inside the Flipper repository itself!). Before running this command, make sure Flipper is closed.

For example:

mkdir ~/FlipperPlugins
cd ~/FlipperPlugins
npx flipper-pkg init

Add the directory to the Flipper watch folder if asked. In this tutorial we will be creating a client plugin. device plugins are only used when creating plugins that don't connect to a specific application and are pretty rare.

The tool will ask you to provide "id" and "title" for your plugin. Use "sea-mammals" as "id" and "Sea Mammals" as "title". After that the tool will create two files in the directory: package.json and src/index.tsx.

After the process has finished, use yarn watch in the generated directory to start compiling the plugin on the fly.

Now that our package has been set up, we are ready to build a UI for our plugin. Either by using a standardized table-based plugin, or by creating a custom UI.

For more background on the generated files and overal plugin structure, see the Plugin Structure page.