Getting Started with Bryntum Gantt in JavaScript

Using an AI coding assistant? Install the Bryntum MCP server to give it access to version-specific Bryntum documentation.

Try JavaScript demos

Bryntum Gantt is delivered with a variety of JavaScript demo applications showing its functionality.

View online JS demos View local JS demos

Create JavaScript application

In this guide we will explain how to get started if you are not using npm. If you prefer to use npm, please visit the dedicated Quick Start here.

To get started, the broad steps are as follows:

Download Bryntum Gantt
Create Application
Bryntum bundles
Add component to Application
Apply styles
Run the Application

The application we are about to build together is pretty simple, and will look like the live demo below:

const gantt = new Gantt({ appendTo : targetElement, autoHeight : true, columns : [ { type : 'name', field : 'name', text : 'Name' } ], tasks : [ { id : 1, name : 'Documentation Project', expanded : true, children : [ { id : 2, name : 'Preparation', expanded : true, children : [ { id : 6, name : 'Proof-read docs', startDate : '2026-01-02', endDate : '2026-01-09' }, { id : 3, name : 'Release docs', startDate : '2026-01-09', endDate : '2026-01-10' } ] }, { id : 4, name : 'Development', expanded : true, children : [ { id : 7, name : 'Write API docs', startDate : '2026-01-05', endDate : '2026-01-12' }, { id : 8, name : 'Write tutorials', startDate : '2026-01-10', endDate : '2026-01-16' }, { id : 9, name : 'Create examples', startDate : '2026-01-12', endDate : '2026-01-18' } ] }, { id : 5, name : 'Review & Release', expanded : true, children : [ { id : 10, name : 'Team review', startDate : '2026-01-18', endDate : '2026-01-20' }, { id : 11, name : 'Final approval', startDate : '2026-01-20', endDate : '2026-01-21' }, { id : 12, name : 'Public release', startDate : '2026-01-22', endDate : '2026-01-22' } ] } ] } ], dependencies : [ { fromTask : 6, toTask : 3 }, { fromTask : 7, toTask : 8 }, { fromTask : 8, toTask : 9 }, { fromTask : 9, toTask : 10 }, { fromTask : 10, toTask : 11 }, { fromTask : 11, toTask : 12 } ], startDate : new Date(2026, 0, 1), endDate : new Date(2026, 0, 30) });

Download

Bryntum Gantt is a commercial product, but you can access our free trial archive with bundles and examples by downloading it here.

Create Application

You can proceed as usual. The Bryntum Gantt Component is compliant with the most popular Javascript Standards.

To create an application, create a new folder and add the following to index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bryntum Gantt App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

Bryntum bundles

The Bryntum Gantt distribution provides pre-build JavaScript bundles. All bundles are transpiled with chrome: 88 babel preset.

In distribution zip they are located under the /build folder.

File	Contents
`gantt.module.js`	Modules format bundle without WebComponents
`gantt.lwc.module.js`	Modules format bundle with Lightning WebComponents (Salesforce)
`gantt.wc.module.js`	Modules format bundle with WebComponents
`gantt.umd.js`	UMD format bundle with WebComponents

Bryntum Gantt also contains Non-UI bundles for usage with Node.JS.

File	Contents
`gantt.node.cjs`	Non-UI bundle in CommonJS format
`gantt.node.mjs`	Non-UI bundle in Modules format

Typings for TypeScripts can be found in files with a .d.ts file extension.

Minified bundles are available for Licensed product version and delivered with .min.js suffix.

Using EcmaScript module bundles

If you choose this option, copy the selected module file onto your application, in the root folder, for instance.

Create a main.js file, you can import the gantt JavaScript.

import { Gantt } from './gantt.module.js';

const gantt = new Gantt({/*...*/ });

We have copied the module directly from the build folder for simplicity in this code example. Consider using your preferred build tool instead.

Learn more about how to use EcmaScript modules here.

Using `<script>` tag and UMD files

Please consider this solution as legacy and use it only for compatibility. If you choose this option, copy the selected UMD file onto your application, in the root folder, for instance.

To include Bryntum Gantt on your page using a plain old script tag, add a <script> tag pointing to the UMD bundle file in the <HEAD> of your index.html page. Example:

<script src="gantt.umd.js"></script>

In the main.js, you will be able to access Gantt classes in the global bryntum namespace as follows:

const gantt = new bryntum.gantt.Gantt({/*...*/ });

We also recommend you to copy onto your application the .js.map file paired with the umd file you selected.

We have copied the module directly from the build folder for simplicity in this code example. Consider using your preferred build tool instead.

Read more on script tag and UMD modules…

Add component to Application

Assuming the use of an EcmaScript module bundle:

import { Gantt } from './gantt.module.js';

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

        // Automatically introduces a `startnoearlier` constraint for tasks that (a) have no predecessors,
        // (b) do not use constraints and (c) aren't `manuallyScheduled`
        autoSetConstraints : true,
        tasks              : [
            {
                id       : 1,
                name     : 'Documentation Project',
                expanded : true,
                children : [
                    {
                        id       : 2,
                        name     : 'Preparation',
                        expanded : true,
                        children : [
                            { id : 6, name : 'Proof-read docs', startDate : '2026-01-02', endDate : '2026-01-09' },
                            { id : 3, name : 'Release docs', startDate : '2026-01-09', endDate : '2026-01-10' }
                        ]
                    },
                    {
                        id       : 4,
                        name     : 'Development',
                        expanded : true,
                        children : [
                            { id : 7, name : 'Write API docs', startDate : '2026-01-05', endDate : '2026-01-12' },
                            { id : 8, name : 'Write tutorials', startDate : '2026-01-10', endDate : '2026-01-16' },
                            { id : 9, name : 'Create examples', startDate : '2026-01-12', endDate : '2026-01-18' }
                        ]
                    },
                    {
                        id       : 5,
                        name     : 'Review & Release',
                        expanded : true,
                        children : [
                            { id : 10, name : 'Team review', startDate : '2026-01-18', endDate : '2026-01-20' },
                            { id : 11, name : 'Final approval', startDate : '2026-01-20', endDate : '2026-01-21' },
                            { id : 12, name : 'Public release', startDate : '2026-01-22', endDate : '2026-01-22' }
                        ]
                    }
                ]
            }
        ],
        dependencies : [
            { fromTask : 6, toTask : 3 },
            { fromTask : 7, toTask : 8 },
            { fromTask : 8, toTask : 9 },
            { fromTask : 9, toTask : 10 },
            { fromTask : 10, toTask : 11 },
            { fromTask : 11, toTask : 12 }
        ]
    }
});

Here we are providing inline data, you can learn more about how we manage data using Store in this guide.

The code above sets up a basic project structure, defining several tasks and establishing dependencies between them.

Bryntum Gantt schedules project tasks with consideration for dependencies, constraints, and calendar configurations. For a detailed introduction to the Bryntum Gantt project entity, please see the data guide.

Note that the startDate and endDate configs passed to the Gantt instance denote the currently accessible timespan.

By default, tasks will automatically be moved to the project's start date if there are no constraints, dependencies, or manually scheduled tasks. To prevent this, set autoSetConstraints to true in the ProjectModel configuration.

If you want to discover how flexible the Bryntum Gantt Component is, please explore the API documentation.

Apply styles

Stylesheets

You'll find a complete list of available CSS files in the /build folder of the distribution:

File	Contents
`gantt.css`	Structural CSS
`svalbard-light.css`	Svalbard Light theme
`svalbard-dark.css`	Svalbard Dark theme
`visby-light.css`	Visby Light theme
`visby-dark.css`	Visby Dark theme
`stockholm-light.css`	Stockholm Light theme
`stockholm-dark.css`	Stockholm Dark theme
`material3-light.css`	Material3 Light theme
`material3-dark.css`	Material3 Dark theme
`fluent2-light.css`	Fluent2 Light theme
`fluent2-dark.css`	Fluent2 Dark theme
`fontawesome/css/fontawesome.css`	Font Awesome Free base CSS
`fontawesome/css/solid.css`	Font Awesome Free solid icons

You'll need to copy and import the structural CSS and the preferred theme into your project for the Bryntum Gantt to render correctly, and if you are not replacing the icons used by the component, you will also need to include Font Awesome. Below we assume they are in the root folder.

We also recommend you to copy onto your application the .css.map file paired with the css file you selected.

Add link tags for the structural CSS and a theme to your index.html in the <head>...</head> section:

<!-- Structural CSS -->
<link rel="stylesheet" href="gantt.css">
<!-- Bryntum theme of your choice -->    
<link rel="stylesheet" href="svalbard-light.css" data-bryntum-theme>

Make sure to copy the fonts/ folder located in the /build right next to the .css theme.

- my-gantt-app/
  - fonts/
  - gantt.css
  - svalbard-light.css

Sizing the component

By default, the Bryntum Gantt component is configured to occupy 100% of the parent DOM element with a min-height of 10em.

To display the component at the appropriate size, you can, for example, set parent components to take up the full height of the screen.

#app {
    margin         : 0;
    display        : flex;
    flex-direction : column;
    height         : 100vh;
    font-size      : 14px;
}

There are many other solutions depending on the situation. Feel free to adapt the code above regarding your application layout. For more information on the topic, see this guide Sizing the component.

Run the application

To see the preview, start a live-server (if you are using one) or open the index.html file in your browser from your local web server.

A local web server is required, viewing the app page directly from the local file system won't work.

What to do next?

Tutorial

Now it is time to customize your application. To get familiar with the most common tasks developers perform, we have designed an engaging tutorial that we are excited to see you follow.

Learn about Data

Bryntum components often use multiple data collections and entities.

For a detailed explanation of how these elements interact, see our guide to displaying data in Bryntum Gantt.

Rendering and styling

In the rendering and styling guide you will learn how to customize the rendering of your Gantt.

Enabling features

Please refer to the enabling extra features guide to learn how to enhance your Gantt chart with additional functionality (such as displaying labels for the tasks).

Responsiveness

Gantt can be configured to work well on many different screen sizes. This is achieved by specifying different responsive "levels" (breakpoints) on Gantt and then having per level configurations on the columns.

If this is a concern now, visit the responsive guide to learn how to configure responsiveness.

Localization

Bryntum Gantt uses locales for translations of texts, date formats and such. This localization guide shows you how to use one of the locales that Bryntum Gantt ships with and how to create your own.