# data[].attributes.body
https://www.timetoast.com/timelines/1479148/edit

# data[].attributes.attachment_link.title
The Power of English by Philip and Dennis

# data[].attributes.attachment_link.description
To print the story please do so via the link in the story toolbar.

# data[].attributes.body
https://www.sutori.com/story/my-story-453c

# data[].attributes.body
https://www.sutori.com/story/untitled-c7ac-e8cf

# data[].attributes.body
https://www.sutori.com/story/the-power-of-english

# data[].attributes.attachment_link.description
A Timeline Chart made by Nikolai Fredriksen. Create engaging charts and business graphics with Vizzlo.

# data[].attributes.attachment_link.description
Presentations for the classroom in a unique timeline format. On Sutori, teachers and students create a variety of projects, assignments and portfolios. Perfect for the flipped classroom and collaborative work, Sutori's student-first approach brings the best out of your curriculum and lesson plans.

# data[].attributes.attachment_link.readable_text
Portfolios, unit previews, self-paced courses, digital notebooks, multimedia lessons, timelines... and much more!

For social studies teachers

The structure of timelines, the simplicity of slides.

Inspire curiosity

The perfect format for inquiry-based instructional strategies. Motivate discussion and spark new ideas.

Critical thinking

Upload primary and secondary sources to train students' eyes to analyze and make connections.

Collaboration

Students work together as they address problems and make decisions as a team to reach a common goal.

Perfect for History, Geography and Sociology

For English, Language and Arts teachers

Writing and multimedia assignments have never been better.

Enhance literacy

Rich-editing features make Sutori a valuable companion for continued reading and writing development.

Creativity

Just the right amount of options to see creativity flourish for all types of learners.

Communication

Sutori's visual nature show the breadth of ways to convey ideas and knowledge.

Templates, lesson plans and more!

For STEM teachers

Showing the process of learning

Structured learning

The canvas to organize content. Set up templates for a cohesive learning experience.

Self-reflection

Students demonstrate their approach, outline their learning and reflect along the way.

Engage

Add formative quizzes, polls and any type of media to build fun activities with your students.

Some ready-made lessons to inspire you

Growing in classrooms across the world.

2,359,762Teachers & students

"With a super-simple design and tons of flexible features, this is an appealing and intuitive way for teachers and students to organize and share class content."

Read the review

Sutori 💙 Cares

Education is the key to a better world and we want to play our part in supporting educators.

Check out our ambassador program and the meaningful and impactful learning initiatives Sutori supports.

Learn more

Who we are

We're a tight knit team of three friends (including two brothers) who have come a long way from recreating historical events on Twitter.

Learn more about our story and how we seek to empower educators in their teaching and keep students' data secure.

Learn about us

# data[].attributes.attachment_link.description
Sutori is a collaborative tool for classrooms, ideal for multimedia assignments in Social Studies, English, Language Arts, STEM, and PBL for all ages.

# data[].attributes.headline
Timetoast timeline maker. Make a timeline, tell a story.

# data[].attributes.subject
Timetoast timeline maker. Make a timeline, tell a story.

# data[].attributes.attachment_link.title
Timetoast timeline maker. Make a timeline, tell a story.

# data[].attributes.attachment_link.description
Timetoast's free timeline maker lets you create timelines online. Make educational timelines or create a timeline for your company website. How to make a timeline? Well, it's easy as toast!

# data[].attributes.headline
Timeline JS3 - Beautifully crafted timelines that are easy, and intuitive to use.

# data[].attributes.subject
Timeline JS3 - Beautifully crafted timelines that are easy, and intuitive to use.

# data[].attributes.attachment_link.readable_text
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.

Knight Lab

Watch this brief video for an overview of how to make a timeline.

Tips & tricks

1. Keep it short. We recommend not having more than 20 slides for a reader to click through.

2. Pick stories that have a strong chronological narrative. It does not work well for stories that need to jump around in the timeline.

3. Write each event as a part of a larger narrative.

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

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 our help docs.

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

Under the File menu, select "Publish to the Web."

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

Now, copy the URL that appears in the center of the window. You'll use this in the next step.

The following has changed as of 18 July 2017!

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:
https://docs.google.com/spreadsheets/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/edit#gid=0

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

3. Generate your timeline

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

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

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

There aren't enough options. I want more control over the [font size/color/etc]. Can I change things using CSS?

Because there are so many details to the styling, this is not exactly simple, but, if you have some technical capacity, you can override TimelineJS's CSS rules and have complete control over the look of the timeline. For details, see Using the TimelineJS CSS selectors. You will need to be able to instantiate the Timeline in javascript on your own page. (There is no way to override the CSS using the iframe embed.) Then, either in <style> tags in that page, or in an external stylesheet, you can specify CSS rules changing some or all of TimelineJS's default presentation. The basis of TimelineJS's styles are in these files, which use the Less CSS preprocessor.

The first slide in my timeline isn't the first chronologically. Why did this happen?

When using the Google Spreadsheet to configure your timeline, if you put the word title in the type column, that slide will be put at the front, regardless of the values in the date columns. See the Google Spreadsheet documentation for more information.

How can I format text (add line breaks, bold, italics)?

TimelineJS's text fields (headline, text, caption, and credit) all accept HTML markup. A full tutorial on HTML is outside the scope of this FAQ, but here are a few basics:

Wrap paragraphs in <p></p> tags to create line breaks.

Wrap text in <b></b> tags for bold text and <i></i> for italics

To enter dates before the common era, just use a negative value for the year. Of course, you can also enter month and date if you need them.

Generally, you don't have to think about it -- just enter the dates you want. Timeline can handle dates literally to the beginning of time. For dates more than about 250,000 years ago, only the year is usable. Support for those older dates is still relatively new, so if anything seems off, visit our tech support site.

Privacy is very important to me. How should I use TimelineJS?

If you want complete control over who can see the information in your timeline, you cannot use Google Spreadsheets, and you cannot use our standard iframe embed code. Instead, you must use JSON format for the data and instantiate the timeline directly using javascript. You can then use standard web server security measures to control who has access to your timeline and the data used to create it.

Can I use TimelineJS with Wordpress?

It depends. TimelineJS does not work with Wordpress.com sites. We are researching ways to address this.
If you are able to install plugins to your Wordpress installation, we have a Wordpress plugin for Timeline. It supports embedding Timelines with Wordpress "shortcode", and as of version 3.3.14.0, it also has experimental "oembed" support. That means that you can take a direct URL to a timeline (like you get with the "get link to preview" button) and put it in a post on a line by itself, and it should be embedded. (Make sure you've updated the plugin before you try it.)

Is TimelineJS free for commercial use?

TimelineJS is released under the Mozilla Public License (MPL), version 2.0. That means that TimelineJS is free to "use, reproduce, make available, modify, display, perform, distribute" or otherwise employ. You don't need our permission to publish stories with TimelineJS and you don't need to pay us any fees or arrange any further license beyond the MPL. To read more about what you can do with TimelineJS, read our license page.

Storytelling Tools

We build easy-to-use tools that can help you tell better stories.
View More

# data[].attributes.attachment_link.description
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.