Examples

Every example below is in the repo: six vanilla-TypeScript pages, a React app, a Vue app, and a headless script that needs no app at all. Four of them open on StackBlitz with no install (the first boot takes 1-4 minutes while StackBlitz clones the repo, installs dependencies and downloads Rolldown's WebAssembly build); on iOS Safari StackBlitz is best-effort and may ask you to tap "Run this project" first:

The StackBlitz projects are generated from the latest npm release: at release time, tooling/scripts/build-stackblitz-examples.mjs copies the examples to the repo's stackblitz branch with workspace:* replaced by the published versions. The copies under examples/ track master and may use API that is not released yet; run those from a clone (below).

Spec §9.1 sets the Wave 1 target at "10+ live examples on StackBlitz". These are 4 StackBlitz projects (the six vanilla pages share one project); the remaining examples are the unbuilt demos listed at the bottom.

Running any of them

git clone https://github.com/thai-pc/fluxgantt
cd fluxgantt && pnpm install && pnpm build

Then start the app that hosts the example you want.

Vanilla TypeScript

pnpm --filter plain-html-demo dev serves all six pages at http://localhost:5173. On StackBlitz they are one project: append /read-only.html, /selection.html and so on to the preview URL.

The ?pad= and ?collapsed= query parameters on /collapse.html exist because these pages double as the Playwright fixture host — which is the useful part for you too: every page here is covered by e2e, visual and a11y tests, so none of them can rot silently.

React

pnpm --filter react-vite-demo dev — <FluxGantt> plus the useFluxGantt hook, with React 19. See React.

examples/react-vite-demo · Open the React example on StackBlitz

Vue

pnpm --filter vue-vite-demo dev — the Vue 3 composable API. See Vue.

examples/vue-vite-demo · Open the Vue example on StackBlitz

Headless — no example app needed

The engine has no DOM dependency, so this is the whole example:

import { Temporal } from '@js-temporal/polyfill';
import { createGantt, toTaskId } from '@fluxgantt/core';
 
// Node 22/24 have no native Temporal; core reads globalThis.Temporal (no-op where it is native).
(globalThis as unknown as { Temporal?: typeof Temporal }).Temporal ??= Temporal;
 
const gantt = createGantt({
  tasks: [
    { id: toTaskId('design'), name: 'Design', start: '2026-08-03', end: '2026-08-05', progress: 1, type: 'task' },
    { id: toTaskId('build'), name: 'Build', start: '2026-08-05', end: '2026-08-10', progress: 0, type: 'task' },
  ],
  dependencies: [{ from: toTaskId('design'), to: toTaskId('build'), type: 'FS' }],
});
 
const { criticalTaskIds, projectEnd } = gantt.computeCriticalPath();

Run it with node, in a Worker, in a Lambda, or in a test with no jsdom. The two Temporal lines are needed wherever the runtime has no native Temporal, which includes current Node (see Installation). Open the headless example on StackBlitz to run it in the browser; its source is tooling/stackblitz-templates/headless/ in the main repo. At 7.35 KiB gzip this configuration ships no renderer at all — see Comparison.

Planned

These directories exist in the repo as placeholders and are empty — they are planned or exploratory features, not missing work in Wave 1:

svelte-kit-demo · vue-nuxt-demo (MIT wrapper demos, not yet built) · ms-project-import-demo · resource-leveling-demo (Pro) · ai-auto-schedule-demo (exploratory, not on the roadmap)