Local-first Mac app shell

Build a Mac control panel in Svelte.

Mote is a menu-bar app for local tools. The native host handles windows, permissions, and macOS APIs. Your panel is ordinary Svelte you can edit live.

Read the docs → View source

Working prototype

Edit Svelte. The app updates without rebuilding Swift.

Run Mote, change workspace/src/App.svelte, and save. Vite updates the panel while the AppKit host keeps running.

Host AppKit · WKWebView Surface Svelte 5 · Vite Config Local custom layer Start scripts/run.sh

LOCAL BRIDGE

▱LOCAL SERVICERunningCORE

LOCALHOSTOPTIONAL ROUTE

↻ RestartStop›

⌁REMOTE ACTIVITYConnected8 capabilities · 1 recent session · 1 unread

Review requestedA remote task needs your attention.

Generic panel mock rendered as HTML on the homepage.

Example panel

Common Mac workflows, one panel.

Use one Svelte panel for service control, auth recovery, remote tasks, command shortcuts, logs, files, and cleanup. This example uses placeholder data.

Blueprint: placeholder data only; no private endpoints or local resource names.

moteCUSTOM PANEL

LOCAL SERVICERunningrestart · stop · logs

AUTHRecoverablerefresh · recover

REMOTE TASK1 waitingack · steer

COMMANDS6 shortcutstyped bridge calls

FILESWorkspaceopen · edit · save

SYSTEM128G freereport · cleanup

Generic surface: placeholder labels, no private endpoints or local resource names.

Native host

Swift owns the shell.

The app owns the status item, panel, WebKit view, permissions, logs, and bounded system access. It should stay small and stable.

Boundary detail: native capability calls stay behind named bridge methods.

Editable workspace

Svelte owns the surface.

A Mote panel is an ordinary local Svelte project. Save a file; the panel reloads. The product behavior lives in source you can inspect.

workspace/src/App.svelte
workspace/src/style.css
workspace/src/lib/native.ts

Edit loop

Change the panel like any other frontend.

Keep layout, state, and product workflows in Svelte. Keep privileged system access behind explicit native capabilities.

Edit Svelte

Change the panel by hand, or ask an agent to propose a source patch.

Compile locally

Preview in the same WebKit shell and keep a last-known-good build.

Call named APIs

Use typed bridge methods instead of giving the webview shell access.

Roll back

If a change breaks the panel, return to the last working workspace state.

Connected services

Add Cloudflare when a panel needs the network.

Mote runs locally after dependencies are installed. If a panel needs login, remote access, routing, or model calls, those pieces can be wired in without changing the local edit loop.

Optional connected services. The local app does not depend on them to run.