Per-product guidance
Bryntum is a suite of JavaScript UI components. The integration mechanics are the same across all of them — packages, CSS pattern, framework wrappers — only the component class and data model differ. These pages capture the per-product details an agent should know.
Packages and CSS files
| Product | npm package | Trial package | CSS file |
|---|---|---|---|
| Gantt | @bryntum/gantt | @bryntum/gantt-trial | gantt.css |
| Scheduler | @bryntum/scheduler | @bryntum/scheduler-trial | scheduler.css |
| Scheduler Pro | @bryntum/schedulerpro | @bryntum/schedulerpro-trial | schedulerpro.css |
| Grid | @bryntum/grid | @bryntum/grid-trial | grid.css |
| Calendar | @bryntum/calendar | @bryntum/calendar-trial | calendar.css |
| TaskBoard | @bryntum/taskboard | @bryntum/taskboard-trial | taskboard.css |
Framework wrappers add a suffix and have no -trial variant: @bryntum/{product}-react, @bryntum/{product}-angular, @bryntum/{product}-vue-3.
The shared pattern
Every product follows the same five steps (encoded in the skill):
- Install the package (trial via the npm alias, exact version).
- CSS — FontAwesome imports, then structural
{product}.css, then the theme (defaultsvalbard-light), then.b-widget { font-family: 'Poppins' }. - Framework wiring — the right wrapper and binding style.
- Size the parent container.
- Look up unknowns with the MCP server.
Which product?
- Gantt — project scheduling with tasks, dependencies, and a critical path.
- Scheduler — resource-vs-time scheduling (bookings, shifts, allocations).
- Scheduler Pro — Scheduler plus dependencies, constraints, and scheduling engine.
- Grid — high-performance data grid.
- Calendar — day/week/month/agenda event calendar.
- TaskBoard — kanban-style card board.
- Complete — the full bundle of all products.
Pick the narrowest product that fits, unless the user has the Complete bundle.