Studio

Eelgrass Studio is the engine's first client: a Vue UI that talks to eelgrass 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 eelgrass-cli -- studio ./mydb-studio examples/demo_schema.eel --ui clients/studio/dist

npm run dev starts eelgrass serve (default DB mydb-studio, schema examples/demo_schema.eel, token studio-dev) and Vite with an /api proxy (including WebSocket). Override with EELGRASS_DB, EELGRASS_SCHEMA, EELGRASS_TOKEN, EELGRASS_PORT, VITE_PORT.

The URL carries a bearer token. API calls send Authorization: Bearer …, X-Eelgrass-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 eelgrass-lang wasm as the engine)
• | expands to |> and opens the 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 → Eelgrass-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. Schema decls and tenant ops 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: eelgrass serve / eelgrass studio
• Examples: demo schema used by npm run dev