Installation

Packages

The wrappers depend on @fluxgantt/core — you do not install it separately when using a wrapper, but you may still import types/helpers (e.g. toTaskId) from it.

Install

# Core only (vanilla)
pnpm add @fluxgantt/core
 
# React
pnpm add @fluxgantt/react
 
# Vue
pnpm add @fluxgantt/vue

npm / yarn work too (npm install @fluxgantt/core, yarn add @fluxgantt/core).

Peer dependency: Temporal

FluxGantt does all date math with the Temporal API. It is exposed as an optional peer dependency, @js-temporal/polyfill. Install the polyfill unless your runtime already ships Temporal natively:

pnpm add @js-temporal/polyfill

Then install it as globalThis.Temporal at your app's entry point, before any other code that uses FluxGantt runs. Core never imports the polyfill itself; without a global Temporal it throws "Temporal API is not available" on the first date calculation:

import { Temporal } from '@js-temporal/polyfill';
 
// Once, before the first createGantt(). A no-op where Temporal is native.
(globalThis as unknown as { Temporal?: typeof Temporal }).Temporal ??= Temporal;

Put it in its own module (the example apps use src/temporal.ts) and import that module first, so it runs before your chart code. The cast goes through unknown because TypeScript 6 with lib: ["ESNext"] declares its own global Temporal, whose types do not overlap the polyfill's. Not every browser ships Temporal natively yet (check your targets; older Safari does not at the time of writing), and neither do Node 22 and 24, so a public site or a Node script needs this line. The example apps and the StackBlitz projects all do it.

"Optional" applies to the runtime only. Core bundles no polyfill code — it reads globalThis.Temporal — so a runtime that has Temporal natively needs no install to run. The published type declarations are a separate matter: they name Temporal.ZonedDateTime by importing the type from @js-temporal/polyfill, so if you compile with skipLibCheck: false and the package is absent, TypeScript reports TS2307 against our .d.ts. Install it as a devDependency in that case.

Why not avoid the import? Both alternatives were measured and are worse. temporal-spec (the types-only package) declares Duration.round with different overloads, so a real polyfill PlainDate is not assignable to a temporal-spec PlainDate — consumers would get TS2345 at the call site, which is louder than a lib-check warning. And the TS 6 built-in global via /// <reference lib="esnext.temporal" /> works on TypeScript 6 but lib.esnext.temporal.d.ts ships in no 5.x release (verified absent from 5.7.3 and 5.9.3), so it would break every TypeScript 5 consumer outright. We will drop the import once native Temporal is in the DOM/ES lib baseline that our supported TypeScript range covers.

React and Vue peer versions: React ^18.2 || ^19, Vue ^3.4.

Run from source

To hack on FluxGantt itself — or to try an unreleased change — run it from a clone. The example apps depend on the workspace packages via workspace:*, so pnpm install links them with no registry involved:

git clone https://github.com/thai-pc/fluxgantt
cd fluxgantt
pnpm install
pnpm build                          # build @fluxgantt/core + wrappers
 
# then run any example:
pnpm --filter plain-html-demo dev   # vanilla core
pnpm --filter react-vite-demo dev   # React
pnpm --filter vue-vite-demo dev     # Vue

Requirements: Node ≥ 22.19 (see .nvmrc for the exact pinned version), pnpm 10+.

Next

Head to the Quick Start to render your first chart.