Timeline JS

TimelineJS

Beautifully crafted timelines that are easy and intuitive to use.

Make a timeline now

How it Works

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. Experts can use their JSON skills to create custom installations, while keeping TimelineJS's core look and functionality.

Sources

It can pull in media from a variety of sources and has built-in support for Twitter, Flickr, Google Maps, YouTube, Vimeo, Vine, Dailymotion, Wikipedia, SoundCloud and more.

Tips & tricks

  1. Keep it short, and write each event as a part of a larger narrative.
  2. Pick stories that have a strong chronological narrative. It does not work well for stories that need to jump around in the timeline.
  3. Include events that build up to major occurrences — not just the major events.

Sign up for updates

Get updates, tips and news by email. No Spam.

Stay connected with us on twitter

Make a Timeline

TimelineJS works on any site or blog. Make your own in four easy steps. (video tutorial)

1

Create your spreadsheet

Build a new Google Spreadsheet using our template. Drop dates, text and links to media into the appropriate columns. Note: Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.

Google Spreadsheet Template

2

Publish to the web

Publish to Web

Publish to Web

Under the File menu, select “Publish to the Web.”

In the next window, check “Automatically republish when changes are made.” Uncheck all other boxes. Click “start publishing.” This will give you the URL to embed in your HTML file.

3

Copy/paste spreadsheet URL into the generator box below

Make sure you've published it.

Width
Height

More Options

Customize (Optional)

If you are using a Google map type, please enter your API Key.

click to preview font combinations

This will tweak the default zoom level. Equivilent to pressing the zoom in or zoom out button the specified number of times. Negative numbers zoom out.

Slide

You can tell TimelineJS to start at a specific slide number

4

Embed the code into your website

Grab the embed code and paste it on your site where you want your TimelineJS to appear (just like a YouTube video).



Preview Link to Preview

Preview

Examples

Have you made a timeline? Let us know, and we might feature it here.

Le Monde
Chronology of the french presidential race

Time
Nelson Mandela's Extraordinary Life

VH1
Madonna's Most Controversial Moments

GIGAOM
WWDC in the era of the iPhone

Denver Post: Aurora, Colorado movie theater shooting

Radiolab
Color Walking

ARTE.tv
Comment le progrès nous aura-t-il fait évoluer en l'an 42012 ?

Al Jazeera: Egypt in Turmoil

WBUR: Bulger on Trial

San Antonio Express-News: Money Laundering

History of Electronic & Club Dance Music

Tutorialzine

Marketing transmedia: Prometheus

History of Ghana

Akira Toriyama's World

Spokesman-Review: A History of Hats

Austrian Boy Murdered - www.vol.at

Whitney Houston 1963 - 2012

The Republican Run-Up

Revolutionary User Interfaces

Help

Have a question? Look for it in the FAQ below. No luck there? Try our community support forum. You may also find some answers in the old Google group archive, although it is no longer an active discussion forum.

All modern browsers are supported as well as Internet Explorer 8 and above.

If you run into problems with IE8, IE9 or IE10 and get a error message saying IE7 is not supported, it may be because you are running the browser in IE7 compatibility mode. Here are directions on how to change the compatibility mode.

If you're using a Google Spreadsheet as your source, make sure your Google spreadsheet is public and published. Also make sure you don't have any empty rows in the spreadsheet as this can sometimes cause problems.
Yes, but the photos must be publically available online and the URL must end in .jpg, .png, or .gif. Some users have found that uploading images to Dropbox is an easy and convenient way to give them a URL that’s compatible with TimelineJS.
TimelineJS is optimized for 20-30 entries. If you have more entries, you run a risk of slow load times. Test your timeline to make sure you are satisfied. The best remedy for slow load times may be to edit your timeline to include fewer entries or to create a series of smaller timelines. That said, some publications have built timelines that have hundreds of entries.
You can change the height using the embed tool above. If you need more control, read the Google Groupdiscussion to learn more.
Yes. See here.
You can change the font using the embed tool above. If you’d like to make modifications that aren’t supported by embed tool you’ll need to dig in to the CSS — here's a discussion that includes a few tips.
If this is your end goal it may be easier for you to use a slider tool rather than TimelineJS. Here are a few ways you can remove the timeline bar.

The TimelineJS iFrame embed method is compatible with WordPress. Some WordPress installs require users who want to paste code in to the HTML view to have an editor or administrator status — if you’re having trouble, make sure that you have sufficient permissions.

If you don't have the right permissions, try this plugin for Wordpress.

Thumbnails are only shown from Flickr, Youtube, Vimeo etc. That was done for performance reasons. Having a very large image file as a thumbnail really slows down the timeline. Flickr, Youtube etc have actual thumbnail sized images that can be used that don't cause performance issues. You can also create your own thumbnails.
Yes. See here for a hacking idea.
Yes. See how here.
The display of the timeline is dynamic. It chooses a time interval that best matches the number of events there are with the amount of time that is covered.
Tags are essentially categories. You can have up to 6 of them to categorize events on the timeline. The events on the timeline will align with their category row. See the screenshot below
Not at the moment.
The default number of rows is three. If you are using tags and you have more than three tags, the number of rows increases to six.

If you’re using the TimelineJS Google spreadsheet template, first make sure the cell you want to modify is set to Plain Text — "Format > Number > Plain Text.” Then simply enter the year (e.g. 1994) or month and year (e.g. 7/1979).

Earlier versions of TimelineJS required you to enter a date as January 1 of a given year to do this, but now you should just enter the full year, as explained above.

You can add B.C. dates by using negative years. For example, -100 would be 100 B.C. Be sure to change the formatting of the cell you want to modify to Plain Text — "Format > Number > Plain Text".
No. TimelineJS uses Google's API to access the data from the Google Spreadsheet. If you want to start your work in Excel and then copy and paste your data into a Google spreadsheet, that’ll work but the likelihood of errors increases.
Yes. JSON is the best and safest format for feeding information into TimelineJS from a database. Just use your language of choice to create a json file from your database.
Yes! Just grab a copy of the template and replace the language with the language you want to create. You can find your language's two letter code here. Save the file and post it to the Google Group or you can do a pull request on GitHub.
You can include a link in the text field using the standard HTML for a hyperlink.

About the Project

This project is hosted on GitHub, the largest code host in the world. We encourage you to contribute to the project and we value your feedback. You can report bugs and discuss features on the GitHub issues page, or ask a question on our Google Group

This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/.

Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.