# What's new in Gantt v5.1.0

## Introducing Create React App templates

[Create React App script](https://create-react-app.dev/) templates are now available in the public npm repository.

If you are using **javascript only**, just type:

```shell
$ npx create-react-app my-app --template @bryntum/cra-template-javascript-gantt
```

or if you prefer using **typescript**:

```shell
$ npx create-react-app my-app --template @bryntum/cra-template-typescript-gantt
```

**Note**: Please feel free to change `my-app` to your preferred application name

Check the [React integration guide](#Gantt/guides/quick-start/react.md) for more information.

## Simplified url configuration on the project

Configuring the crud manager functionality of the project was made a little easier by introducing shortcuts for setting
load and sync urls using the new `loadUrl` and `syncUrl` configs. When your application does not need to supply any
additional configs to the transport layer you can use them in favor of having to nest the urls. Old code like this:

```javascript
const gantt = new Gantt({
    project : {
        transport : {
            load : {
                url : 'load.aspx'
            }
        }
    }
})
```

Can now be written more conveniently like this:

```javascript
const gantt = new Gantt({
    project : {
        loadUrl : 'load.aspx'
    }
})
```

Flattening the structure out makes it easier for framework developers, who can now assign directly to the prop on the
project component rather than having to supply a config object. Pseudo framework code to illustrate the old approach:

```jsx
const projectConfig = {
    transport : {
        load : {
            url : 'load.php'
        }
    }
}

<BryntumProjectModel {...projectConfig} />
```

Simplified approach:

```jsx
<BryntumProjectModel loadUrl={"load.php"} />
```

## New module bundle for Angular

Bryntum Gantt is now delivered with new ES Module bundle without WebComponents. This was
done to avoid conflicts with Angular which also uses WebComponents for applications.

Angular wrappers use `gantt.module.js` bundle in favor of removed `gantt.lite.umd.js` one.

Check the [upgrading guide](#Gantt/guides/upgrades/5.1.0.md#new-module-bundle-for-angular) for the details.

## New module bundle with WebComponents

Bryntum Gantt is now delivered with new `gantt.wc.module.js` ES Module bundle with WebComponents.

Check the [upgrading guide](#Gantt/guides/upgrades/5.1.0.md#new-module-bundle-with-webcomponents) for the details.

## New widget for switching views
The [ViewPresetCombo](#Scheduler/widget/ViewPresetCombo) is an easy-to-setup preset picker which can be added to the
Gantt's toolbar and provides a simple UI for switching between different "views". It's based on
[ViewPreset](#Scheduler/preset/ViewPreset) which is built-in to Gantt.

Try it out in the live demo here:

<div class="external-example" data-file="./data/Gantt/examples/widget/ViewPresetCombo.js"></div>


<p class="last-modified">Last modified on 2023-10-26 8:19:02</p>