Timeline
TimelineJS
Easy-to-make, beautiful timelines.
Make a Timeline
WOMEN IN COMPUTING
In this sample timeline, we'll walk you through what TimelineJS can do by looking at some of the more important contributions women have made to computer science.
 
Swipe to Navigate
OK
TimelineJS
Ada Lovelace
1800
1780
1790
1810
1820
1830
1840
1850
1860
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, like the one we used for the Timeline above. Experts can use their JSON skills to create custom installations, while keeping TimelineJS's core functionality.
Play video on original page
How to Use TimelineJS
from Northwestern U. Knight Lab
02:37
Knight Lab
Watch this brief video for an overview of how to make a timeline.
Tips & tricks
Keep it short. We recommend not having more than 20 slides for a reader to click through.
Pick stories that have a strong chronological narrative. It does not work well for stories that need to jump around in the timeline.
Write each event as a part of a larger narrative.
Include events that build up to major occurrences — not just the major events.
Media sources
TimelineJS can pull in media from a variety of sources. Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, Document Cloud and more!
Examples
Make a Timeline
TimelineJS works on any site or blog. Make your own in four easy steps.
Having trouble? Watch our video, or see the help section below.
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 "Make a Copy" button.
Drop dates, text and links to media into the appropriate columns. For more about working with our template, see Making a timeline from a Google Spreadsheet
Get the Spreadsheet Template  
Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.
Publish to the web
Under the File menu, select “Publish to the Web.”
Don't set your Timeline Google Sheet to "anyone with the link can edit." It isn't necessary, and could lead to someone changing your timeline without your consent.
In the next window, change the menu that reads "entire document" to "od1." Then, click the blue "publish" button. When asked, "Are you sure…?" click OK. Ignore the URL that appears in the center of the window. Just close the window using the X in the top right corner.
After you close the window, copy the URL in your browser's address bar. You'll use this in the next step.
Generate your timeline
Copy/paste spreadsheet URL into the box below to generate your timeline. (Make sure you've published the spreadsheet.)
Google Spreadsheet URL
Width
Height
Optional settings (show)
Set language, fonts, starting slide and more.
Share your timeline
Share Link
Use this to link directly to your timeline.
If you're embedding on Medium.com or other oembed-aware services, just paste this link on a line by itself where you want your timeline to appear.
Embed
Copy this embed code and paste it on your site where you want your timeline to appear (just like a YouTube video).
Preview
 
Open Preview in a new window  
Help
Need help? First, please be sure to look at our list of frequently asked questions below. If you're brand new to Timeline JS, you may also want to watch our introductory video.
If you don't find an answer there, try our support forums or use our tech support web form. Please be clear with your question, include a link to your spreadsheet, and if appropriate, a link to a page which shows the issue with which you need help. We can only answer support questions in English. We try to be prompt, but please understand that we do not have a dedicated tech support staff.
Find a bug? If you are confident you have found a bug, please report it as a GitHub issue. Be sure to include detailed instructions on how to reproduce the bug. If you're not sure, please start with the tech support system.
Technical documentation
Go further with Timeline:
Frequently asked questions
How do I edit my timeline?
What web browsers does TimelineJS work with?
Some of my slides aren't showing up. Where are they?
What are my options for changing how my Timeline looks?
There aren't enough options. I want more control over the [font size/color/etc]. Can I change things using CSS?
How can I categorize or group my events?
The first slide in my timeline isn't the first chronologically. Why did this happen?
Can I make media images clickable?
How can I format text (add line breaks, bold, italics)?

How do I enter BCE dates?
How do I create very ancient dates?
Who can access the data in my Google spreadsheet?
Privacy is very important to me. How should I use TimelineJS?
Will my spreadsheet get picked up by search engines?
Can I use TimelineJS with Wordpress?

Is TimelineJS free for commercial use?
Storytelling Tools
We build easy-to-use tools that can help you tell better stories.
Timeline
JS
Easy-to-make, beautiful timelines.
StoryMap
JS
Maps that tell stories.
Juxtapose
JS
Easy-to-make frame comparisons.
Soundcite
JS
Seamless inline audio.
View More
The Northwestern University Knight Lab is a team of technologists and journalists working at advancing news media innovation through exploration and experimentation.
(847) 467-4971
1845 SHERIDAN ROAD FISK #109 & #111
EVANSTON, IL 60208
© COPYRIGHT 2021 NORTHWESTERN UNIVERSITY
ProjectsClassDevice LabPostsCommunityAbout
Portrait by Alfred Edward ChalonAda LovelaceCharles Babbage's Analytical Engine