a walkthrough tour library.

start the walkthrough


const wt = new Walkthrough();
let steps = [] as Array<TutorialStage>;
title: 'feature',
desc: 'feature description . . .',
selector: '.feature'
title: 'feature 2',
desc: 'second feature description . . .',
selector: '.feature',
selectorIndex: 1,
fixPadding: true
desc: 'third feature description . . .',
element: document.getElementById('feature-3'),
fixMargin: true

let options = new TutorialOptions(); // optional
options.identifier = 'my_page_name'; // the walkthrough uniq id
options.maxIdentifier = 1; // the max number of times that this uniq walkthrough will run for this user (default is 1)

wt.setTutorial(steps, options).subscribe(
() => {
alert('Walkthrough Done!');


export class TutorialOptions {
public identifier?: string;
public maxIdentifier?: number;
constructor() {
this.maxIdentifier = 1;


export interface TutorialStage {
title?: string;
desc: string;
selector?: string;
selectorIndex?: number;
element?: HTMLElement;
autoread?: boolean;
fixMargin?: boolean;
fixPadding?: boolean;
top?: string;
left?: string;
onEnter?: Function;
onExit?: Function;

Best Practices:

Isolate the element
Though it's not a must, it's best if the element you want to highlight won't have siblings
Use fixMargin and fixPadding
In cases things aren't looking good in terms of elements overflowing out of the tutorial border try to use fixMargin: true or fixPadding: true
Locate the prompt manually
The prompt location is being determined automatically. You can override this behaviour by adding top: '-50px' and left: '30px'


npm i walkthrough-js --save
include script:
<script type="text/javascript" src="node_modules/walkthrough-js/dist/walkthrough.bundle.js"></script>
or with ES6:
import { Walkthrough } from "walkthrough-js/dist/walkthrough"; import { TutorialStage } from 'walkthrough-js/dist/interface';
initialize component:
const wt = new Walkthrough(); let steps = []; // define steps . . . wt.setTutorial(steps);