MIT Licensed
⭐ 8 stars on GitHub
📦 Available on npm

JavaScript Library for Circular Timeline Visualizations Build year-at-a-glance timelines in 5 minutes. Zero dependencies, works everywhere.

Why circular? Year-long projects fit in half the space and patterns jump out visually. Linear timelines waste screen real estate and hide cyclical patterns.

Templates sent to your inbox. No spam, unsubscribe anytime.

✓ Check your inbox for your templates!
10 production-ready templates
Real-world examples with actual data
Instant delivery via email
Weekly design tips and examples
Circalify running on MacBook showing interactive circular timeline visualization with multiple rings displaying quarterly projects, monthly milestones, weekly calendar, and month names

Built For Every Timeline

Whether you're planning quarterly goals, launching products, or tracking personal projects

Business Planning

Quarterly roadmaps, annual goals, and strategic milestones. See your entire year at a glance.

Product Launches

Pre-launch planning, go-to-market phases, and post-launch momentum tracking all in one view.

Content Planning

Editorial calendars with publishing schedules, content types, and multi-channel distribution.

Project Management

Multiple projects running in parallel with overlapping phases, dependencies, and milestones.

Academic Planning

Semesters, exam periods, holidays, and assignment deadlines for students and institutions.

Team Coordination

HR cycles, hiring windows, team events, training, and company milestones throughout the year.

Try It Live—No Install Required

Edit the code and watch your timeline update instantly. Interact with the preview, modify values, add rings.

JavaScript
Live Preview

Frequently Asked Questions

Everything you need to know about Circalify

Circular timelines work well when you're visualizing cyclical data—things that repeat annually like quarterly goals, seasonal trends, fiscal calendars, or content schedules. If you find yourself scrolling left and right to see Q4 while planning Q1, circular layouts solve that.

For one-off projects with clear start and end dates (like a product launch timeline or historical events), stick with linear timelines.

About 30 seconds with the CDN. If you're using npm, maybe a minute.

Add a <div> to your HTML, drop in the library, copy one of the examples from the docs, and you're running. The templates are just HTML files you can open and customize directly.

Yes! Circalify is MIT licensed and open source. The entire library is free for personal, commercial, and any other use without restrictions.

Every aspect is customizable—colors, fonts, sizes, spacing, and animations. Use the configuration options or apply custom CSS for complete control.

Absolutely! The MIT license allows unrestricted use in commercial projects. No attribution required, though always appreciated!

Immediately: 10 professional timeline templates as HTML files ready to customize. Includes quarterly planning, product roadmaps, editorial calendars, event planning, HR cycles, academic planners, and more.

Ongoing: Monthly showcases of creative timeline designs and implementation tips to help you build better visualizations. No spam, unsubscribe anytime.

We welcome contributions! Check out our GitHub repository to report issues, submit pull requests, or discuss feature ideas. Star the repo to show your support!

Get Started in 30 Seconds

Install via npm or use the CDN - your choice

NPM Installation 
$ npm install circalify
Or use CDN 
import CircularTimeline from 'https://unpkg.com/circalify@latest/src/index.js';
Basic Usage 
// Create your timeline
const timeline = new CircularTimeline('#timeline', {
  startYear: 2025,
  rings: [
    { type: 'calendar' },
    { type: 'data', name: 'Events' }
  ]
});

// Add your data
timeline.setData([
  { label: 'Launch', startDate: '2025-03-15', endDate: '2025-03-15' }
], 'Events');
MIT Licensed
Zero Dependencies
Framework Agnostic

Get Started

npm install circalify

Download 10 Free Templates ⭐ Star on GitHub