Live Demos
Real apps running right now, in your browser, on WebDB with IndexedDB storage. Every list, board and calendar below is driven by live queries: nobody calls refresh(), the UI just re-renders whenever the data it queries changes.
✅ Todo list
The classic. Filters, search, inline editing and live counters from a GROUP BY query.
🗂️ Kanban board
A Trello-style board with drag & drop. Each drop is one atomic transaction.
📅 Calendar & appointments
A month view that only loads the visible range, plus "upcoming" and per-month counters.
🔎 Typo-Tolerant Search with UDFs
Ranking, typo tolerance, accent-insensitive matching and highlights, written as plain JavaScript functions.
Try this
- Open any demo, change something, then reload the page: your data is still there (IndexedDB).
- Open the same demo in two tabs side by side and edit in one: the other updates instantly, because live queries listen to changes across tabs.
- Click Reset data at the top of a demo to restore the sample data.
What they demonstrate
| Capability | Where |
|---|---|
useLiveQuery() from @ahmadmoussawi/webdb/vue | all demos |
| Reactive inputs (filter, search, month) re-running a query | Todo, Calendar |
| Several independent live queries on the same tables | all demos |
GROUP BY / COUNT aggregates kept up to date | Todo, Kanban, Calendar |
Atomic multi-row writes with db.transaction() | Kanban, resets |
Indexed range queries (start_at >= … AND < …) | Calendar |
JavaScript UDFs in SELECT, WHERE and ORDER BY | Search |
Cross-tab sync over BroadcastChannel | all demos |
The demos are plain Vue 3 components with no state library: the database is the state. Each page links to the full source on GitHub.
No API, no server: your data lives in your browser
Every demo stores its data in your browser's IndexedDB (webdb_demo_todo, webdb_demo_kanban, webdb_demo_calendar, webdb_demo_search). There is no backend and nothing is ever sent anywhere. Change something, refresh the page, and it is still there.