Make a Timeline

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

New!There's a new version of TimelineJS that is now available for beta testing. TimelineJS 3 is a full rewrite designed to make this popular tool more flexible for authors and developers.

Try TimelineJS 3 now »

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

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.

Publish to Web 2

Publish to Web 3

3

Copy/paste spreadsheet URL into the generator box below

Google Spreadsheet URL

Make sure you've published it.

Size

Width

Height

More Options

Customize (Optional)

Language

Map Type

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

Fonts

click to preview font combinations

Misc

Wordpress PluginIs the embed for the Wordpress Plugin? Start at the End?The most recent event will be shown first. Hash BookmarksOn each slide change, a # will be added to the end of the url in the url bar. These urls are bookmarkable so you can share or return to the same place in the timeline DebugIn debug mode, you will see console logs.

Adjust the default calculated zoom level

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

Start at specific slide number?

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

<iframe src='https://cdn.knightlab.com/libs/timeline/latest/embed/?source=0Agl_Dv6iEbDadHdKcHlHcTB5bzhvbF9iTWwyMmJHdkE&font=Bevan-PotanoSans&maptype=toner&width=600&height=600' width='600' height='600' frameborder='0'></iframe>

Preview Link to Preview