Skip to Content
MigrationMigration Guide

🚀 Migration Guide: Intro.js v8

This guide will help you migrate from Intro.js v7 to v8, covering breaking changes, deprecations, and new features.


What’s New in v8

  • Fully modular architecture (with tour() and hint() separated)
  • New tooltipRenderAsHtml option for tour tooltips (default: true)
  • Better accessibility and customization
  • Cleaner lifecycle handling

Breaking Changes

1. introJs() is deprecated

❗ introJs() is deprecated in v8.
Use introJs.tour() or introJs.hint() instead.

Before (v7):

introJs().start();

Now (v8):

introJs.tour().start(); // or for hints introJs.hint().addHints([...]).showHints();

2. tooltipRenderAsHtml (New option in Tour)

Tour tooltips now render HTML by default. If your intro content contains HTML, it will be rendered as HTML automatically.

Default: true

To disable HTML rendering and show content as plain text:

introJs.tour().setOptions({ tooltipRenderAsHtml: false, steps: [ { intro: "<b>This will be shown as plain text</b>" } ] });

🛡 Use caution when injecting user-generated HTML to avoid XSS vulnerabilities.


Removed or Deprecated

  • Deprecated: introJs()
  • Removed legacy internal APIs
  • Removed automatic HTML rendering assumption in older steps

Updated API Design

Featurev7 Syntaxv8 Replacement
Start a tourintroJs().start()introJs.tour().start()
Add hintsintroJs().addHints([...])introJs.hint().addHints([...])
Render HTML in tooltipRendered by defaultNow explicitly controlled with tooltipRenderAsHtml

Migration Steps

  1. Replace introJs() with introJs.tour() or introJs.hint()
  2. Use tooltipRenderAsHtml: false if you want plain text in tooltips
  3. Review any customized tooltip or hint behavior
  4. Test onboarding flows thoroughly

Need Help?

Open an issue or start a discussion on GitHub:
👉 https://github.com/usablica/intro.js 


Happy onboarding with v8! 🎉