Skip to main content

GQS 201: Introduction to Gender, Queer, and Feminist Studies: TimelineJS

Timeline JS

Timeline JS is an open-source tool that enables anyone to build visually rich, interactive timelines that can be embedded on websites. It is made up of images, text, and headlines using a Google spreadsheet.


Example of Google Spreadsheet

Learning about Timeline JS

Review these links to learn more about how to create a timeline in TimelineJS.


  • TimelineJS does not let you upload an image. You must use a URL of an image with a file extension of jpg, jpeg, gif, or png.  If you are using an iOS device (e.g. iPhone) to take photos, check your camera settings to ensure your photos will be compatible with Timeline JS.  
  • If you want to use more than one image on a timeline slide, create a collage using a free collage generator and save it as an image file. You will need to upload the new image to Google Drive and email Katy to add it to our image page.
  • Anything you put in the display date column will override whatever you enter in the other date columns.
  • When you update a timeline, the changes are automatically made to the published timeline.
  • You can change the slide background by entering a hexadecimal color or adding a link for an image. To find color codes, see this color chart.
  • To create a link within the text, specify the target in the <a href=" ">.Then add the text that should work as a link.Finally add an </a> tag to indicate where the link ends.

Getting Started & Adding Content

To get started in Timeline JS, follow these steps:
  • Sign in to your Google Drive account.
  • Copy the Google Spreadsheet Template from the Timeline JS website (click on the button "make a timeline" and then "get the Spreadsheet Template.")
  • Log in your Google Drive account and click on "make a copy" to make a copy of the template. 
  • Rename the template to reflect the title of your timeline by clicking on the existing title (Copy of TimelineJS Template)
  • Click the "Share" button in the upper right corner and change the access setting to "Anyone on the web can view"
  • When working in pairs or groups, have one person create the spreadsheet and invite the other in the Share settings.


Adding your content:
  • Edit the content of the template with the information that's going to appear in your timeline. Don't change anything in the top row column headings.
  • The first line is the title slide for your timeline.
  • Add the date, headline, text, image link, image credit, image caption, and image thumbnail (this will appear in the timeline below the slide) for each point on your timeline.
  • You will be able to find your archives images on the Media Repository for the course: Each group has a gallery of images on the tab for their section of the course. Use the arrows to click through the gallery until you find the image you want to use. Right click the image to copy the image address and paste this link into the Google spreadsheet to add your image. 
  • Don't edit the column headers in the first row and don't leave any rows blank.
  • When you are done with your timeline, you can publish it.

Publishing Your Timeline

1. Under the File menu on your spreadsheet, select “Publish to the Web.”

In the next window, click the blue "publish" button. When asked, "Are you sure…?" click OK.

Close the 'Publish to the web' window. Copy the URL for your Timeline from the browser's address bar. It should look something like this: 

Disregard the URL that appears in the "publish to the web" window. It used to be used, but changes to Google mean that you'll get an error if you use it now.

2. Preview the link to make sure there's nothing missing. To preview, copy/paste your spreadsheet URL into the box on the Timeline JS website (Step 3) to generate your timeline.

3. When you are done with your timeline, send the embed code (located under Step 4) to Katy and she will post it on our course page. You can still continue to make edits to your spreadsheet. Any changes you make are automatically made to the published timeline.