app-walkthrough/README.md

An intuitive guided walkthrough library with UI highlighting and voice narration for web apps.

# app-walkthrough

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

```bash
npm install app-walkthrough
```

## Usage

```ts
import { runActionSteps } from "app-walkthrough";
import type { TStepAction } from "app-walkthrough";
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>;
}
```