Studio

Eelden Studio is the engine's first client: a Vue UI that talks to eelden serve over HTTP (and WebSocket for CDC). It never opens page/WAL files itself.

Do not confuse with the Playground: Studio is serve-backed (App.vue); the playground is in-tab wasm (LocalPlayground.vue) with a different phone tab shell.

Start

Two ways to run it:

# HMR — seeds mydb-studio if needed, API on :8787, UI on :5173
cd clients/studio && npm install && npm run build:wasm && npm run dev
# open http://127.0.0.1:5173/?token=studio-dev

# Built UI served by the engine (opens the browser)
cd clients/studio && npm run build:wasm && npm run build
cargo run -p eelden-cli -- studio ./mydb-studio examples/demo_schema.eel --ui clients/studio/dist

npm run dev starts eelden serve (default DB mydb-studio, schema examples/demo_schema.eel, token studio-dev) and Vite with an /api proxy (including WebSocket). Override with EELDEN_DB, EELDEN_SCHEMA, EELDEN_TOKEN, EELDEN_PORT, VITE_PORT.

The URL carries a bearer token. API calls send Authorization: Bearer …, X-Eelden-Token, and/or ?token=.

What you get

• Collections sidebar + virtualized table grid (no mobile card presenter — cards are playground-only)
• CodeMirror editor with language intel (same eelden-lang wasm as the engine)
• | power key → |> + stage menu; hover at pipe boundaries for row shape; Shape button + long-press on touch; as-you-type diagnostics
• Write-mode gate for mutations, plus action log and atomic conflict banners
• Plan strip — index vs collection scan from /query
• Tenant switcher via hash route /#/t/:tenant (create / fork are write-mode gated)
• Time-travel pin → Eelden-Snapshot on every API call
• Schema & migration panel (fingerprints, pending_migration)
• Live CDC — WebSocket …/tail with HTTP poll fallback (transport badge shows ws / poll)
• Health panel — corruption reports, WAL/checkpoint lag, fsync histogram (GET /api/v1/health/detail)
• Visual / Code segmented control — stage cards for filter / join / sort / take / skip / asof / group / distinct / insert / update / delete (&& and atomic stay in Code; mutate / unparseable examples force Code)
• Mobile shell — drawer for collections/examples; header ⋮ sheet (Write, Live CDC, Schema, Diff, Health, Create/Fork tenant, Theme); Log bottom sheet; touch-sized controls
• Examples rail for the serve-backed Users demo (examples.ts) — join / asof storefront demos live on the Playground

Rules

1. Read-oriented by default — toggle Write mode before inserts / updates / deletes / tenant ops / snapshot create.
2. /query accepts one pipeline or one atomic block — not schema decls or tenant ops (those go through /ops or schema files at serve start).
3. When a snapshot is pinned, write mode and live CDC are off (you're looking at the past).

Related

• Playground — wasm engine in-tab, no serve
• HTTP API — routes Studio uses
• CLI — eelden serve / eelden studio
• Examples — demo schema used by npm run dev