@emboss-js/core

The Tiptap of Gantt charts. Beautiful, extensible, open core.

Install

npm install @emboss-js/core

Quick Start

import { Emboss } from '@emboss-js/core'
import '@emboss-js/core/themes/grayscale.css'

const chart = new Emboss('#gantt', [
  { id: '1', type: 'task', name: 'Research',    start: 0,  duration: 5,  progress: 100, depth: 0, parentId: null, collapsed: false, hidden: false, status: 'done',     dependencies: [] },
  { id: '2', type: 'task', name: 'Design',      start: 5,  duration: 8,  progress: 60,  depth: 0, parentId: null, collapsed: false, hidden: false, status: 'active',   dependencies: ['1'] },
  { id: '3', type: 'task', name: 'Development', start: 13, duration: 15, progress: 0,   depth: 0, parentId: null, collapsed: false, hidden: false, status: 'upcoming', dependencies: ['2'] },
  { id: '4', type: 'milestone', name: 'Launch', start: 28, duration: 0,  progress: 0,   depth: 0, parentId: null, collapsed: false, hidden: false, status: 'upcoming', dependencies: ['3'] },
], { view: 'week' })

Features

Free	Free Extensions	Organize (paid)
Glass-finished bars	Today marker	Dense / working / presentation density
Day / week / month / quarter views	Tooltips	Vivid color theme
Drag to move, resize, adjust progress	Dependency arrows	Sidebar, phase grouping, milestones
Grayscale + dark themes		Inline editing, duration & date columns
Extension system

Views & Density

chart.setView('day')       // day | week | month | quarter
chart.setDensity('dense')  // dense | working | presentation

Themes

Grayscale (default) and Dark are free. Vivid is included with the Organize bundle.

// Grayscale (default)
import '@emboss-js/core/themes/grayscale.css'

// Dark
import '@emboss-js/core/themes/dark.css'
chart.setTheme('dark')

// Vivid (requires Organize license)
import '@emboss-js/core/extensions/organize/vivid.css'
chart.setTheme('vivid')

Extensions

Free

Included in the main package — no license required.

import { todayMarker, tooltips, dependencyArrows } from '@emboss-js/core/extensions/free'

const chart = new Emboss('#gantt', rows, {
  extensions: [todayMarker, tooltips, dependencyArrows],
})

Extension	Description
todayMarker	Vertical line on the current date
tooltips	Hover tooltip with row details
dependencyArrows	SVG arrows between dependent rows

Organize (paid)

One bundle, one license key. Includes sidebar, phases, milestones, inline editing, duration & date columns, density modes, and the Vivid color theme.

import { Emboss, setLicense } from '@emboss-js/core'
import { sidebar, phases, milestones, inlineEdit } from '@emboss-js/core/extensions/organize'
import { columns } from '@emboss-js/core/extensions/columns'

setLicense('your-license-key')

const chart = new Emboss('#gantt', rows, {
  extensions: [sidebar, phases, milestones, inlineEdit, columns],
})

View pricing →

Events

chart.on('onDragEnd', (row, update) => {
  console.log(`${row.name} moved to day ${update.start}`)
  // return false to cancel the update
})

chart.on('onClick', (row, event) => {
  console.log(`Clicked ${row.name}`)
})

See EmbossEvents for the full list of events.

API Reference

Method	Signature	Description
setView	(view: 'day' | 'week' | 'month' | 'quarter') => void	Change the time scale
setDensity	(density: 'dense' | 'working' | 'presentation') => void	Change row spacing
setTheme	(theme: string) => void	Switch CSS theme
toggleCollapse	(rowId: string) => void	Expand/collapse a phase row
updateRow	(rowId: string, changes: Partial<Row>) => void	Update row properties
addRow	(row: Row, afterId?: string) => void	Insert a new row
removeRow	(rowId: string) => void	Delete a row
use	(extension: EmbossExtension) => void	Register an extension at runtime
remove	(name: string) => void	Unregister an extension by name
on	(event: string, handler: Function) => void	Subscribe to an event
emit	(event: string, ...args: any[]) => void | false	Emit an event
render	() => void	Force a re-render
destroy	() => void	Tear down the chart and clean up

Constructor:

new Emboss(selector: string, rows: Row[], config?: EmbossConfig)

See EmbossInstance and EmbossConfig for full type definitions.

License

Dual-licensed:

• MIT — core library, free extensions, grayscale and dark themes. See LICENSE.
• Commercial — Organize bundle (all paid extensions). See LICENSE-COMMERCIAL.md.

Purchase a license →