A demo of DHTMLX React Gantt integrated with XState for state management in a React application. All task and link mutations are routed through an XState state machine, making state transitions explicit, predictable, and auditable. Built with React 19, TypeScript, and Vite, with a Material UI toolbar for zoom and undo/redo controls.
A companion tutorial walks through the integration step by step: XState integration guide
This demo shows how to use XState — a library for modeling application logic as finite state machines and statecharts — as the state layer for DHTMLX React Gantt. Instead of a simple key-value store, all Gantt state lives inside a formal state machine defined in machine.ts. Every task and link mutation is an explicit event dispatched to the machine, and every state transition is a named, typed action.
The practical payoff is that the machine makes impossible states impossible: you cannot be simultaneously in an "editing task" state and a "dragging task" state because the machine's transitions prevent it. This structure also makes undo/redo straightforward to reason about, since the machine can record transition history rather than managing raw snapshots.
The demo covers task and link CRUD, zoom levels (day, month, year), undo/redo, drag-and-drop rescheduling, and a Material UI toolbar — the same feature surface as the Zustand starter, but with the state machine approach.
- Use this demo when your Gantt integration has complex conditional state logic that is hard to reason about as plain store actions.
- Use this when you want formal guarantees that certain invalid UI states (e.g., concurrent edit and drag operations) are structurally impossible.
- Use this as a reference for wiring XState machine events to DHTMLX Gantt's mutation callbacks.
- Use this when your team already uses XState elsewhere in the app and wants a consistent state management approach throughout.
git clone https://github.com/DHTMLX/react-gantt-xstate-starter
cd react-gantt-xstate-starter
npm install
npm run devOpen http://localhost:5173 in your browser.
src/
├── components/
│ ├── GanttComponent.tsx # Gantt initialization + machine event dispatch bridge
│ └── Toolbar.tsx # Material UI toolbar: zoom, undo/redo controls
├── machine.ts # XState state machine: states, events, actions, history
├── seed/
│ └── Seed.ts # Initial tasks, links, and zoom level config
├── App.tsx
└── main.tsx
The machine (machine.ts) is the single source of truth. GanttComponent.tsx uses the machine's current state to derive tasks and links passed to Gantt as props. When Gantt fires a mutation callback (task created, updated, deleted, or linked), the component dispatches a typed event to the machine. The machine processes the event, transitions to the new state, and React re-renders with the updated data. Undo/redo is handled by the machine's history tracking.
- Machine as Gantt data store — tasks, links, zoom level, and history all live inside the XState machine context.
GanttComponent.tsxreads from machine context and dispatches events back; it holds no local state of its own. - Typed event dispatch bridge — each of Gantt's mutation callbacks (create, update, delete for both tasks and links) maps to a named, typed XState event. This makes every possible Gantt mutation visible in the machine definition, so you always know what can happen and when.
- Machine-native undo/redo — undo/redo is modeled as machine transitions rather than external snapshot logic. The machine tracks context history and exposes
UNDOandREDOevents that the toolbar dispatches directly. - Impossible states by construction — the machine's explicit state definitions prevent conflicting concurrent states (such as editing and dragging at the same time) at the model level rather than through defensive runtime checks.
| Feature | Details |
|---|---|
| Task CRUD | Create, update, and delete tasks via XState machine events |
| Link CRUD | Create, update, and delete task dependency links via machine events |
| Drag-and-drop | Task rescheduling and reordering dispatched as machine events |
| Zoom levels | Day, month, and year zoom, stored in and controlled from machine context |
| Undo/redo | Machine history-based undo/redo for task and link mutations |
| Material UI toolbar | Zoom controls and undo/redo buttons |
| Explicit state model | Named states and typed transitions in machine.ts |
| TypeScript | Full type coverage for machine events, context, tasks, and links |
| Vite | Fast dev server and production build |
| React 19 | Built on the latest React release |
This demo is a starter, not a production-ready application. For production use:
- Add persistence — machine context is in-memory only; page refresh resets to seed data. Add a machine service or
onTransitionhandler that syncs context to an API or database. - Extend the machine for your workflow — the demo machine covers CRUD and undo/redo. Real project management apps often need additional states: loading, saving, conflict resolution, and optimistic updates. XState's statechart model handles this well as the machine grows.
- Add XState DevTools — XState has a dedicated inspector for visualizing and debugging machine state. Recommended for any non-trivial machine.
- Gantt license — DHTMLX React Gantt requires a valid commercial license for production use (see License section below).
- XState integration tutorial (official guide)
- DHTMLX React Gantt product page
- DHTMLX Gantt product page
- DHTMLX Gantt documentation
- React Gantt integration guide
- Gantt + Zustand starter (simpler store alternative)
- Gantt + TanStack Query starter (server-backed state)
- XState documentation
- DHTMLX blog
- Community forum
- Report an issue
The source code in this repository is released under the MIT License.
Commercial License Required for proprietary or commercial applications. Includes access to PRO features, dedicated technical support, and long-term maintenance. Learn more →
Try before you buy A free evaluation of DHTMLX React Gantt is available — no credit card required. Start your evaluation →