Quickstart

1. Scaffold the project

   npm

   npx create-zenbu-app my-app
   

   pnpm

   pnpx create-zenbu-app my-app
   

   yarn

   yarn dlx create-zenbu-app my-app
   

   bun

   bunx create-zenbu-app my-app
   

   This creates a new directory with everything you need to get started.

2. Install dependencies

   pnpm

   cd my-app && pnpm install
   

   npm

   cd my-app && npm install
   

   yarn

   cd my-app && yarn
   

   bun

   cd my-app && bun install
   
3. Start the app

   pnpm

   pnpm run dev
   

   npm

   npm run dev
   

   yarn

   yarn dev
   

   bun

   bun run dev
   

   Your app will open in a new window, and any changes you make will hot-reload.

Project structure

After scaffolding, your project looks like this:

my-app/
├── zenbu.config.ts       # The only required config file
├── package.json
├── vite.config.ts
├── tsconfig.json
└── src/
    ├── main/
    │   ├── schema.ts     # Zod schema for the database
    │   └── services/
    │       └── app.ts    # Opens the main window on boot
    └── renderer/
        ├── index.html
        ├── main.tsx
        └── App.tsx

The zenbu.config.ts file is the entry point. It tells Zenbu.js where everything in your project is.

zenbu.config.ts

import { defineConfig, definePlugin } from "@zenbujs/core/config"

export default defineConfig({
  db: "./.zenbu/db",
  uiEntrypoint: "./src/renderer",
  plugins: [
    definePlugin({
      name: "app",
      services: ["./src/main/services/*.ts"],
      schema: "./src/main/schema.ts",
    }),
  ],
})

Available scripts

Script	What it does
pnpm run dev	Run the app locally with hot reloading.
pnpm run link	Regenerate types after changing your project structure.
pnpm run db:generate	Create a migration after changing your database schema.
pnpm run build:source	Stage the source tree for publishing.
pnpm run build:electron	Produce a signed .app / installer.

Next steps

Concepts

Learn the plugin model, state, and RPC.