Open Source & MIT Licensed

Beautiful Circular Timelines
for Frontend Developers

The easiest way to create stunning circular timeline visualizations. Zero dependencies, pure JavaScript. Perfect for annual planning, project roadmaps, and cyclical data.

No spam, just updates when we launch v1.0. Unsubscribe anytime.

Thanks! We'll notify you when we launch.
Circalify running on MacBook showing interactive circular timeline visualization with multiple rings displaying quarterly projects, monthly milestones, weekly calendar, and month names

Try It Live

Edit the code and see your changes instantly - no setup required

JavaScript
Live Preview

Why Developers Choose Circalify

Everything you need to create production-ready circular timelines

Zero Dependencies

Pure JavaScript and SVG. No external libraries needed. Just include and start building. Under 10KB gzipped.

Fully Customizable

Complete control over colors, fonts, sizes, and layouts. Simple API that's easy to integrate and configure.

Responsive by Default

Works beautifully on all devices and screen sizes. SVG-based rendering ensures crisp visuals at any resolution.

Framework Agnostic

Works with React, Vue, Angular, Svelte, or vanilla JS. Simple API that integrates with any framework or build tool.

Flexible Time Units

Support for days, weeks, months, quarters, and custom intervals. Visualize any cyclical data pattern.

Performance Focused

Optimized rendering with virtual scrolling for large datasets. Smooth animations and transitions at 60fps.

Frequently Asked Questions

Everything you need to know about Circalify

Yes! Circalify is open source under the MIT license. The core library will always be free to use in personal projects, commercial products, or anywhere else without restrictions.

Every aspect is customizable through configuration options - colors, fonts, sizes, spacing, and more. You can also apply custom CSS classes for complete styling control.

Yes! The MIT license allows unrestricted use in commercial projects. No attribution required (though always appreciated!).

We're currently in beta and adding new features weekly. Sign up to get notified when v1.0 launches with enhanced features, templates, and comprehensive documentation. You'll also get early access to new features and tools as we build them.

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

Ready to Create Beautiful Timelines?

Join developers building amazing circular visualizations with Circalify

Star on GitHub Install from npm