Browser playground with OPFS SQLite

[brainkim]

Summary

Create an interactive browser-based playground for zen at zendb.org. Users can define tables, write queries, and see typed results - all client-side with OPFS persistence.

Components

1. OPFS SQLite Driver

New entrypoint @b9g/zen/browser or @b9g/zen/opfs:

• Evaluate SQLite WASM options (sql.js, wa-sqlite, official sqlite3 WASM)
• Implement Driver interface for browser SQLite
• OPFS persistence (survives page reload)
• Fallback to in-memory for browsers without OPFS

2. Playground UI

• Split pane: code editor + results
• Monaco editor with TypeScript support
• Real-time type inference display
• Query results as formatted table
• Error display with line highlighting

3. Code Execution

• Sandbox for running user code safely
• Import zen + zod in the sandbox context
• Display inferred types from table definitions
• Execute queries and show results

4. Examples & Presets

• "Hello World" - basic table + query
• Relationships - users/posts with JOINs
• Migrations - version upgrade demo
• Form validation - .db.formMeta() usage

5. Persistence & Sharing

• Save/load playground state to OPFS
• URL-based sharing (encode state in hash?)
• Reset to clean state button

Tech Considerations

• SQLite WASM: wa-sqlite with OPFS backend is probably best for persistence
• Editor: Monaco gives TypeScript intellisense for free
• Framework: Keep it simple - vanilla or Preact
• Hosting: Static site on zendb.org

Nice to Have

• Multiple dialect toggle (SQLite/Postgres/MySQL) - show DDL differences
• Export schema as TypeScript file
• Console output panel

🤖 Generated with Claude Code