# Getting Started with Bryntum Gantt in JavaScript
## Try JavaScript demos
Bryntum Gantt is delivered with a variety of JavaScript demo applications showing its functionality.
## 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](#Gantt/guides/quick-start/javascript-npm.md).
To get started, the broad steps are as follows:
1. [Download Bryntum Gantt](##download)
2. [Create Application](##create-application)
3. [Bryntum bundles](##bryntum-bundles)
4. [Add component to Application](##add-component-to-application)
5. [Apply styles](##apply-styles)
6. [Run Application](##run-application)
The application we are about to build together is pretty simple, and will look like the live demo below:
## Download
Bryntum Gantt is a commercial product, but you can access our free trial archive with bundles and examples by
[downloading it here](https://bryntum.com/download/?product=gantt).
## Create Application
You can proceed as usual. The Bryntum Gantt Component is compliant with the most popular Javascript Standards.
You'll likely create a folder with an HTML page called `index.html` and a JavaScript file for your application, let's
say `app.js`.
## Bryntum bundles
The Bryntum Gantt distribution provides pre-build JavaScript bundles.
All bundles are transpiled with `chrome: 75` 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.
We recommend you load your application script(s) (for example **app.js**) at the end of the body section with the
following syntax.
```html
```
From your script(s) (for example **app.js**) import the classes you need from the EcmaScript module bundle, you can then
use them as follows:
```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.
[More on EcmaScript modules...](#Gantt/guides/gettingstarted/es6bundle.md)
### Using `
```
We recommend you load your application script(s) (for example **app.js**) at the end of the body section with the
following syntax.
```html
```
Within your application script(s), you will be able to access Gantt classes in the global `bryntum` namespace as
follows:
```javascript
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...](#Gantt/guides/gettingstarted/scripttag.md)
## Add component to Application
Assuming the use of an EcmaScript module bundle:
```javascript
import { Gantt } from './gantt.module.js';
const gantt = new Gantt({
appendTo : document.body,
startDate : new Date(2022, 0, 1),
endDate : new Date(2022, 0, 10),
project : {
tasksData : [
{
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' }
]
}
],
dependenciesData : [
{ fromTask : 2, toTask : 3 }
]
},
columns : [
{ type : 'name', width : 160 }
]
});
```
Here data is provided inline, but feel free to use the most appropriate data store.
[Learn more on stores...](#Core/guides/data/storebasics.md)
The code above creates a simple project with a few tasks and dependencies between them.
Bryntum Gantt schedules project tasks taking dependencies, constraints, and calendars into account.
For an in-depth introduction to the Project, please refer to the [Data guide]("#Gantt/guides/data/project_data.md").
Note that the startDate and endDate configs passed to the Gantt instance denote the currently accessible
timespan.
Hundreds of companies covering various industries praise Bryntum products. However, not everyone uses them the same way,
so we have made them fully customizable.
If you want to discover how flexible the Bryntum Gantt Component is right now, please continue exploring the
documentation and visit the [API documentation](#Gantt/view/Gantt).
## Apply styles
### Stylesheet
A theme is required to render the Bryntum Gantt correctly.
You'll find a complete list of available CSS files in the `/build` folder of the distribution:
| File | Contents |
|-----------------------------|---------------------|
| `gantt.classic-dark.css` | Classic-Dark theme |
| `gantt.classic.css` | Classic theme |
| `gantt.classic-light.css` | Classic-Light theme |
| `gantt.material.css` | Material theme |
| `gantt.stockholm.css` | Stockholm theme |
You'll need to copy the selected CSS file into your project, let's say in the root folder.
We also recommend you to copy onto your application the .css.map file paired with the css file you selected.
The selected CSS file will need to be loaded from your HTML `` section as follows (Example inclusion of Stockholm
theme):
```html
```
You'll also need to **copy** the **font** folder next to the CSS file.
### Sizing the component
Create a CSS file, let's say **main.css**, for instance.
This CSS file will need to be loaded from your HTML `` section as follows:
```html
```
By Default, the Component is configured to take `100%` of the parent DOM element with a min-height of `10em`.
For your application to show the Component with the appropriate size, you can for example make parent components take
the full height of the screen.
```css
body,
html {
margin : 0;
display : flex;
flex-direction : column;
height : 100vh;
font-family : Poppins, "Open Sans", Helvetica, Arial, sans-serif;
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](https://bryntum.com/products/grid/docs/guide/Grid/basics/sizing).
## Run Application
Now you can start your JavaScript App as usual!
Please note that if you have chosen to use EcmaScript module bundles, you will need to host your application on a web
server to avoid CORS policy errors. Surf to the page in your browser, likely using an URL similar to
http://localhost/gantt.
## 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](#Gantt/guides/tutorial.md) that we are excited
to see you follow.
### Learn about Data
Bryntum components often use multiple collections and entities.
The [Data guide](#Gantt/guides/data/project_data.md) guide explains how they all fit together.
### Rendering and styling
In the [Rendering and styling](#Gantt/guides/customization/rendering_and_styling.md) guide you will learn how to
customize the rendering of your Gantt.
### Enabling features
Please refer to the
[Enabling extra features](#Gantt/guides/basics/features.md)
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](#Gantt/guides/customization/responsive.md)
guide to learn how to configure responsiveness.
### Localization
Bryntum Gantt uses locales for translations of texts, date formats and such. This
[Localization](#Gantt/guides/customization/localization.md)
guide shows you how to use one of the locales that Bryntum Gantt ships with and how to create your own.