---
title: "Dexie Cloud | Docs"
description: "Explore how to retrieve data from Dexie Cloud."
url: https://www.zinggrid.com/docs/data/dexie-cloud
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/data/dexie-cloud.md
mode: provenance
representation: markdown
origin_response_id: 631ea29c727feb7992a946643383d2bf
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.665Z
version_nonce: 1ae13cc194df456b71fc700eca0630b5
generated_at_utc: 2026-11-08T23:36:16.448Z
response_nonce: 9a68c47be2b8bf9deb6a4088a3913d93
```

# Retrieving Data from Dexie Cloud
In this guide, we'll walk you through how to retrieve data from Dexie Cloud and incorporate it in your grid with live synchronization.

## Configure Dexie Cloud

First, you'll want to create your database:
```
npx dexie-cloud create
```

Secondly, whitelist your app origins(s):
```
npx dexie-cloud whitelist http://localhost:YOUR_PORT_NUMBER
```

Last, upgrade dexie and install the dexie-cloud-addon
```
npm install dexie@latest
npm install dexie-cloud-addon
```

## Connecting to Dexie Cloud

If you want to populate your grid using data stored in Dexie Cloud, we'll configure the grid through `<zg-param>`.

First, set the adapter `<zg-param>` to "dexieCloud".

Then, use the dataTable `<zg-param>` to specify the data table to retrieve.

If you want your grids to synchronize across tabs, windows, browsers, computers, etc, you can also include the subscription `<zg-param>`.

```html
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dexie.js ZingGrid</title>
  <!-- ZingGrid -->
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <!-- Dexie -->
  <script src="https://unpkg.com/dexie@3.2.2/dist/dexie.min.js"></script>
  <!-- Main Script -->
  <script src="main.js" type="module"></script>
</head>
<body>
  <zing-grid title="Dexie Grid" editor-controls>
    <zg-data adapter="dexieCloud">
      <zg-param name="dataTable" value="employees"></zg-param>
      <zg-param name="subscription" value="true"></zg-param>
    </zg-data>
    <zg-colgroup>
      <zg-column index="first_name"></zg-column>
      <zg-column index="last_name"></zg-column>
      <zg-column index="title"></zg-column>
    </zg-colgroup>
  </zing-grid>
</body>
</html>
```

| Attribute | Description |
|-----------|-------------|
| adapter | Shortcut to set options for third party dataset. For graphQL, the following are set:`restmode`: Set to "manual" to turn off traditional REST URL construction and method setting (for custom REST configuration). `method`: Overwrite the request type for actions. GraphQL only accepts GET or POST requests.|
| dataTable | Specifies the data table to retrieve. |
| subscription | Set true to enable grid synchronization. |

## Setting up Dexie Cloud

First you'll need to import Dexie, its cloud add-on, and `liveQuery` (allows live synchronization across our grids).
```
import Dexie from 'dexie';
import dexieCloud from 'dexie-cloud-addon';
import { liveQuery } from 'dexie';
```

Then, you'll need to create the Dexie database, which we'll call "EmployeeDB".
```
const db = new Dexie('EmployeeDB', { addons: [dexieCloud] });
```

We'll create a store for our table and specify the same columns we gave to our grid.
```
db.version(1).stores({
  employees: '@id, first_name, last_name, title',
});
```

After, we'll point the database to the cloud endpoint. This value could be found in `dexie-cloud.json` under `"dblUrl"`.
```
db.cloud.configure({
  databaseUrl: 'https://zaojoytna.dexie.cloud',
});
```

We'll need to register both the clients to ZingGrid.
```
ZingGrid.registerClient(db);
ZingGrid.registerClient(liveQuery, 'subscription');
```

Lastly, we will sync the database with the cloud.
```
db.cloud.sync();
```

Altogether, it should look like this:
```
import Dexie from 'dexie';
import dexieCloud from 'dexie-cloud-addon';
import { liveQuery } from 'dexie';

const db = new Dexie('EmployeeDB', { addons: [dexieCloud] });

db.version(1).stores({
  employees: '@id, first_name, last_name, title',
});

db.cloud.configure({
  databaseUrl: 'https://zaojoytna.dexie.cloud',
});

ZingGrid.registerClient(db);
ZingGrid.registerClient(liveQuery, 'subscription');

// Sync with Dexie Cloud
db.cloud.sync();
```

For more details on connecting ZingGrid to your Dexie Cloud data source, check out the article [here](https://blog.zingsoft.com/connecting-zinggrid-to-dexie-cloud-live-collaboration-2/).