meteor-tutorials

What's this do?

Easily create super cool animated tutorials for your Meteor app. This package gives you a dirt easy way to make multi-step tutorials that spotlight multiple parts of your user interface. What a great way to show off how awesome your Meteor app is!

Here's one of my apps. Among other things, it has a list of online users (provided by the user-status package) and a chat room. As users go through the tutorial, which has several steps, the tutorial explains different parts of the user interface to them.

Later on, the chat room is shown:

The awesomeness of this tutorial is that it's completely autogenerated and moves with your code. All you have to do is specify the templates for each step and a selector for what should be spotlighted, and the spotlight and modal positions are computed automatically. This means that you won't have to hardcode anything or do much maintenance when your app changes. Best of all, it's animated and looks great!

Usage

First, specify some templates for your tutorial. Easy as pie:

<template name="tutorial_step1">
    This is step 1 of the tutorial.
</template>

<template name="tutorial_step2">
    This is step 2 of the tutorial.
</template>

Next, define the steps of your tutorial in a helper accessible by whatever template is drawing the tutorial.

tutorialSteps = [
  {
    template: Template.tutorial_step1,
    onLoad: function() { console.log("The tutorial has started!"); }
  },
  {
    template: Template.tutorial_step2,
    spot: ".myElement, .otherElement"
  }
];

Template.foo.options = {
    steps: tutorialSteps,
    onFinish: function() { /* make the tutorial disappear */ }
};

The steps of the tutorial should be an array of objects, which take the following form:

• template: (required) The template that should be displayed in the modal for this step
• spot: (optional) jQuery selector of elements to highlight (can be a single selector or separated by commas). If multiple elements are selected, the tutorial automatically calculates a box that will fit around all of them.
• onLoad: (optional) a function that will run whenever the tutorial hits this step. Helpful if you need to make sure your interface is in a certain state before displaying the tutorial contents.

Now, just call the tutorial helper with your steps from a template whose offset parent is the same size as the body. This is necessary because the tutorial content is absolutely positioned relative to the window.

<template name="foo">
  {{! My cool user interface}}

  {{#if tutorialEnabled}}
    {{tutorial options}}
  {{/if}}
<template>

Enjoy as your users learn how to use your app much quicker!

Examples

• Check out the tutorial for CrowdMapper.
• geekyme has created a demo at http://testtut.meteor.com/

Notes

• I didn't know about it when I conceived this, but this is very similar to intro.js.