Skip to main content
Back to examples
React/Remix starter
React

This example runs from source. Open the repository to clone, build, and run it locally.

Open on GitHub
React

Remix starter

React Router project that renders a Gantt chart inside a route, with task and link data wired in.

README.md View on GitHub
# DHTMLX React Gantt Quick Start with Remix (React Router)

This project demonstrates how to integrate the DHTMLX React Gantt component with Remix framework (React Router v7+). 

Built with React 19+ and React Router 7+, this demo provides a solid foundation for building powerful project management applications with full TypeScript support.

**Related tutorial**:
[https://docs.dhtmlx.com/gantt/integrations/react/remix/](https://docs.dhtmlx.com/gantt/integrations/react/remix/)

## Features:

- Powerful Gantt chart UI for project planning and task management.

- Remix (React Router v7+) integration with modern routing.

- React component driven approach with props controlling Gantt configuration.

- Support for multiple time scales (day, month, year) for flexible project visualization.

- Interactive drag-and-drop functionality for task management.

- Strong TypeScript support for type-safe usage.

## Project Structure:

```
dhx-react-gantt-remix-demo/
├── app/
│   ├── routes/
│   │   └── home.tsx         # Main route with Gantt chart integration
│   ├── components/
│   │   └── Gantt/
│   │       └── Gantt.tsx    # Gantt chart component
│   ├── data/
│   │   └── demoData.ts      # Sample tasks and links data
│   ├── root.tsx             # Root layout
│   ├── routes.ts            # Routes configuration
│   └── app.css              # Global styles and Tailwind configuration
├── react-router.config.ts   # React Router configuration
├── vite.config.ts           # Vite configuration
├── tsconfig.json            # TypeScript configuration
└── package.json             # Project dependencies
```

### How to install using npm/yarn

Install dependencies:

```
npm install
```

or

```
yarn
```

### Run the demo on the local server and explore it

#### Start the development server:

```
npm run dev
```

or

```
yarn dev
```

#### Build for production

```
npm run build
```

or

```
yarn build
```

#### Start production server

```
npm start
```

or

```
yarn start
```

## License

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

**DHTMLX React Gantt** is a commercial library - use under a valid [DHTMLX license](https://dhtmlx.com/docs/products/licenses.shtml) or evaluation agreement.

## Useful links

[DHTMLX React Gantt product page](https://dhtmlx.com/docs/products/dhtmlxGantt-for-React/)

[DHTMLX Gantt product page](https://dhtmlx.com/docs/products/dhtmlxGantt/)

[Gantt Documentation](https://docs.dhtmlx.com/gantt/)

[React Gantt Documentation](https://docs.dhtmlx.com/gantt/web__react.html)

[Remix Documentation](https://v2.remix.run/docs/start/quickstart)

[React Router Documentation](https://reactrouter.com/home)

[Blog](https://dhtmlx.com/blog/)

[Forum](https://forum.dhtmlx.com/)