@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 →