DHTMLX React Gantt ⇄ Firebase Realtime Demo

This demo shows how to connect DHTMLX React Gantt with Firebase Cloud Firestore to enable real-time updates and multi-user synchronization. When one user creates, edits, or deletes a task or link, the change is instantly reflected in other open browser tabs - no page reloads needed.

The setup makes it easy to build collaborative project management tools where multiple users can interact with the same Gantt chart simultaneously. Built with React and Vite, with Firebase handling data storage and live updates.

Features

Realtime two-way sync - every Gantt change is written to Firestore, every Firestore change is streamed back and applied to the Gantt chart.
Zero-backend setup - pure frontend, Firebase hosts the database, websockets and auth tokens for you.
Bulk first load, delta afterwards - fast initial data load, then per-document updates via Firestore listeners.
React integration - demonstrates proper usage of DHTMLX Gantt with React hooks and TypeScript.
TypeScript support - fully typed components and Firebase interactions.

Quick start

git clone https://github.com/DHTMLX/%REPO%.git
cd react-gantt-firebase-realtime
npm i
cp .env.example .env             # paste your Firebase keys
npm run dev

Open http://localhost:5173 in two browser tabs and watch events propagate in real time.

Setting-up Firebase

Create a project in Firebase Console.
Create Firestore Database (in Native mode)
Register the web app
Paste Firebase configuration JSON into your .env file (see next section).

.env format

VITE_FIREBASE_CONFIGURATION={"apiKey":"xxxxxxxxxxxxxxxxxxx","authDomain":"yourdomain.firebaseapp.com","databaseURL":"https://databasesubdomain.firebaseio.com","projectId":"gantt-with-realtime-firebase","storageBucket":"bucketname.firebasestorage.app","messagingSenderId":"12345","appId":"1:123454:web:4b0d4f77c3abd01367865e","measurementId":"G-QBQ961235KN1"}

Repo structure (relevant bits)

src/
  ├─ components/
  │   ├─ Gantt/
  │   │   ├─ Gantt.tsx          # Main Gantt component
  │   │   └─ types.ts           # TypeScript definitions
  ├─ config/
  │   └─ firebase.ts            # Firebase initialization
  ├─ App.tsx                    # Main application component
  ├─ main.tsx                   # Application entry point
  └─ vite-env.d.ts              # Vite environment types
.env.example                    # Environment variables template
firebase.json                   # Firebase configuration
firebaserc                      # Firebase project aliases
vite.config.ts                  # Vite configuration

Scripts

npm run dev - Start Vite development server (localhost:5173)
npm run build - TypeScript compilation and production build to /dist
npm run preview - Locally preview production build
npm run lint - Run ESLint code checking
npm run deploy - Build and deploy to Firebase Hosting (requires setup)

Deploy the finished bundle to Firebase Hosting:

npm i -g firebase-tools      # once
firebase login
firebase init hosting        # pick 'dist' as public folder
npm run deploy

License

Source code in this repo is released under the MIT License.

DHTMLX Gantt is a commercial library - use under a valid DHTMLX license license or evaluation agreement.

Using Firebase Firestore / Hosting is subject to Google's terms of service and billing. Stay within the free tier or set quotas.

Useful links