A complete reference application for the MindooDB App SDK, demonstrating every major SDK feature in a working Vue 3 app. Use it to learn how MindooDB apps work, or fork it as a starting point for your own app.

Live demo: https://app-example.mindoodb.com (register this URL in Haven to try it)

The example app covers the full surface of the MindooDB App SDK, organized into three tabs:

• Database discovery -- lists all databases Haven mapped into the app session, showing their titles and granted capabilities
• Capability-aware UI -- buttons and sections are shown or hidden based on the permissions Haven granted (read, create, update, delete, history, attachments)
• Document CRUD -- browse, create (with optional named decryption key), edit with a JSON code editor, and delete documents
• Full-text search with cursor-based incremental loading -- builds an in-memory FlexSearch index over user-selected document fields. The initial index is populated by paginating through the SDK's documents.list API with cursor-based iteration, and subsequent updates replay only the changes since the last cursor checkpoint. The document list filters results in real time as you type.
• Document history -- list all revisions of a document with author and timestamp, load any historical snapshot
• Attachments -- upload files via chunked streaming, download, remove, and preview attachments directly in Haven's built-in viewer
• Attachment previews -- leverages Haven's native preview for images, PDF, Word (.docx), PowerPoint (.pptx), Excel (.xls/.xlsx), video (with streaming player and seek), audio (with streaming player and seek), and text formats -- all working online and offline

• Haven-configured views -- lists the view definitions that a Haven administrator attached to the app registration
• Column metadata -- displays the dynamic column definitions, roles, and sorting for each view
• Categorized result grid -- materializes a paginated, categorized grid for the selected view
• Navigator cursor -- step through entries one at a time (first, last, next, prev, parent, first child) with a live "current entry" detail card
• Expand / Collapse -- full category expansion control (expand / collapse current entry, expand all, collapse all, toggle individual categories)
• Category awareness -- dynamically detects whether the selected view has categories and shows category-specific controls only when relevant

• Theme tracking -- displays the current Haven theme mode (light/dark) and preset name, with live updates
• Viewport tracking -- shows the current iframe dimensions, updated in real time as the user resizes the app chicklet in Haven
• Event log -- records every theme and viewport event since launch, including the initial snapshot

The fastest way to explore the MindooDB platform is to run this app locally and connect it to Haven:

git clone https://github.com/klehmann/mindoodb-app-example.git
cd mindoodb-app-example
npm install
npm run dev:local

This starts a Vite dev server on http://localhost:4200 with hot module reload. The dev:local script sets LOCAL_MINDOODB=1, which configures Vite to resolve mindoodb-app-sdk and mindoodb-view-language from sibling directories -- useful when you are working on the SDK itself.

Then, in Haven:

1. Go to Application settings and register a new application with the URL http://localhost:4200.
2. Choose a runtime: iframe (embedded in Haven) or window (separate browser tab).
3. Map one or more databases to the app and configure the desired capabilities (read, create, update, delete, history, attachments, views).
4. Optionally attach view mappings so the Views tab has something to display.
5. Launch the app from Haven. The SDK bridge connects automatically and the app shows live data.

To build your own app, fork or duplicate this project. You can develop live inside a running Haven client -- every code change reloads instantly via Vite HMR while the bridge session stays connected.

This app is deployed to Cloudflare Workers as a static site. The live demo at https://mindoodb-app-example.mindoo.de uses exactly this setup.

The configuration lives in wrangler.jsonc:

{
  "name": "mindoodb-app-example",
  "compatibility_date": "2026-04-09",
  "assets": {
    "directory": "./dist",
    "not_found_handling": "single-page-application"
  }
}

To deploy your own instance:

npm run deploy

This runs vue-tsc --noEmit && vite build followed by wrangler deploy, which uploads the dist/ folder as static assets with SPA fallback routing.

Any static hosting works (Netlify, Vercel, a plain web server), but Cloudflare Workers with static assets is a particularly simple option -- no server configuration, automatic HTTPS, and a generous free tier.

Alternatively, Haven can host app bundles directly via its service worker. Haven-hosted apps load without a network connection and run in a stricter sandbox with an opaque origin.

src/
  app/
    useMindooDBDemoApp.ts       Root orchestrator: session lifecycle, shared state, cross-tab wiring
    useDocumentsSection.ts      Documents tab: CRUD, history, attachments, full-text search
    useViewsSection.ts          Views tab: navigator traversal, expansion, batched entry reading
    useEventsSection.ts         Events tab: host theme/viewport tracking, event log
    useMindooDBDemoApp.test.ts  Integration tests using the SDK mock bridge
  assets/styles/                Global Mindoo theme styling (CSS custom properties)
  features/
    databases/                  Document CRUD, history, attachment UI, and full-text search
      lib/searchIndex.ts        FlexSearch-based index with cursor-based incremental sync
    events/                     Theme and viewport event display and logging
    views/                      Haven view rendering helpers and categorized grid UI
  lib/                          Theme bootstrap (PrimeVue theme integration)
  shared/components/            Reusable components (JSON code editor)

The app is organized by feature so each SDK integration area is easy to find and study independently.

The test suite is intentionally focused on the non-trivial integration points:

• src/app/useMindooDBDemoApp.test.ts -- verifies the shared app controller using the SDK's createMockMindooDBAppBridge helpers from mindoodb-app-sdk/testing
• src/features/databases/lib/searchIndex.test.ts -- verifies full-text index creation, incremental cursor-based sync, and search across mixed JSON field types
• src/features/views/lib/runtimeViews.test.ts -- verifies the adapter logic that transforms Haven-configured view definitions into runtime view shapes

Run the tests:

npm test

For guidance on testing your own MindooDB apps, see the SDK testing documentation.