QUESTPIE
Build Your Workspace

Admin Setup

Enable the admin module — server plugin, module, and client builder.

Setting up the admin panel requires three steps: add the plugin to config, add the module, and set up the client builder.

1. Install

bun add @questpie/admin

2. Server Plugin

Add adminPlugin() to your runtime config:

questpie.config.ts
import { adminPlugin } from "@questpie/admin/plugin";
import { runtimeConfig } from "questpie";

export default runtimeConfig({
	plugins: [adminPlugin()],
	app: { url: process.env.APP_URL || "http://localhost:3000" },
	db: { url: process.env.DATABASE_URL },
	secret: process.env.APP_SECRET,
});

The plugin tells codegen to discover admin-specific file conventions: config/admin.ts (sidebar, dashboard, branding, locale), blocks/.

3. Module

Add adminModule to your modules:

modules.ts
import { adminModule, auditModule } from "@questpie/admin/server";

export default [adminModule, auditModule] as const;
ModuleProvides
adminModuleUser collection, auth pages, admin UI
auditModuleAudit log collection, timeline widget

4. Admin Config

Create the admin config file:

config/admin.ts
import { adminConfig } from "@questpie/admin/server";

export default adminConfig({
	branding: {
		name: "My App Admin",
	},
	sidebar: {
		sections: [
			{ id: "overview", title: { en: "Overview" } },
			{ id: "content", title: { en: "Content" } },
		],
		items: [
			{
				sectionId: "overview",
				type: "link",
				label: { en: "Dashboard" },
				href: "/admin",
				icon: { type: "icon", props: { name: "ph:house" } },
			},
			{
				sectionId: "content",
				type: "collection",
				collection: "posts",
			},
		],
	},
});

5. Run Codegen

bunx questpie generate

6. Admin Client (Generated)

The admin client config is auto-generated by codegen. No manual builder setup is needed.

After running bunx questpie generate, a pre-built admin config is emitted at admin/.generated/client.ts. This replaces the old qa() builder pattern.

You can re-export it for convenience:

admin/admin.ts
export { default as admin } from "./.generated/client";

7. Mount the Admin

Add the admin routes to your app. The admin panel is typically served at /admin:

routes/admin/$.tsx
import { AdminRouter } from "@questpie/admin/client";
import { admin } from "@/questpie/admin/admin";

export default function AdminPage() {
  return <AdminRouter admin={admin} />;
}

On this page