Hack Your Demo: HARlighter – Where Every Session Crafts a Story.

HARlighter is a powerful Chrome extension designed for professionals who need to create clear and concise demonstrations from their web interactions. It allows you to record your browser sessions into HAR (HTTP Archive) files and place customizable placeholder labels for text modifications, ideal for creating tutorials, demonstrations, and presentations.

Key Features

• Web Session Recording: Capture your entire browsing session in a HAR file format.
• Placeholder Labeling: Easily add and edit placeholder labels on recorded text for personalized demonstrations.
• Demo Generation: Transform recorded sessions into interactive and editable demos.
• User-friendly Interface: Simple and intuitive design for a hassle-free recording and editing experience.
• Export and Share: Export your demos in various formats and share them with your team or audience.

Installation

1. Add HARHighlighter to your Chrome browser from the Chrome Web Store.
2. Once installed, you will see the HARHighlighter icon in your browser toolbar.

Getting Started

Recording a Session

1. Click on the HARlighter icon in your Chrome toolbar.
2. Choose 'Start Recording' to begin capturing your browser session.
3. Browse as normal. Every interaction will be recorded.
4. Click 'Stop Recording' when you are done.

Adding Placeholders

1. Open the recorded session from the HARHighlighter dashboard.
2. Click on any text to add or edit a placeholder label.
3. Save your changes.

Generating and Exporting a Demo

1. Select the 'Generate Demo' option in the HARHighlighter dashboard.
2. Customize the demo settings as needed.
3. Export the demo in your desired format.
4. Share your demo via link or download.

Apps and Packages

• mocksi-lite: Chrome extension for Mocksi
• @repo/harlight: Package for building HAR files
• @repo/dodom: DOM manipulation package
• @repo/ui: a stub React component library shared by both web and docs applications
• @repo/eslint-config: eslint configurations (includes eslint-config-next and eslint-config-prettier)
• @repo/typescript-config: tsconfig.jsons used throughout the monorepo

Build

To build all apps and packages, run the following command:

cd my-turborepo
pnpm build

Develop

To develop all apps and packages, run the following command:

cd my-turborepo
pnpm dev

Contributing

We welcome contributions to the HARHighlighter project. If you have suggestions or improvements, please open an issue or submit a pull request.

Support

For support or to report a bug, please open an issue on the GitHub repository.

License