Tutorial Designer

What is the Tutorial Designer?

With our new Tutorial Designer, anyone can make a lesson! Our convenient authoring tool lets you write step-by-step instructions linked to a project, to create your own lessons and tutorials in minutes. Your students will find it even easier to learn programming using Tynker. Even students can use the tool, to make tutorials for other students.


Sample Tutorials

Try these tutorials built using the Tutorial Designer:

  • Fun with Spirographs - This tutorial explains how to build Spirograph designs with code. At the end of the tutorial, students have additional prompts to experiment.
  • Build an Arcade Game - This tutorial shows you how to build an arcade shooter game.
Get started building your own lessons in minutes!

Getting Started

Open the project for which you would like to create a tutorial. Select Create Tutorial from the Tools menu. To create your tutorial, add each step as a note. You can toggle between Edit and Preview modes.

Notes and Tutorials

A note is the basic unit in a tutorial. A tutorial is made up of a set of notes that are played back in order. You can also add videos, pictures, links or even record your own voice instructions to each note. You can also link and bookmark code snippets in the project with a note.

Adding and Editing Notes

Simply click "Add Note" to create a new note. You can edit any note by clicking the specific note you wish to edit. Basic text formatting is supported: 3 character sizes, bold and underlined typeface, text color and bullets.


Inserting Images

Use the Image icon to insert images into the note using the Media Library. You can either upload your own images, or use images already provided in the Media Library.

Inserting External Media

You can also create a note with hyperlinks to a picture, a web page or a video using the link command. When a link is clicked a dialog box display the content.

  • Video - Insert the embed link when inserting a Youtube video.
    For example, to insert this video https://www.youtube.com/watch?v=60OVlfAUPJg
    Use the embed link - http://www.youtube.com/embed/60OVlfAUPJg
  • Web Page - Insert a URL to a valid web page.
  • Image - You can also link to any Image link.

In all these cases, when the link is clicked on, a dialog is displayed with the content.

Adding Voice Instructions

You can record audio for each note by using the microphone on your computer.When you click the (microphone) button, the browser will ask you for permission.



Click the "Allow" button to continue. Then, click "Record" and start recording your instructions. When you are done recording, you can test the saved recording and re-record till you are satisfied.

The sound clip will be associated with the note and saved. You can delete that recording and re-record at any time.



When playing the tutorial, students will hear the voice recording each time they view the note.

Adding a User Action

In your tutorial, you may choose to prompt students to add specific code blocks to the project. These instructions are a specific type of text that is highlighted with a yellow background so that students understand the convention that all the yellow notes are steps that they need to perform.
Click on the text type drop down menu (defaults to "Normal") and choose the User Action text type to create this type of note. Drag and drop code snippets into the note as required, to show students what they need to do.


Linking Code Snippets and Actors to Notes

Highlight a snippet of code from the project and drag it on to a note. This creates a link between the note and a code block. When users click on the note in the tutorial, the linked code in the Workshop flashes. You can have multiple links to different code blocks in the same note.
To link an Actor, drag an Actor from the Actor Panel to the note to create a link between the note and the Actor. When the note is viewed, that specific Actor is highlighted.

Saving Tutorials

Students see the lesson along with other lessons on the Classroom page. When students open the lesson, the tutorial runs on the left, and they see steps one at a time. They can switch between a single note view or a list view, and step through the notes. Voice instructions will be automatically played when each note is displayed.


Assigning the Tutorial to a Class

Assign a tutorial to students as a lesson. This is one of the options when you roll-over your cursor on a Project tile under My Projects. You can add a short message to your students. The tutorial will appear as a lesson in their Classroom page.

Student Experience

Students see the lesson along with other lessons on the Classroom page. When students open the lesson, the tutorial runs on the left, and they see steps one at a time. They can switch between a single note view or a list view, and step through the notes. Voice instructions will be automatically played when each note is displayed.

Extending Tutorials

Anyone can make a copy of the project with the tutorial and extend it. For example, once you send the tutorial to a student, the student may add a few more steps to the project and add additional notes. This will be saved in the student's copy of the project with the extended tutorial. Your original tutorial will be untouched.