Gantt Builder — User Guide

1. Overview

GanttBuilder is a browser-based project schedule tool. No signup, no installation, no server — just open the page and start planning. Your data stays in your browser; nothing is sent anywhere.

Key features

Live preview — chart re-renders as you type
Working-day scheduling — weekends excluded automatically
Predecessor chains — dates auto-adjust when you change a duration
Hierarchical tasks with auto roll-up summary bars
Auto-save via localStorage — survives page refresh
CSV / standalone HTML / PDF export
Zero external dependencies — works offline

2. Quick Start (30 seconds)

Load the sample Click Load Sample in the toolbar. A 24-task "Hot Water Tank Fabrication" example loads automatically so you can see the format.
Edit any cell Click directly in the table cells to change task names, durations, or predecessors. The chart updates instantly.
Set your project info In the Project panel, change the title and project start date to match your own schedule.
Export Click Export HTML to download a single self-contained file — ready to publish on any blog or website.

Tip Your work is saved automatically in your browser. There's no "Save" button — next time you visit the same browser, your tasks are right where you left them.

3. Interface Tour

① Toolbar

Button	Action
Load Sample	Load the built-in 24-task example
⤓ Sample Template (CSV)	Download the sample data as a CSV file — edit in Excel/Sheets and re-import
Load CSV…	Import tasks from a CSV file (see section 12)
Save CSV	Download current tasks as a CSV file (backup)
Export HTML	Download chart as a single self-contained HTML file
Print / PDF	Open browser print dialog (A3 landscape recommended)
Clear All Tasks	Remove all tasks (also clears `localStorage`)
? Help	Open this guide in a new tab

② Project panel

Title — shown at the top of the chart
Project Start — start date for tasks with no predecessor
Current Date — position of the red "today" line in the chart
Header Interval — width of each date-header cell in days (default 3). Larger projects look better with 5–7 days per cell.

③ Tasks editor

Inline-editable table. Each row corresponds to one bar in the chart.

④ Preview

Live render. Horizontally scrollable if the chart is wider than the screen.

4. Editing Tasks

Column	What it is	Example
NO	Auto-numbered. Other tasks reference this NO in their Predecessor field.	1, 2, 3 …
Indent	Hierarchy depth (0–3). Use +/− buttons. See section 5.	0 / 1 / 2 / 3
Task Name	Display name. Any language.	Customer Drawing Approval
Duration	In working days. Leave blank to make a Summary row.	5
Predecessor	NO of the preceding task. See section 6.	`4` or `4,7`
Phase	Visual grouping / color. See section 8.	Drawings / Materials / …

Row actions

↑ ↓ — move row up/down (NOs auto-renumber, predecessors auto-remap)
⎘ — duplicate the row
✕ — delete the row

Note When rows are reordered or deleted, NOs are renumbered and predecessor references are updated. Double-check your dependencies after large reorders.

5. Hierarchy & Summary Rows

The Indent value defines parent/child relationships. Consecutive rows with the same Indent become children of the most recent row with a lower Indent.

Indent 0  Hot Water Tank Fabrication          (project root)
Indent 1    Receive Project Information      (child)
Indent 1    Process Drawings                 (sub-summary)
Indent 2      General Arrangement Drawing    (child of Process Drawings)
Indent 2      Customer Drawing Approval
Indent 1    Materials                        (sub-summary)
Indent 2      Shell Plate Material
...

Creating a summary row

Leave Duration blank. The row will auto-compute its start as the earliest child Start and finish as the latest child Finish.

Summary rows are visually distinct:

Light gray background, bold text in the left table
Slim navy bar with triangular endpoints in the chart
The Duration column shows the rolled-up working-day count

Tip Set Phase to Summary AND leave Duration blank for the clearest result.

6. Dependencies (Predecessor)

Enter the NO of any task that must finish before this one starts. The start date is automatically set to the next working day after the predecessor finishes (Finish-to-Start relationship).

Input formats

Value	Meaning
(blank)	Starts on the project start date
`5`	Starts the next working day after task #5 finishes
`5,8`	Waits for both #5 and #8 (comma-separated, multiple predecessors)
`-`	Same as blank

Supported relationship types

Currently supported: FS (Finish-to-Start) only.

Not supported: SS, FF, SF, lag/lead. For these, insert a small "dummy" task as a workaround.

Auto-arrows Dependencies are rendered as light gray arrows in the chart automatically (skipped for Summary rows, since they aggregate).

7. Working-Day Math

All durations are in working days — Saturday and Sunday excluded.
If a start lands on a weekend, it rolls to the next Monday.
If a predecessor ends on Friday, the successor starts Monday.
Weekends are visually shaded in the chart.

Example

Predecessor finish: 2026-04-23 (Thu)
Start:              2026-04-24 (Fri)
Duration 3 →        4/24 (Fri), 4/27 (Mon), 4/28 (Tue) = finish 2026-04-28
                    ↑ Sat/Sun (4/25, 4/26) skipped automatically

Limitation Public holidays (national / regional) are not auto-skipped. Adjust the duration manually for tasks that span holidays.

8. Phases & Colors

Bar colors come from the Phase value. Seven phases are pre-defined:

Summary

Drawings

Materials

Fabrication

Inspection

PaintTest

Delivery

To change colors, open app.html in a text editor and edit the PHASES object near the top of the script. A custom-color UI is on the roadmap.

9. Save & Load

Auto-save (localStorage)

Your work is saved on every edit (key: gantt-builder-state-v1).
Returning in the same browser restores your last state.
Not synced across browsers or devices — back up with CSV.

CSV backup & restore

Save CSV — download tasks as a CSV file
Load CSV… — import a CSV file

Important Clear or wiping browser data will erase your work. Save important schedules as CSV.

10. Output and Share Your Chart

Print / PDF

Click Print / PDF in the toolbar. The builder UI hides automatically — only the chart prints.

Recommended settings:

Paper: A3 landscape
Margins: minimum
Destination: Save as PDF for digital sharing, or send to a printer

CSV backup

Click Save CSV to back up your task data. Later, click Load CSV… to restore — useful when switching browsers or sharing your schedule with a collaborator.

Embed in your blog

To share an interactive chart on your blog or website, embed this tool as an iframe:

<iframe src="https://aistory.antlog.kr/p/gantt-builder-tool.html"
        width="100%" height="800" loading="lazy"></iframe>

Your readers get the full interactive builder right in your post. See the embedding tutorial on the blog for platform-specific details (Blogger, WordPress, Medium, Notion).

Tip The builder UI is hidden automatically when you print, so the PDF output is clean.

11. Embed in Your Blog

Option 1 — iframe (safest, recommended)

Upload the exported HTML to your host, then add this to a blog post:

<iframe src="gantt.html"
        width="100%"
        height="900"
        style="border:1px solid #DDD; border-radius:8px;"
        loading="lazy">
</iframe>

The iframe is fully isolated from your blog's CSS — no style conflicts.

Option 2 — Inline paste

Open the exported HTML and copy the <div class="gantt-doc">…</div> block plus the <style> tag into your post body.

All CSS is scoped under .gantt-doc so it won't bleed into the rest of your page.

Option 3 — Convert to image

For static placement without interaction:

# Chrome headless
chrome --headless --screenshot=gantt.png \
       --window-size=1800,1200 \
       file:///path/to/gantt.html

# Or use your browser's full-page screenshot tool

Where to host

GitHub Pages — free, push to a public repo and enable Pages
Netlify / Vercel — drag & drop a folder to deploy
S3 / Cloudflare R2 — any static hosting
WordPress / Blogger — upload HTML as a file, then iframe it

Blogger / Medium / Notion

These platforms allow iframe embeds. Switch the editor to HTML mode (Blogger: "HTML view") and paste the iframe code from Option 1.

12. CSV Format

Useful for bulk entry or editing in a spreadsheet.

Column structure

NO,Task,Duration,Predecessor,Phase,Indent

Example

NO,Task,Duration,Predecessor,Phase,Indent
1,Project Summary,,,Summary,0
2,Receive Project Information,1,,Drawings,1
3,Process Drawings,,2,Summary,1
4,General Arrangement Drawing,3,2,Drawings,2
5,Customer Drawing Approval,5,4,Drawings,2

Rules

UTF-8 encoding recommended
Blank Duration = Summary row (auto roll-up)
Blank Predecessor = starts at project start date
Multiple predecessors separated by comma: "5,8"
If a Task name contains a comma, wrap it in quotes: "A, B and C"
Phase must be one of the keys in section 8
Indent is an integer from 0 to 3

Excel / Google Sheets workflow Edit in a spreadsheet → Save as CSV → Load CSV… in the builder. Ideal for team collaboration.

13. FAQ

Where is my data stored?

Entirely in your browser's localStorage. Nothing is sent to any server. We have no backend, no analytics, no tracking.

Is it really free?

Yes. No paid tier. No account. No upsell.

Can I use it offline?

Yes. Save the page to your computer (or use the exported HTML files) — they contain everything needed to run.

Why aren't dependency arrows showing?

Check that:

The Predecessor column has a valid NO
Arrows are skipped for Summary rows (by design)
Very narrow bars can hide the arrowhead — zoom in or widen the cell

How do I handle public holidays?

The current version only excludes Saturdays and Sundays. For national holidays, manually add 1–2 days to the affected task's Duration.

Can multiple people edit at the same time?

Not in real-time — this is a local-only tool. For collaboration, share a CSV via Git, Drive, or Dropbox and edit one at a time.

How do I compare planned vs actual?

Workaround: add suffixes to task names ((Plan) / (Actual)) and enter them as separate rows. Native baseline comparison is on the roadmap.

Does it work on mobile?

It runs, but editing is easier on desktop or tablet. Viewing and sharing work fine on mobile.

How do I move my data to another browser?

Use Save CSV on the old browser and Load CSV… on the new one.

Any keyboard shortcuts?

Standard form navigation only: Tab / Shift+Tab to move between cells, Esc to blur. App-specific shortcuts are planned.

How do I customize colors?

Open app.html in a text editor and modify the PHASES object. For exported files, edit the color values inline.

How do I disable the dependency arrows?

No UI toggle yet. In app.html, comment out the "Dependency arrows" block in the renderChart function.