# linkedinattic/hopscotch

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/linkedinattic-hopscotch).**

4,184 stars · 648 forks · JavaScript · apache-2.0 · archived

## Links

- GitHub: https://github.com/LinkedInAttic/hopscotch
- awesome-repositories: https://awesome-repositories.com/repository/linkedinattic-hopscotch.md

## Description

Hopscotch is a guided onboarding framework and JavaScript tour engine designed to create step-by-step user orientations on web pages. It functions as a library for rendering interactive product walkthroughs and tours using configuration files and customizable bubbles and overlays.

The system manages the progression of guided steps and supports the discovery of interactive features by highlighting specific elements of a web interface. It allows for the creation of tailored guided paths through a web application to assist with user onboarding.

The library provides capabilities for modifying tour appearance through custom style sheets and markup templates. It also supports the execution of custom logic by registering callbacks that fire when users reach specific tour milestones.

## Tags

### User Interface & Experience

- [Product Tour Libraries](https://awesome-repositories.com/f/user-interface-experience/product-tour-libraries.md) — Provides a comprehensive library for rendering interactive, multi-step product walkthroughs on web pages. ([source](https://cdn.jsdelivr.net/gh/linkedinattic/hopscotch@master/README.md))
- [Onboarding Frameworks](https://awesome-repositories.com/f/user-interface-experience/onboarding-frameworks.md) — Provides a lightweight framework for creating instructional sequences for new users.
- [Tour Step Orchestrators](https://awesome-repositories.com/f/user-interface-experience/progress-steps/tour-step-orchestrators.md) — Manages the sequential progression and state of guided product tour steps.
- [Configuration-Driven Rendering](https://awesome-repositories.com/f/user-interface-experience/progress-steps/tour-step-orchestrators/configuration-driven-rendering.md) — Generates guided walkthrough steps and sequences by parsing structured configuration files at runtime.
- [Web Application Onboarding](https://awesome-repositories.com/f/user-interface-experience/web-application-onboarding.md) — Guides visitors through web interfaces using interactive overlays to improve the initial user experience.
- [Feature Discovery Tools](https://awesome-repositories.com/f/user-interface-experience/feature-discovery-tools.md) — Highlights specific interface elements to help users discover new tools or settings.
- [Tour Event Hooks](https://awesome-repositories.com/f/user-interface-experience/progress-steps/tour-step-orchestrators/tour-event-hooks.md) — Provides lifecycle callbacks that trigger custom logic during tour transitions. ([source](https://cdn.jsdelivr.net/gh/linkedinattic/hopscotch@master/README.md))
- [Tour Style Customizers](https://awesome-repositories.com/f/user-interface-experience/terminal-user-interfaces/visual-styling-presentation/interface-appearance-customization/component-appearance-customizers/tour-style-customizers.md) — Enables the visual branding and styling of tour bubbles and overlays. ([source](https://cdn.jsdelivr.net/gh/linkedinattic/hopscotch@master/README.md))
- [Tour Event Callbacks](https://awesome-repositories.com/f/user-interface-experience/tour-event-callbacks.md) — Provides a mechanism to execute custom JavaScript logic when users reach specific tour milestones.
- [UI Template Customization](https://awesome-repositories.com/f/user-interface-experience/ui-template-customization.md) — Allows modification of tour bubble layouts and overlays using external style sheets and markup templates.

### Part of an Awesome List

- [Onboarding and Walkthroughs](https://awesome-repositories.com/f/awesome-lists/devtools/onboarding-and-walkthroughs.md) — Enables the creation of guided tours and user onboarding flows to help users learn a product. ([source](http://linkedin.github.io/hopscotch/))
- [Interactive Walkthroughs](https://awesome-repositories.com/f/awesome-lists/devtools/onboarding-and-walkthroughs/interactive-walkthroughs.md) — Creates interactive, step-by-step onboarding sequences with dynamic content.

### Web Development

- [Element Anchoring](https://awesome-repositories.com/f/web-development/dom-element-selectors/element-anchoring.md) — Binds tour bubbles to specific DOM elements using selectors for precise positioning.