---
id: js-setup
title: Building a Desktop Plugin - Setup
sidebar_label: Setup
---
import useBaseUrl from '@docusaurus/useBaseUrl';

Now that the native side is covered (see the previous pages in this tutorial), it's time to display the data you're sending on the desktop side.

The following desktop screenshot shows the 'Sea-mammals' plugin, of this tutorial, in action.

<img alt="Custom cards UI for the sea mammals plugin" src={useBaseUrl("img/js-custom.png")} />

<FbInternalOnly>

After scaffolding and starting Flipper from source, no further steps are needed to setup the desktop plugin.

</FbInternalOnly>

<OssOnly>

## 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.

:::warning
Don't run this command inside the Flipper repository!. Before running this command, make sure Flipper is closed.
:::

The following snippet shows an example:

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

Add the directory (shown in the snippet) to the Flipper watch folder if asked.

In this tutorial, you'll be creating a `client` plugin. `device` plugins are only used when creating plugins that _don't_ connect to a specific application.

Take the following steps for npx:

1. The npx tool asks you to provide the 'id' and 'title' for your plugin. For the sake of this tutorial, use 'sea-mammals' as 'id' and 'Sea Mammals' as the 'title'.
2. The npx tool creates two files in the directory: `package.json` and `src/index.tsx`.
3. After the process has finished, use `yarn watch` in the generated directory to start compiling the plugin on the fly.

Now that the package has been set up, you are ready to build a UI for your plugin. This can be achieved either by using a standardized [table-based plugin](js-table.mdx), or by creating a [custom UI](js-custom.mdx).

</OssOnly>

For more background on the generated files and overall plugin structure, see the [Plugin Structure](../extending/desktop-plugin-structure.mdx) page.