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.

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

  2. Publish to the web

    Screenshot of Google Sheets showing location of 'Publish to web' menu option Under the File menu, Share submenu, 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.

    Screenshot of Google Sheets 'Publish to the Web' dialog window In the next window, click the green "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.

    If you get an error message referencing an "Invalid Google URL," please review the above instructions. You must use the Google Sheets URL from your browser's address bar, not the one from the "publish to the web" popup.

  3. Generate your timeline

    Copy/paste spreadsheet URL into the box below to generate your timeline. (Make sure you've published the spreadsheet.)

    Optional settings (show) (hide)

    Set language, fonts, starting slide and more.

    Language
    Fonts

    • PT Narrow and PT Serif
    • Abril and Droid Sans
    • Amatic and Andika
    • Bevan and Pontano Sans
    • Bitter and Raleway
    • Clicker and Garamond
    • Dancing and Ledger
    • Fjalla and Average
    • Georgia and Helvetica
    • Lustria and Lato
    • Medula One and Lato
    • Old Standard
    • Open Sans and Gentium Book
    • Playfair and Fauna One
    • Playfair SC and Playfair
    • PT Sans, PT Sans Narrow, and PT Serif
    • Roboto and Megrim
    • Rufina and Sintony
    • Unica One and Vollkorn
    Map Type

    Currently all Google's base maps are supported. When creating a Google map, style it the way you would like it to appear, and then paste the resulting link into your Google Spreadsheet.

    Default start slide

    You can tell TimelineJS to start at a specific slide number.

    Initial zoom level

    The zoom level at which the timeline portion of TimelineJS will display on load. Specify a value from 0-10 (default is 2). Smaller numbers show a greater span of time.

    Misc
  4. 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  

Preview Embed