EZ Timeline JS

A lightweight JavaScript library to create responsive timelines with ease.

How it works

  1. Add script to your HTML
  2. Initialize timeline
  3. Done!

1. Add script to your HTML

Download script or use from CDN:

CDN Link
<script src="https://cdn.jsdelivr.net/npm/ez-timeline-js@1.0.0/ez-timeline.min.js"></script>

2. Initialize Timeline

Setup parent container:

<div id="myTimeline"></div>

Initialize with JavaScript:


                var timeline = new Timeline({
                container: "#myTimeline",
                data: [
                        { date: "2023-01-10", content: "Kickoff meeting..." },
                        { date: "2023-03-15", content: "First prototype completed..." },
                        { date: "2023-06-20", content: "Mid-year review..." },
                        { date: "2023-09-05", content: "User testing begins..." },
                        { date: "2023-12-12", content: "Final adjustments..." },
                        { date: "2024-02-18", content: "Official launch v1.0..." },
                        { date: "2024-05-30", content: "First major update..." },
                        { date: "2024-09-10", content: "Quarterly client review..." },
                        { date: "2025-01-22", content: "New year planning..." },
                        { date: "2025-06-15", content: "Release v2.0 with new UI..." }
                    ]
                });
          

3. Done

Demo of EZ Timeline JS in action