bryntum-vanilla

name	bryntum-vanilla
description	Vanilla JS patterns for Bryntum components. Use this alongside the `bryntum` skill when building or integrating any Bryntum product (Scheduler, Gantt, Calendar, Grid, TaskBoard, Scheduler Pro) without a framework — plain JavaScript or TypeScript with no React/Angular/Vue. Trigger when there is no framework in package.json or when the user asks about vanilla JS Bryntum integration or direct class instantiation.
metadata	{"tags":"bryntum, vanilla, javascript"}

Quick-start guide

Fetch before writing code: https://bryntum.com/products/{product}/docs-llm/guide/{Product}/quick-start/javascript-npm.md

---

Vanilla JS

No framework wrapper package needed — import directly from the core package.

Import and instantiate

import { Gantt } from '@bryntum/gantt';

const gantt = new Gantt({
    appendTo : 'app',
    columns  : [...],
    // ...
});

Always import from @bryntum/{product} (the installed package or alias). Never use the demo's relative build paths like ../../build/gantt.module.js.

CSS

Import in the app's entry stylesheet — same order as all other frameworks:

@import "@bryntum/gantt/fontawesome/css/fontawesome.css";
@import "@bryntum/gantt/fontawesome/css/solid.css";
@import "@bryntum/gantt/gantt.css";
@import "@bryntum/gantt/svalbard-light.css";

Sizing

See the Sizing section of the bryntum skill — vanilla scaffolds use #app. Note: the appendTo target element also needs an explicit height if it does not inherit from #app.