Getting Started

A Pano theme controls how your website looks: its colors, fonts, and layout. The hard parts (login, plugins, loading data, building) are done for you by an engine called @panomc/theme-core. Your theme sits on top and changes the look.

This page takes you from nothing to a running theme with your own color. It is three steps, and you write no file by hand until the color.

You do not need to be an expert

Every step is copy and paste. A little HTML, CSS, JavaScript and Svelte helps, but none of it is required to start. Free guides: svelte.dev/tutorial and MDN Web Docs.

What you need

You need	What it is
Bun	Installs and runs Pano front-ends. Get it from bun.sh.
A running Pano	Your own server, or one on your computer. See Installation if it is not set up yet. Your theme talks to it while you work.
A code editor	Any editor, such as VS Code.

The quick-start

bunx @panomc/theme-core new              # asks four questions, then installs
cd my-theme && bun run dev:ui            # prints one panel field to set, once

Then, in the panel, open Settings → Platform, switch Developer Mode on and fill the Theme Dev Server field that appears under it with the address the command printed (http://localhost:3000). Save, and open your Pano address. Your theme is running.

That is all: three steps (scaffold, dev, one panel field). You edit no Pano config file and you do not restart Pano, so the panel stays available while you work.

If bun install seems stuck

If it hangs on "Resolving...", stop it (Ctrl + C) and run bun install --backend=copyfile inside the folder.

Giving the theme a name on the command line

bunx @panomc/theme-core new my-theme with a name asks nothing and does not install. Run bun install in the folder before bun run dev:ui. The first install also generates the routes, language files and bridges, so there is no separate sync step.

Browse through Pano, not through the theme's port

A theme always runs behind Pano. Open your Pano address (for example http://localhost:8088 when Pano runs with --dev). The theme's own port redirects you there.

What the panel field does

While the Theme Dev Server field is set, the front-end mode is THEME and Developer Mode is on: Pano does not start its own theme process and proxies the site to your dev server. The panel, setup and plugin UIs run as usual. Clear the field and Pano goes back to the installed theme.

Your first change

Open src/styles/tokens.scss. It is a commented menu of every token. Turn one on:

$primary: #10b981;

Save. The page updates by itself. A theme that looks different from vanilla is four steps: the three above plus this edit.

bun run dev:ui also recompiles your styles on every save. Plain bun run dev starts only the server, so style edits would not show.

Where to next

• Theme Structure: which files are yours and which are generated.
• Customization: tokens, --pano-* variables and your own CSS.
• Views: change markup, redraw a plugin's view, place blocks, rename routes, pick a home page.
• Localization: translate your theme.
• Packaging and Publishing: ship it.

The same page, shorter, lives in the engine repository as QUICKSTART-THEME.md; the long reference is THEME-AUTHOR-GUIDE.md.