Overview

Introduction

Open Web Desktop in one page — client, core, themes, apps.

What Open Web Desktop is

OWD is a desktop UI in the browser: windows you can move and resize, a shell (menu bar, dock, workspaces — depending on theme), and programs started from a launcher.

You work on three package types:

TypeExampleWhat it does
Clientdesktop/ in owdproject/clientThe Nuxt app you run and deploy
Theme@owdproject/theme-nova, @owdproject/theme-paperShell look + Desktop.vue + window chrome
App@owdproject/app-about, @owdproject/app-todoPrograms via defineDesktopApp

Modules add capabilities (@owdproject/module-fs, @owdproject/module-persistence). Kits (like @owdproject/kit-primevue) share component stacks and helper utilities between themes — see Kits.

The desktop client

A client is a normal Nuxt 4 project:

my-desktop/
├── nuxt.config.ts       # modules: ['@owdproject/core']
├── desktop.config.ts    # theme, apps, modules, shell keys
└── app/app.vue          # <Desktop />

Core reads desktop.config.ts from the Nuxt root, installs theme → modules → apps, and registers core components (DesktopCore, DesktopWindow, …). The theme’s global Desktop component is what app.vue renders.

Bootstrap order and APIs: Boot sequence, Kernel contract.

Monorepo vs your own repo

WorkflowWhen
owdproject/clientDev core, kits, reference desktop/, clone apps/themes under apps/ and themes/
npm create owdNew desktop project for end users)
Separate app/theme repoPublish to npm; consumers use desktop add

The Command Center: desktop CLI

The pnpm desktop command is the operational heart of the project. It is the tool that allows you to manage the entire desktop environment directly from the terminal, without having to manually edit dozens of configuration files.

From the project root you can run:

pnpm desktop              # Opens the interactive control panel (TUI)
pnpm desktop dev          # Starts the desktop development server
pnpm desktop add app-todo # Installs a new app and auto-updates the config
pnpm desktop validate     # Verifies that your modules are correctly configured

Think of pnpm desktop as your "mission control" for installing apps, switching themes, and managing the project lifecycle.

Full reference: desktop CLI.

GoalPage
Run the reference desktopInstallation
Repo layoutProject structure
Write an appApps overviewCreate from scratch
Write a themeThemes overviewCreate from scratch
Config filedesktop.config.ts
DependenciesPackage linking