Install. Import.
Build your timeline.

01. Install from npm

Install the public @tramevio/gantt package in your project. No GitHub token is required when using the npm registry.

npm install @tramevio/gantt

Current release: 0.1.0-beta.2. To pin this beta explicitly:

npm install @tramevio/gantt@0.1.0-beta.2

This release declares Node.js 24.x for its tooling. TypeScript declarations are included; no separate @types package is needed.

@tramevio:registry=https://registry.npmjs.org

02. Import in a TypeScript project

Import document types and core utilities from @tramevio/gantt. Import DOM views from @tramevio/gantt/browser.

import type { ProjectDocument } from '@tramevio/gantt';
import { mountGantt } from '@tramevio/gantt/browser';

The example below targets a browser application with an ES module bundler. Add a container to your page or component template:

<div id="chart"></div>

Then add this code to your application's TypeScript entry point, such as src/main.ts:

import type { ProjectDocument } from '@tramevio/gantt';
import { mountGantt } from '@tramevio/gantt/browser';

const project: ProjectDocument = {
  schemaVersion: 1,
  kind: 'project',
  id: 'my-plan',
  name: 'My first plan',
  time: { mode: 'date' },
  tasks: [{
    id: 'design', parentId: null, kind: 'task',
    name: 'Design the experience', progress: 0.5,
    schedule: { start: '2026-09-21', end: '2026-09-25' }
  }],
  dependencies: []
};

// Call after the container has been added to the DOM.
export function mountTimeline(host: HTMLElement): () => void {
  const result = mountGantt(host, project, {
    start: '2026-09-20', end: '2026-09-28', language: 'en'
  });

  if (!result.ok) {
    console.error(result.diagnostics);
    throw new Error('The chart could not be mounted.');
  }

  // Call this function when your component or page unmounts.
  return () => result.view.destroy();
}

const host = document.querySelector<HTMLElement>('#chart');
if (!host) throw new Error('Missing #chart container.');
const dispose = mountTimeline(host);
// Later, during teardown: dispose();

Dates use ISO format. In date-only mode, the end date is exclusive: September 21–25 covers September 21 through 24.

Use moduleResolution: "Bundler" with module: "ESNext" and include the DOM library in a bundler-based TypeScript configuration. Keep the settings your framework already provides if they resolve package exports correctly.

In React, Vue or Angular, call mountTimeline once your container exists and run its returned cleanup function when the component is destroyed. In server-rendered applications, mount on the client. No global Tramevio object or copied browser bundle is needed for this module-based integration.

03. Connect edits to your application

The starter chart above displays your document. To enable editing, configure editable mode and handle editing proposals: a store validates and applies the changes, then your application supplies the accepted document back to the view.

The gallery uses the browser bundle for standalone examples. In a TypeScript application, import core functions from @tramevio/gantt and mounting functions from @tramevio/gantt/browser. Apply your own server-side authorization when saving data.

04. Other installation options

npm login --scope=@tramevio --auth-type=legacy \
  --registry=https://npm.pkg.github.com
npm install @tramevio/gantt@0.1.0-beta.2 \
  --registry=https://npm.pkg.github.com

<script src="./tramevio.global.min.js"></script>

05. Go further

Tramevio is beta software distributed under a proprietary license. Review the terms before using it in your application.