HacoeurHacoeur

August 13, 2025

hilitetag

HiLiteTag

HiLiteTag is an open-source React component for text highlighting and tagging in complex HTML and Markdown content. It supports custom tags, colors, overlapping highlights, selection, and easy serialization for storage.

Contact :adil@hacoeur.dev

Git :https://github.com/hacoeur-24/HiLiteTag

Links

## About HiLiteTag HiLiteTag is an open-source React component that makes it easy to highlight and tag text within complex HTML and Markdown content. Whether you're building an annotation tool, a document review system, or any application that needs text marking — HiLiteTag handles the complexity for you. ### The Problem Highlighting text in web applications sounds simple, but it quickly becomes challenging when the content contains rich formatting — bold, italic, links, nested elements. Selections that span across multiple HTML nodes break most naive approaches. HiLiteTag was built to solve exactly this, providing a reliable and flexible highlighting experience out of the box. ### How It Works Wrap your content in the HiLiteTag component, define your tags with custom colors and styles, and let your users highlight text naturally. The library takes care of everything — splitting selections across DOM nodes, managing overlapping highlights, and tracking positions accurately. When working with Markdown content, HiLiteTag renders it automatically and tracks tag positions relative to the original source file, making it easy to store and restore annotations. ### Key Features - **Custom Tags & Colors** — Define tags with unique colors, hover effects, and custom styles - **Overlapping Highlights** — Support multiple tags on the same text with nested selection - **Full CRUD Operations** — Create, read, update, and remove tags through a simple API - **Serialization & Restore** — Export all highlights as JSON and restore them later from storage - **Markdown Support** — Highlight text in Markdown content with source-file position tracking - **Smart Selection** — Automatic word boundaries and intelligent handling of cross-node selections ### Built With React and TypeScript. ### Open Source HiLiteTag is fully open source under the MIT license. Contributions, issues, and feedback are welcome on GitHub.