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.
- 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.
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 devOpen http://localhost:5173 in two browser tabs and watch events propagate in real time.
- 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).
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"}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 configurationnpm run dev- Start Vite development server (localhost:5173)npm run build- TypeScript compilation and production build to /distnpm run preview- Locally preview production buildnpm run lint- Run ESLint code checkingnpm run deploy- Build and deploy to Firebase Hosting (requires setup)
npm i -g firebase-tools # once
firebase login
firebase init hosting # pick 'dist' as public folder
npm run deploySource 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.