Introduction

A lightweight TypeScript React component for highlighting characters in textareas with powerful text annotation capabilities

Welcome to DyeLight

DyeLight is a lightweight TypeScript React component that enables powerful character-level highlighting in textareas. Perfect for building code editors, syntax highlighters, and text annotation tools.

Absolute positioning

Highlight text using simple start/end positions across the entire text

Multi-line support

Highlights automatically span across line breaks

Pattern matching

Built-in support for regex and keyword highlighting

Auto-resize

Automatic textarea height adjustment based on content

TypeScript

Full TypeScript support with comprehensive type definitions

Lightweight

Minimal dependencies, optimized for performance

What makes DyeLight special?

Smart character highlighting

Unlike traditional text editors that require complex DOM manipulation, DyeLight uses a clever overlay approach that keeps your textarea functional while adding visual annotations. You get all the native textarea benefits (accessibility, mobile support, IME) plus powerful highlighting.

Built for modern UI

DyeLight is optimized for integration with Tailwind CSS and UI libraries like shadcn/ui. It supports flexible styling through both className (for the textarea) and containerClassName (for the wrapper), making it easy to achieve modern UI effects like focus rings and shadow depth.

AI-powered debugging

Built-in telemetry system helps diagnose sync issues with AI assistance. Export debug reports and paste them into Claude or ChatGPT for instant diagnosis.

Try it live

Experience DyeLight in action with our interactive demo:

View Live Demo

Next steps

Quick start

Get up and running in minutes

Installation

Install DyeLight in your project