Awesome GitHub RepositoriesInterface Element Highlighting Systems

Driver.js is a browser-based library designed for creating interactive product tours and guided walkthroughs. It provides a framework for building step-by-step instructional sequences that help users navigate complex application interfaces, facilitating onboarding and feature discovery. The library distinguishes itself through its state-driven orchestration, which manages the sequence of steps and transition logic for guided tours. It utilizes a full-screen overlay layer to capture user interactions and isolate specific interface components, employing visual masking techniques to dim surround

This project is a declarative visualization library and geospatial framework designed for rendering large-scale data sets within web browsers. It functions as a high-performance graphics engine that leverages hardware acceleration to display complex 2D and 3D visual layers, enabling the visualization of millions of data points through a structured, component-based syntax. The framework distinguishes itself through its ability to synchronize custom data visualizations with third-party mapping platforms. By managing camera states and coordinate systems, it allows developers to overlay high-perf

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

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

LaVague is an LLM web agent framework and large action model designed to translate natural language instructions into executable browser automation scripts. It functions as a multi-modal orchestrator that reasons over web page states and HTML content to automate multi-step tasks via a Selenium-based automation engine. The framework features a modular model provider layer, allowing users to swap between different language and vision models from providers such as Anthropic, Gemini, and Azure OpenAI. It employs a multi-modal world model to process screenshots and HTML structures, utilizing retri

ShowcaseView ist eine iOS-UI-Overlay-Bibliothek und ein Framework für das User-Onboarding. Es bietet eine anpassbare Feature-Highlight-Komponente, die darauf ausgelegt ist, bestimmte Schaltflächen oder Bereiche einer mobilen Benutzeroberfläche visuell zu isolieren und hervorzuheben. Die Bibliothek ermöglicht die Erstellung interaktiver Produkttouren und In-App-Feature-Discovery, indem sie die Aufmerksamkeit auf spezifische Schnittstellenelemente lenkt. Sie erlaubt die Anpassung des Erscheinungsbilds der Hervorhebungen, einschließlich Farben und Formen, um sie an das visuelle Thema der Anwendung anzupassen. Das Framework verwaltet das User-Onboarding-Erlebnis, indem es UI-Elemente hervorhebt und Benutzer durch eine Sequenz von Schnittstellenkomponenten führt.

TapTargetView ist ein Satz an UI-Komponenten, die für das User-Onboarding und die Feature-Discovery konzipiert sind. Es bietet visuelle Callouts, Fokusindikatoren und Marker, die die Aufmerksamkeit des Benutzers auf spezifische Bildschirmelemente lenken, um neue oder versteckte Funktionen einzuführen. Das System implementiert Material-Design-Richtlinien für seine Feature-Discovery-UI und stellt sicher, dass visuelle Highlights und interaktive Callouts mit standardisierten Designspezifikationen konsistent bleiben. Es unterstützt die Erstellung interaktiver Produkttouren durch das Verketten mehrerer Interaktionspunkte zu einem sequenziellen Pfad. Dies wird durch koordinatenbasierte Positionierung und ein Schichtungssystem erreicht, das sicherstellt, dass Führungselemente über der bestehenden Anwendungsoberfläche sichtbar bleiben.

Instructions ist ein Swift-Framework, das für die Erstellung geführter Touren und User-Onboarding-Erlebnisse entwickelt wurde. Es verwaltet die Sequenz, Animationen und Layouts von Instruktionsblasen und Hervorhebungsmarkern, um Benutzer durch Anwendungsfunktionen zu führen. Die Bibliothek bietet Tools für die UI-Hervorhebung, wobei abgedunkelte Hintergrund-Overlays und präzise Ausschnitte verwendet werden, um die Aufmerksamkeit auf spezifische UI-Elemente zu lenken. Sie enthält Mechanismen für die Ablaufsteuerung von Walkthroughs, die es Entwicklern ermöglichen, den linearen Fortschritt zu verwalten, zu bestimmten Schritten zu springen oder Logik zum Überspringen von Touren zu implementieren. Visuelle Elemente sind durch konfigurierbare Hintergrund-Overlays anpassbar, ebenso wie die Möglichkeit, Standard-Blasenkomponenten durch eigene Views zu ersetzen. Das Framework übernimmt die Layout-Synchronisation, um sicherzustellen, dass Marker und Ausschnittpfade bei Bildschirmgrößenänderungen oder Orientierungswechseln korrekt aktualisiert werden.

bootstrap-tour ist eine Product-Tour-Bibliothek, die entwickelt wurde, um geführte Walkthroughs für Webseiten unter Verwendung des Bootstrap-Frameworks zu erstellen. Es fungiert als interaktives UI-Tool, das eine Sequenz von Popover-Hinweisen verwendet, um spezifische Seitenelemente hervorzuheben und Benutzer durch einen Workflow zu führen. Das System koordiniert geführte Erlebnisse über mehrere Seiten hinweg, indem Tour-Schritte auf eindeutige URLs gemappt werden. Es behält den Benutzerfortschritt durch lokale Speicherpersistenz bei und stellt sicher, dass Touren nach einem Seiten-Refresh am korrekten Schritt fortgesetzt werden. Die Bibliothek enthält programmgesteuerte Kontrollen zum Starten, Pausieren, Fortsetzen oder Überspringen von Schritten und unterstützt automatische, Timer-basierte Übergänge, um die Sequenz ohne manuelle Interaktion voranzutreiben. Visuelle Führung wird durch ein dunkles Backdrop-Overlay bereitgestellt, das Zielelemente vom Rest des Seiteninhalts isoliert.

Dies ist eine Guided-Tour-Bibliothek und ein Onboarding-Framework für React-Anwendungen. Es bietet ein System zur Erstellung interaktiver Schritt-für-Schritt-Anleitungen unter Verwendung von elementverankerten Popovers und visuellen Maskierungstools, um spezifische Schnittstellenkomponenten hervorzuheben. Die Bibliothek konzentriert sich auf Barrierefreiheit und bietet integrierte Unterstützung für Screenreader und Tastaturnavigation, um ein inklusives Benutzer-Onboarding zu gewährleisten. Sie ermöglicht eine umfassende Anpassung durch den Austausch von Standard-Schnittstellenelementen, wie Badges und Buttons, durch benutzerdefinierte React-Komponenten. Das Framework deckt die Tour-Orchestrierung durch Zustandsverwaltung und selektorbasiertes Element-Targeting ab. Es enthält Funktionen für automatisches Viewport-Scrolling, Popover-Übergangsmanagement und die Möglichkeit, die Benutzerinteraktion mit der zugrunde liegenden Schnittstelle während eines Rundgangs einzuschränken.