awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
shipshapecode avatar

shipshapecode/shepherd

0
View on GitHub↗
shepherdjs.dev↗

Shepherd

Shepherd is a client-side onboarding framework and interactive product tour library used to create step-by-step guided walkthroughs. It functions as a UI guided tour system and DOM element highlighting tool that displays instructional overlays and tooltips to guide users through a web application interface.

The system features a dynamic layout engine for anchoring tooltips to target elements and preventing screen overflow. It supports multi-element highlighting to draw attention to several UI components simultaneously and includes focus trapping to restrict keyboard navigation to active tour modals.

The framework provides capabilities for tour orchestration, including conditional step triggering based on application state and the persistence of user progress and completion states within the browser. It also includes customizable interaction controls for step buttons and keyboard navigation support.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Features

  • Onboarding and Walkthroughs - Offers a comprehensive framework for building interactive, step-by-step guided tours and user onboarding flows.
  • Interactive Walkthroughs - Provides an interactive system for building step-by-step guided walkthroughs of application workflows.
  • Tour State Management - Coordinates tour progress and instance methods across the application using shared state management.
  • Guided Tour Components - Provides interactive overlays and tooltips that guide users through a UI via a series of steps.
  • Element Highlighting Utilities - Provides visual utilities to isolate and emphasize specific DOM elements during interactive tours.
  • Element Positioning - Updates the coordinate location of tooltips relative to target elements to avoid screen overflow.
  • Floating Element Positioning - Calculates coordinate offsets for tooltips relative to target elements to prevent screen overflow.
  • Onboarding Frameworks - Provides a lightweight framework for managing instructional onboarding sequences for new users.
  • Product Tour Libraries - Provides a comprehensive library for building interactive product tours that highlight specific UI features.
  • Focus Traps - Constrains keyboard navigation to the active tour modal to prevent interaction with background page elements.
  • Multi-Element Highlighting - Provides the ability to highlight several distinct UI components simultaneously to guide user attention during a single instructional step.
  • Keyboard Navigation - Enables advancing or dismissing tour steps via keyboard shortcuts for improved accessibility.
  • Onboarding Progress Tracking - Saves a user's tour completion state locally to prevent repetitive walkthroughs across sessions.
  • Conditional Step Execution - Allows tour steps to be executed only when specific logic or application state requirements are met.
  • Conditional Step Triggers - Allows tour steps to be displayed only when specific function-based triggers are met.
13,741 stars·655 forks·JavaScript·16 views

Star history

Star history chart for shipshapecode/shepherdStar history chart for shipshapecode/shepherd

How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.

Frequently asked questions

What does shipshapecode/shepherd do?

Shepherd is a client-side onboarding framework and interactive product tour library used to create step-by-step guided walkthroughs. It functions as a UI guided tour system and DOM element highlighting tool that displays instructional overlays and tooltips to guide users through a web application interface.

What are the main features of shipshapecode/shepherd?

The main features of shipshapecode/shepherd are: Onboarding and Walkthroughs, Interactive Walkthroughs, Tour State Management, Guided Tour Components, Element Highlighting Utilities, Element Positioning, Floating Element Positioning, Onboarding Frameworks.

Which projects share features with shipshapecode/shepherd?

Projects with overlapping indexed features include: gilbarbara/react-joyride — react-joyride is a user onboarding library for React applications used to create interactive guided tours and… usablica/intro.js — Intro.js is a JavaScript onboarding tour library and web interface guide framework. It functions as an interactive… ephread/instructions — Instructions is a Swift framework designed for creating guided tours and user onboarding experiences. It manages the… linkedinattic/hopscotch — Hopscotch is a guided onboarding framework and JavaScript tour engine designed to create step-by-step user… hubspot/shepherd — Shepherd is an interactive product tour framework and JavaScript onboarding library used to build step-by-step… elrumordelaluz/reactour — This is a guided tour library and onboarding framework for React applications. It provides a system for creating…

Projects sharing features with Shepherd

These projects share indexed features with Shepherd. Shared tags can include platform or build tooling; verify the primary use case before treating a result as a replacement.
  • gilbarbara/react-joyridegilbarbara avatar

    gilbarbara/react-joyride

    7,588View on GitHub↗

    react-joyride is a user onboarding library for React applications used to create interactive guided tours and walkthroughs. It provides a framework for defining sequences of tooltips and beacons that highlight specific user interface elements to introduce users to application features. The library distinguishes itself through a programmatic controller that allows developers to manage tour state, navigation, and lifecycle events via external application logic. It supports a high degree of visual extensibility, allowing the replacement of default tooltips and beacons with custom components to m

    TypeScriptjoyridereactreact-component
    View on GitHub↗7,588
  • usablica/intro.jsusablica avatar

    usablica/intro.js

    23,478View on GitHub↗

    Intro.js is a JavaScript onboarding tour library and web interface guide framework. It functions as an interactive product walkthrough tool that uses tooltips and highlights to explain software features to users. The library enables the creation of guided onboarding tours, interactive product tours, and step-by-step walkthroughs. These tools facilitate software feature discovery and provide application interface guidance to help users navigate layouts. The system manages the user experience through sequenced step orchestration, coordinate-based tooltip positioning, and DOM-based element high

    TypeScript
    View on GitHub↗23,478
  • ephread/instructionsephread avatar

    ephread/Instructions

    5,195View on GitHub↗

    Instructions is a Swift framework designed for creating guided tours and user onboarding experiences. It manages the sequence, animations, and layouts of instructional bubbles and highlighting markers to lead users through application features. The library provides tools for interface highlighting, using dimmed background overlays and precise cutouts to draw attention to specific UI elements. It includes mechanisms for walkthrough flow control, allowing developers to manage linear progression, jump to specific steps, or implement tour skipping logic. Visual elements are customizable through

    Swift
    View on GitHub↗5,195
  • linkedinattic/hopscotchLinkedInAttic avatar

    LinkedInAttic/hopscotch

    4,184View on GitHub↗

    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 to

    JavaScript
    View on GitHub↗4,184
    • Compare all 30 related projects→