Writing a plugin in TypeScript and JSX

The shell ships its own plugin tooling, so you never write a build script:

bun run plugin:new my-plugin     # scaffold plugins/my-plugin/, builds immediately
bun run plugin:build my-plugin   # bundle to public/plugins/my-plugin/
bun run plugin:watch my-plugin   # rebuild on each save

plugins/notes-tsx/ is the reference for a real plugin: ordinary .tsx sources, import { FileText } from "lucide-react", typed slices and settings. bun run plugin:build notes-tsx bundles it to public/plugins/notes-tsx/index.js, which you install from the Plugins panel like any other runtime plugin (in your own project the bundle can live anywhere reachable by URL or file).

Two rules matter:

The bundle must not include its own React. The shared builder rewrites every react and react/jsx-runtime import to the bridge in plugins/_runtime/ that forwards to the host React handed over in ctx.react — automatically, with nothing to configure.
Ids are namespaced by the kernel: ctx.registerView({ id: "editor" }) is reachable as "<plugin-id>:editor".

See plugins/notes-tsx/README.md for the full walkthrough and Building the app outside Lovable for the complete tooling reference.