Documentation Index
Fetch the complete documentation index at: https://mintlify.com/ragaeeb/dyelight/llms.txt
Use this file to discover all available pages before exploring further.
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 bothclassName (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 DemoNext steps
Quick start
Get up and running in minutes
Installation
Install DyeLight in your project