Build appsApp anatomy

App anatomy

An alexandr app is an ordinary npm package the runtime builds and serves into a workspace. There's no framework to learn — a manifest, an entry, and the SDK is the whole contract.

Preview note. The @alexandr/* packages aren't on npm yet. Build against a local runtime with npx alexandr up — the SDK resolves from the workspace.

The manifest

Every app declares itself with a static alexandr.app manifest — an id, a display name, and an icon. The id is what the runtime serves it under, at /apps/<id>/.

alexandr.app.ts
export default {
  id: "weather",
  name: "Weather",
  icon: "ti-cloud",
}

The entry

The entry mounts your React tree through defineApp. The runtime bundles it to a small IIFE, shimming @alexandr/sdk from the global SDK already loaded in the workspace.

index.tsx
// representative — verify against @alexandr/sdk
import { defineApp } from "@alexandr/sdk"
import { App } from "./App"
 
export default defineApp({ mount: App })

Talking to the kernel

From inside the app, the SDK is your bridge to the workspace:

  • sendToShell / onShellMessage — message the host shell both ways
  • isEmbedded — true when running inside a workspace
  • window.__alexandr.dispatch — the eager, always-available dispatch

Next steps

  • The SDK — the full app ↔ kernel surface.
  • Routes & data — add Hono routes and per-app storage.
  • Styling — match the workspace with the design tokens.