app-walk

app-walk

An intuitive guided walkthrough library for web apps that combines UI component highlighting with voice narration.

✅ Seamlessly guide users through your app step-by-step.
✅ Highlight UI elements visually while narrating instructions.
✅ Fully customizable and easy to integrate.

Features

• Highlight specific UI components to draw user attention.
• Synchronized voice narration to explain each step.
• Easy-to-use API to create multi-step guided tours.
• Supports accessibility and smooth UX flow.

Installation

npm install app-walk

Usage

import { runActionSteps } from "app-walk";
import type { TStepAction } from "app-walk";
import { useNavigate } from "react-router";

const steps: TStepAction[] = [
  {
    element: "#login-form",
    beforeMessage: "Fill in email and password, and click submit.",
    afterMessage: "Done.",
  },
  {
    element: "#profile-menu",
    beforeMessage: "This is your profile menu where you can update settings.",
    afterMessage: "Done.",
  },
];

export default function Demo() {
  const navigate = useNavigate();

  return <button onClick={() => runActionSteps(steps, navigate)}>Start Walkthrough</button>;
}