kirbyup

Appearance

Getting Started ​

Get up and running with kirbyup in minutes.

Prerequisites ​

  • Node.js 24+: paired with a package manager (pnpm, npm, or yarn).
  • Kirby 6 or newer: kirbyup 4.x targets the Vue 3-based Panel runtime introduced in Kirby 6. For Kirby 4 or 5 plugins, use kirbyup 3.x.

TIP

If you want to skip starting from scratch, pick one of the following starters:

The last two examples are based on the default pluginkit and include ESLint – it catches bugs early and helps you avoid common JavaScript and Vue pitfalls. The UnoCSS example also includes UnoCSS (with presetWind3 for Tailwind v3-compatible utilities) to style your Panel plugin.

Installation ​

Use a package manager of your choice to install kirbyup as a development dependency:

bash
pnpm add -D kirbyup
bash
yarn add -D kirbyup
bash
npm install -D kirbyup

After installation, add these scripts to your package.json:

json
{
  "scripts": {
    "dev": "kirbyup serve src/index.js",
    "build": "kirbyup src/index.js"
  },
  "devDependencies": {
    "kirbyup": "^4.0.0-alpha.6"
  }
}

Without the Installation Step ​

If you want to use kirbyup right away and don't want to track it as a dependency in your project, simply call it with npx:

json
{
  "scripts": {
    "dev": "npx -y kirbyup serve src/index.js",
    "build": "npx -y kirbyup src/index.js"
  }
}

INFO

npx may cache a certain version of kirbyup. If npx doesn't use the latest kirbyup version, run npx -y kirbyup@latest instead or delete the ~/.npm/_npx cache folder. Because of the caching, it's recommended to install kirbyup as a development dependency.

Usage ​

kirbyup provides a CLI to build and serve your Panel plugin. It uses Vite under the hood, so you can use all of Vite's features.

Development ​

Start a development server for the Panel plugin:

bash
npm run dev
# Which will run:
# kirbyup serve src/index.js

Your terminal shows the server port:

kirbyup v3.4.1
ℹ Starting development server...
✔ Server is listening on :5177

This creates ./index.dev.js, which tells Kirby to load your plugin from the dev server. You get hot module replacement and auto-reload out of the box.

Using watch mode instead?

If you prefer building a development bundle (without HMR), use watch mode:

bash
npx kirbyup src/index.js --watch

Production ​

To compile the final Panel plugin for production, run:

bash
npm run build
# Which will run:
# kirbyup src/index.js

Your terminal shows the bundled assets:

kirbyup v3.4.1
◐ Building src/index.js
./index.js   22.27 kB / gzip: 8.79 KiB
./index.css  0.30 kB / gzip: 0.17 KiB
✔ Build successful