Frappe Gantt: a JavaScript Gantt chart library you embed in your own page

What Frappe Gantt actually renders, and for whom

Frappe Gantt is a JavaScript library that draws a Gantt chart into a DOM element you supply. The README frames the motivation plainly: the team needed a Gantt view for ERPNext and could not find an open source library that looked good enough, so they built one, with the design initially inspired by Google Gantt and DHTMLX. That origin explains the shape of the project. It is a rendering component, not an application. There is no server, no database, no user accounts and no persistence layer. Your code owns the tasks; the library owns the drawing.

The audience follows from that. If you are writing a web front end and a Gantt view is one panel among several, this fits. The README says it can be used "anywhere from hobby projects to tracking the goals of your team at the worksplace", and the fact that ERPNext uses it is the strongest signal about the scale it was built for. If you want a tool that a project manager opens in a browser and edits without a developer present, this is the wrong layer of the stack entirely.

How the task array becomes an SVG timeline

The data model is deliberately small. A task is an object with an id, a name, a start date, an end date and a progress number. The README example uses string dates in YYYY-MM-DD form and a progress value of 20, and the default date_format option is YYYY-MM-DD, so the two line up out of the box. You pass an array of those objects to the Gantt constructor along with a selector for the container.

Rendering is SVG-based; the package keywords list "svg" alongside "gantt" and "interactive gantt". The configuration table exposes the geometry directly: bar_height defaults to 30 pixels, bar_corner_radius to 3, column_width to 45, arrow_curve to 5. Headers are split into an upper and a lower band with their own heights, 45 and 30 pixels by default. That level of exposure tells you the library expects you to tune the chart to fit a layout you already have, rather than shipping one fixed look.

Updates go through a refresh call. The README shows appending to gantt.tasks and then calling gantt.tasks.refresh(), which implies the task collection is a managed structure rather than a raw array you mutate freely. Treat that as the intended write path unless you have read the source. Two options shape the time axis in ways worth noting: infinite_padding, on by default, extends the timeline as the user scrolls, and snap_at, defaulting to 1d, controls the interval tasks snap to while dragging or resizing. Holidays and weekends are handled separately, through a holidays map keyed by CSS colour and an is_weekend predicate that defaults to Saturday and Sunday.

Installing frappe-gantt and drawing a first chart

The README gives npm as the install path. The package publishes an exports map with separate UMD and ES entry points plus a style file, so both a script tag and a bundler import are supported.

npm install frappe-gantt

If you are not using a bundler, the README shows including the UMD build and its stylesheet directly, or pulling both from the jsDelivr CDN at the paths below.

<script src="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.css" />

You need a container element in the page. The README passes a selector string to the constructor, so an empty div with an id is enough. Then construct the chart with your task array.

let tasks = [
  {
    id: '1',
    name: 'Redesign website',
    start: '2016-12-28',
    end: '2016-12-31',
    progress: 20
  }
]
let gantt = new Gantt("#gantt", tasks);

After construction you should see the task bar positioned across the timeline with the progress value reflected on the bar. To change the data afterwards, the README's pattern is to append to gantt.tasks and call refresh.

gantt.tasks.append(...)
gantt.tasks.refresh()

One caveat before you copy this: the README's append line is shown with an ellipsis in place of the argument, and the README does not document the signature of that method. Check src/ for the actual task collection API before relying on it.

Where the documentation runs out

The configuration table is the part of the README that stops short. The ignore option is described as "Ignored areas in the r" and the text is cut off mid-word, so neither the accepted values nor the default can be read from the README as published. Since ignore is the option that pairs with holidays and is_weekend to exclude non-working time from progress calculation, that gap matters: the key feature list promises you can "exclude weekends and other holidays from your tasks' progress calculation", but the option that appears to control it is the one whose documentation is incomplete.

There is a second boundary worth stating. This is a rendering library, so nothing here validates your data. If a task's end date precedes its start date, or an id collides with another, the README says nothing about what happens. There is no documented schema, no error contract, and no mention of rollback or undo for drag and resize operations. If your application lets users move bars, the persistence and the reversal of those moves are your responsibility, and the README does not describe a mechanism for either.

Finally, the release history is thin. The listed releases are v0.8.0 in September 2024 and v1.0.3 in February 2025, while package.json carries version 1.2.2. The version in the manifest is ahead of the most recent release entry listed here, which is worth reconciling before you pin a version.

Frappe Gantt compared with DHTMLX Gantt

The README names DHTMLX as a design influence, which makes it the natural comparison, but the two sit at different points on the build-versus-buy line. Frappe Gantt is MIT licensed, ships as source in the repository, and is installed as a single npm dependency. DHTMLX Gantt is a commercial product with its own licensing terms and a much larger surface area, typically covering the server-side concerns, editing workflows and export features that Frappe Gantt leaves to you.

The practical difference is who supplies the surrounding application. With Frappe Gantt you write the task loading, the save path, the permission checks and the layout around the chart, and in exchange you get a component you can restyle with CSS and read in full. With a commercial Gantt you buy those surrounding pieces and accept the licence. Neither is a better answer in the abstract; the question is whether your team wants to own the integration code. If the Gantt view is a small part of a larger product you are already building, owning it is cheap. If the Gantt view is the product, the calculus changes.

Licence and the cost of keeping up

The repository is MIT licensed, and license.txt sits at the top level alongside README.md and package.json. MIT is permissive: it allows commercial use and modification provided the copyright notice and permission notice are retained. That is a statement about the licence text, not legal advice, and if you redistribute the built dist files inside a product you should read license.txt yourself rather than taking this summary as sufficient.

The maintenance picture is mixed. The repository is not archived, and its last push was on 2026-06-18. The listed releases, however, are sparse: v0.8.0 in September 2024 and v1.0.3 in February 2025, against a package.json version of 1.2.2. That combination suggests work landing on master that is not always matched by published release entries, which makes version pinning awkward. For upgrade cost, the dependency list is small and development-only: eslint, prettier, postcss-nesting and vite. The build is vite-based with a dev script that watches and rebuilds, so a local fork is inexpensive to maintain. The real cost is not the toolchain; it is that you may need to read src/ to answer questions the README leaves open.

Editorial conclusion

Adopt Frappe Gantt if you are building a web application and need a Gantt view that you control at the CSS and JavaScript level, with tasks supplied as a plain array. Do not adopt it if you want a hosted planner, spreadsheet-style editing, or a tool that non-developers can operate without your code around it; Excel, PowerPoint and dedicated Gantt applications cover that ground and this library does not try to. Before committing, verify three things in your own environment: that your task data can be mapped onto the id, name, start, end and progress fields the README shows, that the option you rely on is documented in the configuration table rather than inferred, and that the MIT terms in license.txt match how you intend to redistribute the bundled dist files.

Frequently asked questions

Official sources

1. frappe/gantt on GitHub
2. License: MIT
3. Project website
4. README
5. Releases