The dev loop

flare-plugin dev runs your plugin inside Flare while you work on it. Components hot reload, the logic reloads when its code changes, and logs and errors print in your terminal.

The flare-plugin CLI comes from @flare/plugin-cli. New plugins already depend on it and have a script for each command:

npm run dev        # flare-plugin dev
npm run build      # flare-plugin build
npm run validate   # flare-plugin validate
npm run pack       # flare-plugin pack

Start the dev server

npm run dev

This starts a Vite dev server on port 5199:

  flare-plugin dev

  ● Serving flare.orders (Orders 1.0.0) on http://localhost:5199
    Turn on Developer mode in Flare, Settings, Plugins, Developer, and it shows up there.
    Components reload in place as you save. Logs and errors from the plugin appear here.

In Flare, open Settings, Plugins, Developer and turn on Developer mode. Every two seconds, Flare checks port 5199 and any ports you've added there. When it finds your server, it loads the plugin, marked Development. The dev plugin replaces any installed plugin with the same id for as long as the server is running. The terminal confirms it:

  ● 14:02:11 Flare loaded the plugin.

What reloads

Save a widget, a command's view or a result view, and Vue hot reload swaps it in place. It keeps its state.

Change src/index.ts, or a file it imports that no component imports, and the plugin's logic frame reloads. setup runs again with the new code, and every view remounts. The terminal prints The plugin's logic reloaded.

Save package.json and the dev server checks the manifest again. It prints any problems, and Flare picks up the change the next time it checks:

  ● 14:02:41 package.json: the manifest is valid, with 1 widget and 1 command. Flare picks it up in a moment.

Catch missing contributions

When Flare loads the plugin, the logic frame reports what definePlugin implements. The terminal lists anything that doesn't match the manifest:

  ● Declared in package.json but not in definePlugin, so Flare cannot run them:
    commands.lookup
  ● In definePlugin but not declared in package.json, so Flare never shows them:
    widgets.revenue

Flare only shows contributions the manifest declares, and only calls ones the code implements. Either kind of mismatch fails silently in the app, so watch for these lines.

Use another port

Each dev server needs its own port. To run a second plugin at the same time:

flare-plugin dev --port 5200

Add the port in Settings, Plugins, Developer. --host sets the address the server listens on. The default is localhost.

The dev server answers Flare at /__flare/plugin.json, which is your package.json, reread on every request. It serves the frame page at /__flare/frame.html. Opening that page in a browser shows a note instead of your plugin, because a plugin needs Flare for its data and theme.

Build

npm run build

flare-plugin build checks the manifest, then bundles the plugin with Vite into two files:

• dist/plugin.js, an ES module whose default export is your definePlugin, with every component compiled.
• dist/plugin.css, your component styles and the Tailwind classes they use, compiled with Flare's theme so text-flare-muted and bg-flare-panel match the app.

  flare-plugin build

  ● flare.orders (Orders 1.0.0): the manifest is valid, with 1 widget and 1 command
  ● Built dist in 412ms plugin.js 6.1 kB, plugin.css 2.3 kB

Vue, @flare/plugin and @flare/plugin/vue aren't bundled. All plugins share one copy of each, served by Flare's runtime on the plugin's own origin. The build rewrites the imports to point there:

dist/plugin.js

import { definePlugin } from '/__flare/sdk.js';
import { computed, ref } from '/__flare/vue.js';
import { Stat, useAggregate } from '/__flare/sdk-vue.js';

Anything else you import, such as icons from lucide-vue-next or a date library, is bundled into plugin.js.

Only part of @flare/plugin is available in a frame

Inside a frame, @flare/plugin provides definePlugin, PluginError and the types. Manifest helpers such as readManifest aren't there. If you import one, the build stops and names it.

Validate

npm run validate

flare-plugin validate checks the manifest and prints where each problem is. It exits with 1 if there are any, so you can run it in CI. It also reads src/index.ts without running it, and warns about contributions declared but not implemented, implemented but not declared, and theme colours that are hard to read.

  flare-plugin validate

  ● package.json has 1 problem:
    flare.permissions.network.0: A host name such as api.stripe.com

The CLI can only read the ids from a definePlugin({ ... }) object written inline. If you build the definition some other way, it skips that check. Flare still checks when the plugin loads.

Next

• Debugging: where logs and errors go, in development and once installed.
• Publishing: the store, flare-plugin pack, and installing the result.