Public Preview - This version is in public preview and subject to changes. For production use, please use SDK v4.
Web Browser Sync LimitationsDue to browser security restrictions, web applications cannot sync directly over LAN or Bluetooth with other peers. Web browsers can only sync through:
  • WebSocket connections to Ditto Cloud
  • WebSocket connections to a local Ditto server
For full peer-to-peer capabilities including LAN and Bluetooth sync, use the Node.js/Console version or native mobile/desktop SDKs.Learn more about web compatibility →

​
Prerequisites

Ditto’s JavaScript Web Quickstart runs on modern web browsers. Before getting started, ensure you have the following:
  • A code editor (Visual Studio Code is our recommendation, but any code editor will work)
  • Git installed on your machine
  • Node.js installed on your machine
  • A Ditto Portal account with a configured Ditto Application (see Getting SDK Connection Details)

​
Get Started

​
1. Clone the Repository

  1. Open the terminal
  2. Clone the repository from GitHub. 
    git clone https://github.com/getditto/quickstart
  3. Navigate to the project root directory: 
    cd quickstart

​
2. Configure Ditto

​
Get Ditto Database ID, Development Token, Auth URL, and Websocket URL

  1. Log in to your Ditto Portal account
  2. Navigate to your application and obtain the Ditto App ID, Playground Token, Auth URL, and Websocket URL. (see Getting SDK Connection Details for more details)

​
Add Ditto Credentials

  1. Copy the .env.sample file at the root of the quickstart repo to .env and add your database ID and development token. 
    cp .env.sample .env
  2. Update the .env file with the Database ID and Development Token from your Ditto Application 
    DITTO_DATABASE_ID="REPLACE_ME_WITH_YOUR_DATABASE_ID"
DITTO_DEVELOPMENT_TOKEN="REPLACE_ME_WITH_YOUR_DEVELOPMENT_TOKEN"
DITTO_AUTH_URL="REPLACE_ME_WITH_YOUR_AUTH_URL"
DITTO_WEBSOCKET_URL="REPLACE_ME_WITH_YOUR_WEBSOCKET_URL"

​
3. Run the Application

  1. Navigate to the project directory, depending on which platform you want to run: 
    cd javascript-web ## for the web version
cd javascript-tui ## for the console version
  2. Install dependencies 
    npm install
  3. Run the Application 
    npm start 2>/dev/null

​
4. Sync-Data Offline

  1. Launch the application on multiple devices or simulators
  2. Disconnect from your current WiFi network while keeping WiFi enabled on the device to allow for LAN connections
  3. Add, edit, and delete tasks and experience offline collaboration!

​
Next Steps

All the Ditto Quickstart apps works together! Try running a quickstart app in other languages and see them all collaborate.

​
Additional Resources