tutorial.js

Library to easily create tutorials for your web application.

Demo

You can find a code demo and a live demo here: code demo live demo.

Please note that you have to build the library before running the demo and run the demo HTML file from a web server. (If you are using VSCode, you can use the Live Server extension.)

Installation

# Clone the repository
git clone <url>

# Install dependencies
npm install

# Build the library
npm run build

Then import the library in your project:

import { Tutorialjs } from '../dist/index.js'

Usage

// Create a new tutorial
const tutorial = new Tutorialjs(steps[], options);
tutorial.start();

Steps

The steps are an array of objects. Each object represents a step of the tutorial.

export interface Step {
    element: string | HTMLElement;
    comment: string;
    option?: StepOptions;
}

export interface StepOptions {
    position?: 'top' | 'left' | 'right' | 'bottom';     // Default: 'bottom'
    fontsize?: string;                                  // Default: '15px'
    fontweight?: string;                                // Default: 'normal'
    gap?: number;                                       // Default: 10
}

Options

The options are an object with the following properties:

export interface Options {
    backgroundColor?: string; // Default: #000000
    textColor?: string; // Default: #FFFFFF
    backgroundOpacity?: number; // Default: 0.5
    textOpacity?: number; // Default: 1
    nextButtonLabel?: string; // Default: Next
    previousButtonLabel?: string; // Default: Previous
};

More

Feel free to contribute to this project by opening issues or pull requests or by giving me feedback.