<br>
<br>

<p align="center">
  <a href="https://bryntum.com/" rel="noopener" target="_blank"><img height="50" src="https://bryntum.com/resources/bryntum_logo_blue.svg" alt="Bryntum logo"></a>
</p>

<br>

# Bryntum Gantt Thin (Trial)

Bryntum Gantt is a full-featured Gantt chart for project management with support for a wide range of features.. It integrates smoothly with React, Vue, Angular, or plain vanilla JS.

For more information about all features, visit the [Bryntum Gantt site](https://bryntum.com/products/gantt/).

<p align="center">
    <img src="https://bryntum.com/products/gantt/examples/meta/thumb.2048.png" alt="Bryntum Gantt Screenshot" width="600">
</p>

## What is the Thin Package?

The **Thin package** contains only product-specific code and styling, making it ideal for:

* **Combining multiple Bryntum products** in a single application
* **Reducing bundle size** - no duplicated code when using multiple products
* **Avoiding runtime conflicts** - prevents duplicate class registrations

### Thin vs Regular Package

| Package Type                       | Contains                                                              | Best For                                               |
|------------------------------------|-----------------------------------------------------------------------|--------------------------------------------------------|
| **Regular** (`@bryntum/gantt`)   | Product + all dependencies<br/>(e.g., Scheduler includes Grid + Core) | Single product apps                                    |
| **Thin** (`@bryntum/gantt-thin`) | Product-specific code only                                            | Multiple product apps or optimized single product apps |

### When to Use Thin Package?

**Use Thin if:**

- Combining multiple Bryntum products (e.g., Grid + Scheduler + Gantt)
- Using thin framework wrappers (`@bryntum/gantt-react-thin`)
- Want smallest possible bundle size
- Building with modern build tools (Webpack 5+, Vite, Rollup)

**Use Regular if:**

- Building a single product application with standard setup
- Using direct `<script>` tag inclusion
- Prefer simpler dependency management

## Highlights

* Best-in-class [scheduling engine](https://bryntum.com/products/gantt/examples/advanced) handles asynchronous scheduling with dependencies and constraints - runs in browser or server-side on Node.js
* [Critical path analysis](https://bryntum.com/products/gantt/examples/criticalpaths) and [conflict resolution](https://bryntum.com/products/gantt/examples/conflicts) for maintaining project integrity
* Handles [large datasets](https://bryntum.com/products/gantt/examples/bigdataset) with smooth virtual rendering and instant updates
* [Baselines and progress tracking](https://bryntum.com/products/gantt/examples/baselines) with [S-curve visualization](https://bryntum.com/products/gantt/examples/s-curve)
* [Customizable task editor](https://bryntum.com/products/gantt/examples/taskeditor) with custom tabs and [resource assignment picker](https://bryntum.com/products/gantt/examples/resourceassignment)
* [Custom taskbar rendering](https://bryntum.com/products/gantt/examples/custom-rendering) with styles, labels, and [tooltips](https://bryntum.com/products/gantt/examples/tooltips)
* [Resource histogram](https://bryntum.com/products/gantt/examples/resourcehistogram) and utilization tracking
* Export to [Excel](https://bryntum.com/products/gantt/examples/exporttoexcel), [MS Project](https://bryntum.com/products/gantt/examples/msprojectexport), [PDF/PNG](https://bryntum.com/products/gantt/examples/export), and [ICS](https://bryntum.com/products/gantt/examples/export-to-ics) calendar formats
* [Portfolio planning](https://bryntum.com/products/gantt/examples/portfolio-planning) with multiple projects and WBS numbering
* [Version control](https://bryntum.com/products/gantt/examples/versions) and [undo/redo](https://bryntum.com/products/gantt/examples/undoredo) functionality
* [PERT chart integration](https://bryntum.com/products/gantt/examples/joint-js) and compatibility with other Bryntum components
* [React](https://bryntum.com/products/gantt/examples/?framework=react), [Vue](https://bryntum.com/products/gantt/examples/?framework=vue), and [Angular](https://bryntum.com/products/gantt/examples/?framework=angular) wrappers with native framework patterns

## Package Contents

| Path                                  | Description                                    |
|---------------------------------------|------------------------------------------------|
| `gantt.module.js`, `gantt.umd.js` | JavaScript bundles (ES module and UMD formats) |
| `gantt.css`                         | Structural CSS (required)                      |
| `*.d.ts`                              | TypeScript type definitions                    |
| `*.css`                               | Theme stylesheets                              |

**Note:** Trial packages do not include minified bundles or source maps.

## Supported Versions

* [NodeJS](https://nodejs.org/en): `>= 20.0.0`
* [TypeScript](https://www.typescriptlang.org/): `>= 3.6.0`
* [Angular](https://angularjs.org/): `>= 9.0.0`
* [React](https://react.dev/): `>= 16.0.0`
* [Vue](https://vuejs.org/): `>= 3.0.0`
* [Vite](https://vite.dev/): `>= 4.0.0`
* [Webpack](https://webpack.js.org/): `>= 4.0.0`

## Try Bryntum Online Demos

Explore our comprehensive collection of demos:

* [View Online Demos](https://bryntum.com/products/gantt/examples/)
* [JavaScript Demos](https://bryntum.com/products/gantt/examples/?framework=javascript)
* [React Demos](https://bryntum.com/products/gantt/examples/?framework=react)
* [Vue Demos](https://bryntum.com/products/gantt/examples/?framework=vue)
* [Angular Demos](https://bryntum.com/products/gantt/examples/?framework=angular)

## Installation

This is a **trial package** with limited functionality.

### Why Use npm Aliasing?

Trial packages use npm aliasing to install `@bryntum/gantt-thin-trial` under the `@bryntum/gantt-thin` name. This
approach provides a seamless upgrade path - when you purchase a license, you only need to update the alias in
`package.json` without changing any application code.

Install using `npm`:

```shell
npm install @bryntum/gantt-thin@npm:@bryntum/gantt-thin-trial@latest
```

Or using `yarn`:

```shell
yarn add @bryntum/gantt-thin@npm:@bryntum/gantt-thin-trial@latest
```

Alternatively, add to `package.json` dependencies:

```json
"dependencies": {
  "@bryntum/gantt-thin": "npm:@bryntum/gantt-thin-trial@latest"
}
```

Visit our [npm repository guide](https://bryntum.com/products/gantt/docs/guide/Gantt/npm-repository) to learn more about installation and migrating from
trial to licensed packages.

## Combining Multiple Products

When combining multiple Bryntum products, install all needed thin packages with aliasing:

```shell
# Example: Using Grid and Scheduler together
npm install @bryntum/grid-thin@npm:@bryntum/grid-thin-trial@latest
npm install @bryntum/scheduler-thin@npm:@bryntum/scheduler-thin-trial@latest
npm install @bryntum/scheduler-react-thin@latest
```

## Required Dependencies

Thin packages contain only product-specific code and **do not automatically install dependencies**. You must manually
install all required API packages for the underlying products.

### API Packages (Required)

```json
{
  "dependencies": {
    "@bryntum/core-thin": "latest",
    "@bryntum/engine-thin": "latest",
    "@bryntum/grid-thin": "latest",
    "@bryntum/scheduler-thin": "latest",
    "@bryntum/schedulerpro-thin": "latest",
    "@bryntum/gantt-thin": "latest"
  }
}
```

### Dependency Chain Overview

The following table shows which thin API packages are required for each Bryntum product:

| Product           | Core | Engine | Grid | Scheduler | Scheduler Pro |       Product Package        |
|-------------------|:----:|:------:|:----:|:---------:|:-------------:|:----------------------------:|
| **Grid**          |  ✓   |        |  ✓   |           |               |     `@bryntum/grid-thin`     |
| **Scheduler**     |  ✓   |   ✓    |  ✓   |     ✓     |               |  `@bryntum/scheduler-thin`   |
| **Scheduler Pro** |  ✓   |   ✓    |  ✓   |     ✓     |       ✓       | `@bryntum/schedulerpro-thin` |
| **Gantt**         |  ✓   |   ✓    |  ✓   |     ✓     |       ✓       |    `@bryntum/gantt-thin`     |
| **Calendar**      |  ✓   |   ✓    |  ✓   |     ✓     |               |   `@bryntum/calendar-thin`   |
| **TaskBoard**     |  ✓   |   ✓    |      |           |               |  `@bryntum/taskboard-thin`   |

### Important Notes

**About Core Framework Wrappers:**

`@bryntum/core-[framework]-thin` packages (e.g., `@bryntum/core-react-thin`) are **optional** and only needed if you use
Bryntum Core UI widgets directly in your app, such as:

- `BryntumButton`
- `BryntumCombo`
- `BryntumTextField`
- Other Core widgets

If you only use the main product component (Grid, Scheduler, etc.), you don't need the Core framework wrapper.

## Quick Start

```typescript
import { Gantt } from '@bryntum/gantt-thin';
import './style.css';

const gantt = new Gantt({
    appendTo  : 'app',
    startDate : new Date(2022, 0, 1),
    endDate   : new Date(2022, 0, 10),
    columns   : [
        { type : 'name', width : 160 }
    ],
    project : {

        tasks : [
            {
                id       : 1,
                name     : 'Write docs',
                expanded : true,
                children : [
                    { id : 2, name : 'Proof-read docs', startDate : '2022-01-02', endDate : '2022-01-09' },
                    { id : 3, name : 'Release docs', startDate : '2022-01-09', endDate : '2022-01-10' }
                ]
            }
        ],

        dependencies : [
            { fromTask : 2, toTask : 3 }
        ]
    }
});
```

## Themes

### Svalbard (default)

| Light                                                                                      | Dark                                                                                     |
|--------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=svalbard-light"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.svalbard-light.png" alt="Svalbard Light" width="300"></a> | <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=svalbard-dark"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.svalbard-dark.png" alt="Svalbard Dark" width="300"></a> |

### Stockholm

| Light                                                                                        | Dark                                                                                       |
|----------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=stockholm-light"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.stockholm-light.png" alt="Stockholm Light" width="300"></a> | <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=stockholm-dark"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.stockholm-dark.png" alt="Stockholm Dark" width="300"></a> |

### Visby

| Light                                                                                | Dark                                                                               |
|--------------------------------------------------------------------------------------|------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=visby-light"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.visby-light.png" alt="Visby Light" width="300"></a> | <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=visby-dark"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.visby-dark.png" alt="Visby Dark" width="300"></a> |

### Material 3

| Light                                                                                         | Dark                                                                                        |
|-----------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=material3-light"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.material3-light.png" alt="Material 3 Light" width="300"></a> | <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=material3-dark"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.material3-dark.png" alt="Material 3 Dark" width="300"></a> |

### High Contrast

| Light                                                                                                | Dark                                                                                               |
|------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=high-contrast-light"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.high-contrast-light.png" alt="High Contrast Light" width="300"></a> | <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=high-contrast-dark"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.high-contrast-dark.png" alt="High Contrast Dark" width="300"></a> |

### Fluent 2

| Light                                                                                     | Dark                                                                                    |
|-------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=fluent2-light"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.fluent2-light.png" alt="Fluent 2 Light" width="300"></a> | <a href="https://bryntum.com/products/gantt/examples/advanced/?theme=fluent2-dark"><img src="https://bryntum.com/products/gantt/docs/data/Gantt/images/themes/thumb.fluent2-dark.png" alt="Fluent 2 Dark" width="300"></a> |

For more information on customizing themes, see the [Styling guide](https://bryntum.com/products/gantt/docs/guide/Gantt/customization/styling).

## Framework Integrations

Thin packages use thin framework wrappers. Each wrapper follows native framework patterns and lifecycle management.

**Note:** The framework wrappers are public and can be installed normally. They require the thin core package (installed
above with aliasing) to be present.

### React

```shell
npm install @bryntum/gantt-react-thin@latest
```

For details, see [React Multiple Products](https://bryntum.com/products/gantt/docs/guide/Gantt/integration/react/multiple-products).

### Angular

```shell
npm install @bryntum/gantt-angular-thin@latest
```

For details, see [Angular Multiple Products](https://bryntum.com/products/gantt/docs/guide/Gantt/integration/angular/multiple-products).

### Vue 3

```shell
npm install @bryntum/gantt-vue-3-thin@latest
```

For details, see [Vue Multiple Products](https://bryntum.com/products/gantt/docs/guide/Gantt/integration/vue/multiple-products).

## Explore All Bryntum Products

* [Bryntum Grid](https://bryntum.com/products/grid/) - High-performance data grid
* [Bryntum Scheduler](https://bryntum.com/products/scheduler/) - Resource scheduling component
* [Bryntum Scheduler Pro](https://bryntum.com/products/schedulerpro/) - Advanced scheduling with dependencies
* [Bryntum Gantt](https://bryntum.com/products/gantt/) - Project planning and management
* [Bryntum Calendar](https://bryntum.com/products/calendar/) - Full-featured calendar component
* [Bryntum TaskBoard](https://bryntum.com/products/taskboard/) - Kanban-style task management

Explore our comprehensive collection of demos:

| Product           |   <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/js.svg" alt="JavaScript" width="30"><br>JavaScript    |  <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/react.svg" alt="React" width="30"><br>React  |   <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/vue.svg" alt="Vue" width="30"><br>Vue   | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/angular.svg" alt="Angular" width="30"><br>Angular |
|-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:|
| **Grid**          |         [Grid JavaScript demos](https://bryntum.com/products/grid/examples/?framework=javascript)          |         [Grid React demos](https://bryntum.com/products/grid/examples/?framework=react)          |         [Grid Vue demos](https://bryntum.com/products/grid/examples/?framework=vue)          |         [Grid Angular demos](https://bryntum.com/products/grid/examples/?framework=angular)          |
| **Scheduler**     |    [Scheduler JavaScript demos](https://bryntum.com/products/scheduler/examples/?framework=javascript)     |    [Scheduler React demos](https://bryntum.com/products/scheduler/examples/?framework=react)     |    [Scheduler Vue demos](https://bryntum.com/products/scheduler/examples/?framework=vue)     |    [Scheduler Angular demos](https://bryntum.com/products/scheduler/examples/?framework=angular)     |
| **Scheduler Pro** | [Scheduler Pro JavaScript demos](https://bryntum.com/products/schedulerpro/examples/?framework=javascript) | [Scheduler Pro React demos](https://bryntum.com/products/schedulerpro/examples/?framework=react) | [Scheduler Pro Vue demos](https://bryntum.com/products/schedulerpro/examples/?framework=vue) | [Scheduler Pro Angular demos](https://bryntum.com/products/schedulerpro/examples/?framework=angular) |
| **Gantt**         |        [Gantt JavaScript demos](https://bryntum.com/products/gantt/examples/?framework=javascript)         |        [Gantt React demos](https://bryntum.com/products/gantt/examples/?framework=react)         |        [Gantt Vue demos](https://bryntum.com/products/gantt/examples/?framework=vue)         |        [Gantt Angular demos](https://bryntum.com/products/gantt/examples/?framework=angular)         |
| **Calendar**      |     [Calendar JavaScript demos](https://bryntum.com/products/calendar/examples/?framework=javascript)      |     [Calendar React demos](https://bryntum.com/products/calendar/examples/?framework=react)      |     [Calendar Vue demos](https://bryntum.com/products/calendar/examples/?framework=vue)      |     [Calendar Angular demos](https://bryntum.com/products/calendar/examples/?framework=angular)      |
| **TaskBoard**     |    [TaskBoard JavaScript demos](https://bryntum.com/products/taskboard/examples/?framework=javascript)     |    [TaskBoard React demos](https://bryntum.com/products/taskboard/examples/?framework=react)     |    [TaskBoard Vue demos](https://bryntum.com/products/taskboard/examples/?framework=vue)     |    [TaskBoard Angular demos](https://bryntum.com/products/taskboard/examples/?framework=angular)     |

## Online references

* [Bryntum Gantt documentation](https://bryntum.com/products/gantt/docs/)
* [Bryntum Gantt examples](https://bryntum.com/products/gantt/examples/)

* [Bryntum Support Forum](https://forum.bryntum.com/)
* [Contact us](https://bryntum.com/contact/)

## License and copyright

Bryntum Gantt is commercial software and requires a paid license.
Please visit the [Bryntum Gantt End User License](https://bryntum.com/products/gantt/license/) for the full text of the license.

Copyright © 2009-2026, Bryntum
All rights reserved.

