This blog introduces TimelineJS, an open-source timeline builder developed by Northwestern University’s Knight Lab. It enables users to create interactive, media-rich timelines with embedded videos, images, and text. Instead of spending extensive time designing the layout and organizing media, users can simply input the relevant information into a Google Spreadsheet, and TimelineJS will automatically generate a well-structured, interactive timeline from that data. This is especially useful in digital-humanities settings, particularly for time-based projects, where a timeline can offer a clean, straightforward view of how events unfold. In this blog, I will provide a step-by-step guide on how to use this powerful tool to create a timeline.
Step-by-Step Walkthrough
Step 1
TimelineJS also offers a web-based version, accessible through this link. After opening the website, click the green “MAKE A TIMELINE” button, which will take you to the section where you can create your timeline.
Step 2
Upon redirection, a blue button labeled “GET THE SPREADSHEET TEMPLATE” will appear. Click it to copy the Google Sheets template for your timeline. When the dialog appears, select the blue “Make a copy” button.
Step 3
Once you have made a copy, start entering your information. Use columns A–S to add your timeline details. Many cells include notes indicating which fields are required and which are optional. As an example, I replaced the default entries with two key events from our group project: the Marco Polo Bridge Incident and the Capture of Nanjing. Note that when adding information to the media column, you must use the correct URL format. For instance, to embed a photo from Wikipedia, ensure the link follows this pattern: “https://en.wikipedia.org/wiki/…#/media/File:…jpg”.
Step 4
When you have finished entering your information, open the “File” menu, choose “Share”, and then click “Publish to the web”. In the box that appears, click the blue “Publish” button and confirm by clicking “OK.” After that, copy the URL shown in the middle of the window.
Step 5
Paste the copied URL into the box labeled “Google Spreadsheet URL.” You can also adjust the Optional Settings to modify the timeline’s size, change fonts, or add music.
Step 6
After making your final adjustments, you can preview your timeline. Click “PREVIEW” or “OPEN PREVIEW IN A NEW WINDOW” to view it on the site. You can also embed the timeline using the generated HTML code below. For illustration, I have embedded my two-event example in this blog.
Further Resources
- If you would like more information on the types of media supported by TimelineJS, you can find detailed guidance at the following link.
- If you prefer not to use the spreadsheet for timeline creation, you can refer to this documentation to learn how to format JSON data and programmatically create or update your timeline.
