Example devUI Plugin — Countdown Timer

A simple countdown timer panel to demonstrate the devUI plugin system.

Structure

example-devui-plugin/
  devui-plugin.json       # manifest (kind, label, entry point)
  build.mjs               # esbuild script that shims React from host
  package.json            # deps + build script
  tsconfig.json
  src/
    index.tsx             # TypeScript source
  dist/
    index.js              # built ESM bundle (generated by npm run build)

How it works

• src/index.tsx — standard React component using typed PanelViewProps
• build.mjs — esbuild bundles the TSX and replaces react imports with window.__DEVUI_REACT__ (the host app exposes React there)
• devui-plugin.json — tells devUI the panel's kind, label, size, and entry file
• On install, if dist/index.js is missing, devUI runs npm install && npm run build automatically

Install into devUI

Push to GitHub, then in devUI: command palette → "Install App" → youruser/example-devui-plugin

Develop locally

npm install
npm run build

Or manually copy to ~/.devui/apps/local/countdown/ and add to ~/.devui/plugins.json.