---
title: Installing JavaScript SDK
slug: v4-4/eRmOqNTaO8XdwterVoq-E
docTags: 
createdAt: 2023-07-28T03:51:39.857Z
---

You can integrate the Ditto SDK with your web and Node.js projects developed using JavaScript and [TypeScript](https://www.typescriptlang.org/) languages. 

:::hint{type="info"}
For a complete overview of the platforms, transports, and devices that the JavaScript SDK supports, see [Compatibility with JavaScript](docId\:n_0eYf9PPw3vQund4-Ryt).
:::

:::hint{type="info"}
If you're using Node.js and want instructions on how to create a task app, see the [Node.js Task App Quickstart](docId\:dJ9uJvyYXqteLm94i1mzi) and the [Task App: Node.js](docId\:eSkClLEQPJNfkQsHXvTiQ) tutorial.
:::

To install the JavaScript SDK:

::::WorkflowBlock
:::WorkflowBlockItem
Confirm that you meet the minimum requirements. ([Prerequisites](./#prerequisites))
:::

:::WorkflowBlockItem
Install the `ditto` package in your environment. ([Installing Dependencies](./#installing-dependencies))
:::

:::WorkflowBlockItem
Import and initialize Ditto in your app. ([Integrating Ditto](./#integrating-ditto-and-starting-sync))
:::

:::WorkflowBlockItem
Authenticate with the Big Peer and then start syncing offline. ([Integrating and Initializing](./#running-ditto))
:::
::::

# Prerequisites

Following are the minimum requirements that must be met before attempting to install Ditto.

- [Node.js](https://nodejs.org/en/) long-term support (LTS) version 14.0
- Linux, macOS version 11, or Windows version 10.0

# Installing Dependencies

Install the `@dittolive/ditto` package into your project:

:::CodeblockTabs
NPM

```none
npm install @dittolive/ditto
```
:::

# Integrating Ditto and Starting Sync

Import and initialize Ditto, and then provide your access credentials for one-time authentication with the Big Peer:

1. From the top-most scope of your app, import Ditto.
2. Using async await, initialize Ditto.
3. Provide your access credentials:
   1. Replace the `appID` placeholder value with the app ID that identifies your app in Ditto.
   2. Replace the `token` placeholder value with your playground token that the Big Peer uses to verify your digital identity before issuing your playground certificate. 

:::hint{type="warning"}
Make sure to instantiate the `ditto` object in the top-most scope of your app. Otherwise, it may be inadvertently garbage collected and no longer accessible throughout the lifecycle of your app. 
:::

:::hint{type="info"}
For instructions on how to obtain your access credentials, see [Onboarding](docId\:JQjYL9gbvsgI9vlW3Ywvc). For an introduction to authentication in Ditto, see *Ditto Basics* > [Authentication and Initialization](docId\:c802C1qiAkfgA2QxmcyWu).
:::

```javascript
import { init, Ditto } from "@dittolive/ditto";

let ditto;
async function main() {
  await init()
  ditto = new Ditto({
    type: "onlinePlayground",
    appID: "YOUR_APP_ID",
    token: "YOUR_PLAYGROUND_TOKEN"
  })

  ditto.startSync()
}

main()
```

# Running Ditto

If you're using typescript, you must create the JavaScript file by running the following command:

:::CodeblockTabs
Bash

```none
tsc
```
:::

Then, you can execute the file:

:::CodeblockTabs
Bash

```none
node index.js
```
:::

# Setting Up Subscriptions

You must create a `subscription` object in the global scope so that ditto synchronizes in the background throughout the duration of the program.

```javascript
import { init, Ditto } from '@dittolive/ditto'

let ditto
let subscription
let liveQuery

async function main () {
  await init()

  ditto = new Ditto({ type: 'onlinePlayground', appID: 'YOUR_APP_ID', token: 'YOUR_TOKEN_HERE'})
  ditto.startSync()

  // Start a subscription
  subscription = ditto.store.collection("tasks").find("isDeleted == false").subscribe()


}

main()
```

# Listening to Changes

Using the `observeLocal` method, as follows, for every change to a document, you can retrieve those documents and print them to the console:

:::hint{type="info"}
For a step-by-step demonstration of how to create a basic task app, see the [Task App: Node.js](docId\:eSkClLEQPJNfkQsHXvTiQ) tutorial.
:::

```javascript
import { init, Ditto } from '@dittolive/ditto'

let ditto
let subscription
let liveQuery

async function main () {
  await init()

  ditto = new Ditto({ type: 'onlinePlayground', appID: 'YOUR_APP_ID', token: 'YOUR_TOKEN_HERE'})
  ditto.startSync()

  subscription = ditto.store.collection("tasks").find("isDeleted == false").subscribe()

  // Listen for changes
  liveQuery = ditto.store.collection("tasks").find("isDeleted == false").observeLocal((docs, event) => {
    console.log(docs)
  })

  ditto.store.collection("tasks").upsert({
    isCompleted: false,
    isDeleted: false,
    body: "Hello world!"
  })
}

main()
```