explaingit

nuknightlab/timelinejs

★ 8,938JavaScriptAudience · writerComplexity · 1/5Setup · easy

TLDR

A JavaScript library that turns a Google Spreadsheet or JSON data into an interactive, media-rich timeline you can embed on any website, note: this version is no longer maintained, use TimelineJS3 instead.

Mindmap

mindmap
  root((TimelineJS))
    What it does
      Interactive timelines
      Media-rich slides
      Google Sheets data
    Supported Media
      YouTube videos
      Flickr photos
      Google Maps
      SoundCloud audio
    Use Cases
      Journalism timelines
      Educational history
      Event sequences
    Audience
      Journalists
      Educators
      Publishers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Embed an interactive timeline of historical events on a news or educational website using a Google Spreadsheet as the data source.

USE CASE 2

Display a sequence of events with photos, YouTube videos, and links as navigable slides on a web page.

Tech stack

JavaScriptGoogle Spreadsheets

Getting it running

Difficulty · easy Time to first run · 30min

This version is no longer maintained, new projects should use TimelineJS3 from Knight Lab instead.

In plain English

TimelineJS is a JavaScript library from Northwestern University's Knight Lab for adding interactive, media-rich timelines to websites. The idea is to give journalists, educators, and publishers an easy way to display a sequence of events visually without needing to design anything from scratch. Content can come from a Google Spreadsheet, which means non-technical users can fill in dates and descriptions in a familiar table format and have the timeline update automatically. The library pulls in media from external services automatically. Pasting a YouTube link, a Flickr photo URL, a tweet, a Vimeo video, a SoundCloud track, or a Google Maps embed into the data source causes the timeline to display that content in a formatted card. Users navigate through events as slides, and the library supports dozens of languages for localization, including Arabic, Chinese, French, Russian, Spanish, and many others. Embedding the timeline on a page is straightforward: drop a div element into the HTML, point a configuration object at a data file or spreadsheet, and load a script from the Knight Lab's CDN. A handful of optional settings control the initial zoom level, which slide to start on, whether to use URL hash bookmarks so users can link to a specific event, and which font combination to use. The README notes clearly at the top that this version of TimelineJS is no longer under development. Knight Lab has released a successor called TimelineJS3, which uses a different JSON format. This older version remains available from the Knight Lab CDN but will not receive updates. Developers starting fresh are directed to the newer repository. No conversion tool exists to migrate data from the old JSON format to the new one, though the README describes the process as manageable manually.

Copy-paste prompts

Prompt 1
Show me how to embed a TimelineJS timeline on my HTML page using a Google Spreadsheet with dates and descriptions as the data source.
Prompt 2
How do I add a YouTube video and a Google Maps embed to a slide in a TimelineJS timeline?
Prompt 3
Give me the minimal HTML and JavaScript to get a TimelineJS timeline running with a local JSON data file instead of a Google Spreadsheet.
Open on GitHub → Explain another repo

← nuknightlab on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.