> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ditto.live/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript Web Quickstart

> Get started quickly with Ditto using the Ditto Quickstart Applications

export const QuickstartConfigTitleAndDatabaseIdBody = () => <div>
        <ol>
            <li>
                Log in to your <a href="https://portal.ditto.live" target="_blank">Ditto Portal account</a>
            </li>
            <li>
                Navigate to your database and obtain the Ditto <b>Database ID</b>, <b>Playground Token</b>, <b>Auth URL</b>, and <b>Websocket URL</b>.
                (see <a href="/cloud/portal/getting-sdk-connection-details">Getting SDK Connection Details</a> for more details)
            </li>
        </ol>
    </div>;

export const QuickstartSyncDataOfflineBody = () => <div>
        <ol>
            <li>Launch the application on multiple devices or simulators</li>
            <li>Disconnect from your current WiFi network while keeping WiFi enabled on the device to allow for LAN connections</li>
            <li>Add, edit, and delete tasks and experience offline collaboration!</li>
        </ol>
    </div>;

export const QuickstartCloneTheRepoBody = () => <div>
        <ol>
            <li>Open the terminal</li>
            <li>
                Clone the repository from GitHub.
                <pre>
                    <code>
                        git clone https://github.com/getditto/quickstart
                    </code>
                </pre>
            </li>
            <li>
                Navigate to the project directory:
                <pre>
                    <code>
                        cd quickstart
                    </code>
                </pre>
            </li>
        </ol>
    </div>;

## 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](https://git-scm.com/) installed on your machine
* [Node.js](https://nodejs.org/en/download) installed on your machine
* A Ditto [Portal](https://portal.ditto.live) account with a configured Ditto Database (see [Getting SDK Connection Details](/cloud/portal/getting-sdk-connection-details))

## Get Started

### 1. Clone the Repository

1. Open the terminal
2. Clone the repository from GitHub.
   ```script theme={null}
   git clone https://github.com/getditto/quickstart
   ```
3. Navigate to the project root directory:
   ```script theme={null}
   cd quickstart
   ```

### 2. Configure Ditto

#### Get Ditto Database ID, Playground Token, and Auth URL

<QuickstartConfigTitleAndDatabaseIdBody />

#### Add Ditto Credentials

1. Copy the `.env.sample` file at the root of the `quickstart` repo to `.env` and add your app ID and online playground token.
   ```shell theme={null}
   cp .env.sample .env
   ```
2. Update the `.env` file with the Database ID and Playground Token from your Ditto Database
   ```shell theme={null}
   DITTO_APP_ID="REPLACE_ME_WITH_YOUR_DATABASE_ID"
   DITTO_PLAYGROUND_TOKEN="REPLACE_ME_WITH_YOUR_PLAYGROUND_TOKEN"
   DITTO_AUTH_URL="REPLACE_ME_WITH_YOUR_AUTH_URL"
   ```

### 3. Run the Application

1. Navigate to the project directory
   ```shell theme={null}
   cd javascript-web
   ```
2. Install dependencies
   ```shell theme={null}
   npm install
   ```
3. Run the Application
   ```shell theme={null}
   npm start 2>/dev/null
   ```

### 4. Sync-Data Offline

<QuickstartSyncDataOfflineBody />

## Next Steps

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

## Additional Resources

* [JavaScript Install Guide](/sdk/latest/install-guides/js)
* [JavaScript Release Notes](/sdk/latest/release-notes/javascript-web)
* [API Reference](/sdk/latest/api-reference/api-reference)