**TimelineSvg** is a lightweight, browser-based system for generating multi-lane timelines as clean, scalable SVG graphics.
It reads simple CSV files, applies a configurable project definition, and renders a fully customizable timeline without requiring any backend or build pipeline.
All processing happens locally in the user’s browser — completely offline and fully private.
---
## **Features**
* **Pure browser execution** — no server, no installation
* **CSV-driven timelines** with customizable field mappings
* **Automatic layout** of months, lanes, and items
* **SVG templates with macros** (`{{MONTHS}}`, `{{LANES}}`)
* **Replaceable CSS and templates at runtime**
* **Internal and external view modes**
* **Offline SVG export** (external view only)
* **Extremely easy to extend or theme**
---
## **How It Works**
TimelineSvg is built around three components:
### **1. `project.json` — The project configuration**
Each project folder provides a `project.json`, defining:
```json
{
"name": "Example Project",
"dataSource": "example/sample.csv",
"stylesheet": "example/style.css",
"svgTemplate": "example/template.svg",
"settings": {
"timelineMonths": 18
},
"fieldMapping": {
"id": "ID",
"title": "Title",
"lane": "Lane",
"due": ["Due"]
}
}
```
This controls:
* data source
* styling
* template structure
* date range
* field mapping between CSV and internal timeline model
### **2. CSV input**
The CSV must contain at least:
* a title
* a date (any common format: `YYYY-MM-DD`, `DD.MM.YYYY`, etc.)
* a lane/group field
Example:
```csv
ID,Title,Due,Lane
1,Implement API,2025-12-01,Backend
2,UI Prototype,2026-02-15,Frontend
```
### **3. Template-based SVG rendering**
TimelineSvg replaces two macros in the template:
*`{{MONTHS}}` → month labels and vertical grid lines
*`{{LANES}}` → lane backgrounds, labels, and items
Example template:
```svg
<svgxmlns="http://www.w3.org/2000/svg">
<rectwidth="100%"height="100%"fill="#FFFFFF"/>
{{MONTHS}}
{{LANES}}
</svg>
```
This makes TimelineSvg highly customizable:
You can recreate any design, layout, or branding using your own SVG template.
---
## **Usage**
### **1. Open the application**
Just open `index.html` in any modern browser (Chrome, Firefox, Safari, Edge).
### **2. Load a project**
You can choose between:
* automatic loading from `project.json` in the project folder
* manual upload of a `project.json` file via the UI
### **3. Preview the timeline**
The timeline renders automatically when the CSV loads and is displayed inside the viewer container.
### **4. Switch views**
* **Internal View:** IDs are visible
* **External View:** IDs are hidden (used for export)
