Timeline JS

Easy-to-make, beautiful timelines.

Make a Timeline

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 functionality.

Tips & tricks

  1. Keep it short. We recommend not having more than 20 slides for a reader to click through.
  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. Write each event as a part of a larger narrative.
  4. 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.

Media sources

TimelineJS can pull in media from a variety of sources.
Twitter, Flickr, Imgur, YouTube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, Document Cloud and more!

Make a Timeline

TimelineJS works on any site or blog. Make your own in four easy steps.

1

Create your spreadsheet

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.

Get the Spreadsheet Template

Note: Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.

2

Publish to the web

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

Publish to 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.

Publish to Web 2

Publish to Web 3

3

Generate your timeline

Copy/paste spreadsheet URL into the box below to generate your timeline. (Make sure you've published the spreadsheet.)

Width
Height
Optional settings (show) (hide)

Set language, fonts, starting slide and more.

Currently all Google's base maps are supported. When creating a Google map, style it the way you would like it to appear, and then paste the resulting link into your Google Spreadsheet.

Begins the timeline on the last slide.
Switches the vertical order of the timeline navigation and the media.
In debug mode, the JavaScript console will display logging messages.
Assigns a hash bookmark to each slide's URL, allowing deep linking to slides.
Slide

You can tell TimelineJS to start at a specific slide number.

Zoom level

The zoom level at which the timeline portion of TimelineJS will display on load. Specify a value from 0-10 (default is 2). Smaller numbers show a greater span of time.

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 Get link to preview

Preview

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").

Examples