🔥
ExclusiveAn exclusive new experience — React Native support is on its way to Planby!
React Planner forGantt Charts & Project Timelines
Lightweight Gantt-style planner for project management. Drag tasks, visualize dependencies, track progress—without the bloat.
npm install @nessprim/planbyView Planner DemoWhy Existing Gantt Chart Libraries Are Overkill
DHTMLX Gantt
500KB+ bundle. jQuery dependency. Expensive commercial license. Poor React integration with wrapper components.
Bryntum Gantt
$1000+ per developer. Massive API surface. Designed for desktop PM tools, not web apps.
DevExpress Gantt
Enterprise-only pricing. Bloated component suite. Need simple timeline? You get 50 unused features.
Planby Planner
45KB bundle. Native React. Start free, $400 one-time PRO. Just timeline visualization—no PM software baggage.
Try the React Planner Live
Planner / Gantt Chart
Implement your custom Planner / Gantt feature with drag and drop, grid layout, and flexible time views.
React Planner Use Cases
📊
Project Roadmaps
Sprint planning, release timelines, milestone tracking for agile teams.
🏗️
Construction Planning
Build phases, contractor schedules, dependency chains for construction projects.
🎬
Production Schedules
Film shoots, manufacturing, event production with resource allocation.
🚀
Product Launches
Feature releases, marketing campaigns, cross-team coordination timelines.
What You Get
✅ Timeline Visualization
Horizontal bars showing task duration. Zoom in/out to see weeks or months.
✅ Drag & Drop
Move tasks, resize duration, reorder priorities with mouse or touch.
✅ Resource Grouping
Group tasks by team, phase, or resource. Collapsible sections.
✅ Progress Tracking
Visual progress bars. See completion percentage at a glance.
✅ Lightweight
~45KB. No jQuery. Fast initial load. Smooth 60fps scrolling.
✅ Customizable
Full CSS control. Custom task cards. Adapt to your design system.
React Planner - Quick Start
import { useEpg, Epg, Layout } from '@nessprim/planby-pro';
const {
getEpgProps,
getLayoutProps,
onScrollToNow,
onScrollLeft,
onScrollRight,
} = useEpg({
epg,
channels,
startDate: '2026/02/02', // or 2026-02-02T00:00:00
});
return (
<div>
<div style={{ height: '600px', width: '1200px' }}>
<Epg {...getEpgProps()}>
<Layout
{...getLayoutProps()}
/>
</Epg>
</div>
</div>
);Why Choose Planby?
See how Planby stacks up against other solutions in the market
| Feature | Planby ⭐ Best | FullCalendar | Syncfusion | Custom |
|---|---|---|---|---|
| React-first | ||||
| Easy customization | ||||
| TypeScript support | ||||
| Virtualisation | ||||
| Performance optimized | ||||
| Drag & drop support | ||||
| Regular updates | ||||
| Mobile responsive | ||||
| Setup time | ~10 min | 12 days | 15 days | Months/Years |
⚡ Lightning fast
💰 Most affordable
🎨 Easy customization
Your Perfect Plan Awaits
Built for React and React Native teams. Start with what you need. Grow when you're ready.
Get exclusive access to Planby PRO features
Solo 🥳
$
19
/ month
- Ready-to-use code examples
- 1 developer license
- No team collaboration
- 🎁5 days free trial
- Commercial
PRO
🚀$
25
/ month
- Ready-to-use code examples
- Team access
- Portal Planby access
- PRO Documentation
- Updates included
- 🎁7 days free trial
- Commercial
- License key
Custom 👨💻
Enterprise
- Everything included in PRO
- Enterprise exclusive features
- One-on-one onboarding
- Expert Consultation
- Premium support
- Commercial
Perpetual licenses for your team or company.
Solo 🥳
$
400
- Ready-to-use code examples
- 1 developer license
- No team collaboration
- Commercial
PRO
🚀$
500
- Ready-to-use code examples
- Team access
- Portal Planby access
- PRO Documentation
- Commercial
- License key
- 1 year update license included
Custom 👨💻
Enterprise
- Everything included in PRO
- Enterprise exclusive features 🚀
- One-on-one onboarding
- Expert Consultation
- Premium support
- Commercial
Start Planning Your Projects
React Planner FAQ
Common questions about React Gantt charts and project timeline components.
Is Planby a Gantt chart library for React?
Yes. Planby renders tasks as horizontal bars on a time axis with resource rows — the classic Gantt chart model. ~45KB bundle, native React hooks API, drag & drop (PRO), no jQuery dependency.
How does Planby compare to DHTMLX Gantt?
DHTMLX Gantt has a 500KB+ bundle, jQuery dependency, and expensive commercial licensing. Planby is ~45KB, native React, TypeScript-first, free tier available, PRO is a one-time $400 license — no annual renewal.
Can Planby replace gantt-task-react?
Yes. gantt-task-react lacks virtualization for large datasets and is not actively maintained. Planby offers bidirectional virtualization (10,000+ tasks), TypeScript-first API, drag & drop (PRO), and React Native support.
Does Planby support task dependencies?
Planby provides the visualization layer — task bars, resource rows, drag & drop. Dependency arrows are rendered via custom React components using Planby's layout props, giving full control over how dependencies are displayed.
Is there a free React Gantt chart library?
Yes. Planby has a free tier (npm install @nessprim/planby) suitable for open-source and personal projects. PRO adds drag & drop, advanced timezone handling, and priority support at a one-time $400 per developer.
Can Planby be used for sprint and agile planning?
Yes. Define sprints as channels (resource rows) and tasks as programs (time-ranged events with since/till timestamps). The timeline view visualizes parallel workstreams, overlapping tasks, and milestone timing perfectly.
Related Solutions: