Frontend Development

Pano's frontend is split into several SvelteKit projects. While they are developed independently, they are ultimately packaged together within the core JAR.

PREREQUISITE: RUNNING BACKEND

Before you start frontend development, you must have a running Pano backend.

• Frontend Only Development: Download the latest Pano .jar from our Releases.
• Full-Stack Development: If you plan to modify the backend as well, please follow the Backend Development guide to run it from source.

Tech Stack

• Framework: SvelteKit
• Styling: Bootstrap 5 + SASS
• Runtime: Bun (Fast JavaScript runtime)
• Language: JavaScript (Vanilla JS is mandatory. We believe a better world is possible with plain JS!)

Language Philosophy (JavaScript vs. TypeScript)

In the Pano project, we have a firm stance on our choice of language:

• Always use JavaScript: We are committed to keeping things simple and lightweight.
• No TypeScript: We avoid TypeScript to maintain high compatibility and simplicity.
• Why?: We believe that with clean, well-written Vanilla JS, a better and more efficient world is possible. TypeScript is not accepted in our frontend projects.

Performance & SEO

Pano leverages the power of SvelteKit to provide a hybrid SSR (Server-Side Rendering) and CSR (Client-Side Rendering) experience.

• SEO Focused: We pay close attention to SEO optimization. By using SSR, we ensure that all content is easily indexable by search engines.
• Smooth UX: CSR is utilized for dynamic interactions, providing a fast and fluid user experience without full page reloads.

DEVELOPER RESPONSIBILITY

When developing frontend components, you must ensure they are SSR-compatible. Avoid direct window or document access outside of Svelte's onMount lifecycle. Always use semantic HTML to preserve our SEO standards.

• vanilla-theme: The built-in reference (system) theme that ships with Pano. It is not a starter template — new themes are scaffolded with bunx @panomc/theme-core new.

Cloning & Submodules

Our themes and panel-ui carry the theme-core engine as a theme-core git submodule (it publishes both @panomc/theme-core and @panomc/sdk). setup-ui and the website need no submodule — they consume @panomc/sdk straight from npm.

Recommended Cloning Method

For projects that carry the submodule (themes, panel-ui), use the --recursive flag so you get the engine too:

git clone https://github.com/PanoMC/panel-ui.git --recursive

If you already cloned normally

If you missed the --recursive flag, initialize and update the submodule manually:

git submodule update --init

Theme repositories are mostly generated: routes, bridges, and language files are produced by theme-core sync, so a theme author only edits theme.config.js, tokens.scss, src/views/, and lang-overrides/. See the Theme Development Guide to get started.

Development Guide

After cloning the repository and submodules, follow these steps:

1. Installation

Install the dependencies using Bun:

bun i

2. Running for Development

Start the development server:

bun dev

3. Ports & Access

Each interface runs on a specific port. Do not change these ports, and ensure they are available on your system.

Interface	Port	Condition
setup-ui	3002	Setup must not be completed.
vanilla-theme	3000	Setup must be completed.
panel-ui	3001	Setup must be completed.

IMPORTANT ACCESS NOTE

• No Direct Access: You cannot access these ports directly via your browser. They are served through Pano's proxy.
• Automatic Redirect: If you attempt to access UI ports manually, you may be automatically redirected to http://localhost:8088 (Pano's default backend port).
• Admin Login: To access panel-ui via the /panel route, you must log in as an Admin using the credentials you defined during the setup process.

Packaging Process

1. Each UI project is built and compressed into a .zip file.
2. During the Pano build process, these ZIPs are downloaded and embedded into the final JAR.
3. At runtime, Pano extracts these to the ui/ directory and serves them using Bun as a micro-service.

UI Addon System

You can create addons that inject features into the Panel or Themes.

• Backend-side: Defined as a JAR plugin.
• Frontend-side: Developed in Svelte and placed in the plugins/ folder.

Developing UI Addons

To test UI changes quickly:

1. Place your addon files in the plugins/ directory of your Pano installation.
2. Enable Dev Mode in Panel -> Settings.
3. Use bun dev to see changes instantly with Hot Module Replacement.

---

Questions about Svelte integration? Ask us on Discord!