TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet, like the one we used for the Timeline above. Experts can use their JSON skills to create custom installations, while keeping TimelineJS's core functionality.
TimelineJS can pull in media from a variety of sources.
Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, Document Cloud and more!
TimelineJS works on any site or blog. Make your own in four easy steps.
Having trouble? Watch our video, or see the help section below.
Build a new Google Spreadsheet using our template. You'll need to copy the template to your own Google Drive account by clicking the "Use this template" button.
Drop dates, text and links to media into the appropriate columns. For more about working with our template, see our help docs.
Note: Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.
Under the File menu, select “Publish to the Web.”
In the next window, click the blue "publish" button. When asked, "Are you sure…?" click OK.
Now, copy the URL that appears in the center of the window. You'll use this in the next step.
Grab the embed code and paste it on your site where you want your timeline to appear (just like a YouTube video).
To share your timeline in a Medium.com post, copy the link below and paste it on a line by itself where you'd like the timeline to appear. (learn more)
Preview mode: Desktop Tablet Mobile
Note: In order for TimelineJS to work on responsive web pages, the iframe's width must be proportional (i.e., width="100%") and not absolute (i.e., width="650").
Need help? First, please be sure to look at our list of frequently asked questions below. If you're brand new to TimelineJS, you may also want to watch our introductory video.
If you don't find an answer there, try our support forums or use our tech support web form. Please be clear with your question, include a link to your spreadsheet, and if appropriate, a link to a page which shows the issue with which you need help. We can only answer support questions in English. We try to be prompt, but please understand that we do not have a dedicated tech support staff.
If you are confident you have found a bug, please report it as a GitHub issue. Be sure to include detailed instructions on how to reproduce the bug. If you're not sure, please start with the tech support system.
Go further with Timeline:
How do I enter BCE dates?
To enter dates before the common era, just use a negative value for the year. Of course, you can also enter month and date if you need them.
Who can access the data in my Google spreadsheet?
You must make the data public to the web to use TimelineJS with a Google Spreadsheet as the data source. Normally, the data is still only visible to people who know the link, so if you publish a timeline privately, outsiders are unlikely to see the data. However, it is still public, so you must decide if that is acceptable.
Can I use TimelineJS with Wordpress?
It depends. TimelineJS does not work with Wordpress.com sites. If you have a Wordpress site hosted in another environment, you
should be able to make it work. Please note: there is a Wordpress plugin for Timeline. It
does not work with this version of Timeline. We are working on releasing a new version which supports this version of Timeline. In the meantime, we recommend that you install the
iframe plugin for Wordpress. This plugin addresses the fundamental issue, which is that Wordpress strips
iframe tags from posts for non-administrator users.