Skip to main content

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.

​
Quick start

This guide will help you create your first DyeLight component with character highlighting in just a few steps.
1

Import DyeLight

Start by importing the DyeLight component and HighlightBuilder utility:
import React, { useState } from 'react';
import { DyeLight, HighlightBuilder } from 'dyelight';
2

Create a basic component

Set up a simple controlled component with state:
function MyEditor() {
  const [text, setText] = useState('Hello world\nThis is line 2');

  return (
    <DyeLight
      value={text}
      onChange={setText}
      className="w-full p-2 border rounded"
      rows={4}
    />
  );
}
DyeLight supports both controlled (value + onChange) and uncontrolled (defaultValue) usage, just like native textareas.
3

Add character highlights

Use the HighlightBuilder to create highlights using absolute character positions:
function MyEditor() {
  const [text, setText] = useState('Hello world\nThis is line 2');

  // Highlight characters 0-5 (absolute positions)
  const highlights = HighlightBuilder.ranges([
    { start: 0, end: 5, className: 'bg-yellow-200' },
    { start: 12, end: 24, className: 'bg-blue-200' },
  ]);

  return (
    <DyeLight
      value={text}
      onChange={setText}
      highlights={highlights}
      className="w-full p-2 border rounded"
      rows={4}
    />
  );
}
This will highlight “Hello” (positions 0-5) in yellow and “This is line” (positions 12-24) in blue.
4

Try pattern-based highlighting

For more advanced use cases, use pattern matching to highlight keywords or regex patterns:
function CodeEditor() {
  const [code, setCode] = useState(`function hello() {
const message = "Hello World";
console.log(message);
}`);

  // Highlight JavaScript keywords
  const keywordHighlights = HighlightBuilder.pattern(
    code,
    /\b(function|const|let|var|if|else|for|while)\b/g,
    'text-blue-600 font-semibold'
  );

  // Highlight strings
  const stringHighlights = HighlightBuilder.pattern(
    code,
    /"[^"]*"/g,
    'text-green-600'
  );

  return (
    <DyeLight
      value={code}
      onChange={setCode}
      highlights={[...keywordHighlights, ...stringHighlights]}
      className="font-mono text-sm"
      enableAutoResize
    />
  );
}
The enableAutoResize prop automatically adjusts the textarea height based on content.

​
Common highlighting patterns

Here are some common use cases to get you started:

​
Highlight specific words

const highlights = HighlightBuilder.words(
  text,
  ['TODO', 'FIXME', 'NOTE'],
  'bg-yellow-200 font-bold'
);

​
Highlight individual characters

const highlights = HighlightBuilder.characters([
  { index: 0, className: 'bg-red-200' },
  { index: 5, className: 'bg-blue-200' },
  { index: 10, style: { backgroundColor: 'yellow' } },
]);

​
Highlight entire lines

const lineHighlights = HighlightBuilder.lines([
  { line: 0, className: 'bg-red-100' },
  { line: 2, color: '#e8f5e8' },
]);

<DyeLight
  value={text}
  onChange={setText}
  lineHighlights={lineHighlights}
/>

​
Styling with Tailwind CSS

DyeLight works great with Tailwind CSS. Use containerClassName for outer styling (borders, focus rings) and className for inner styling (padding, typography): 
<DyeLight
  containerClassName="rounded-md border border-input bg-background shadow-sm focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50"
  className="w-full bg-transparent px-3 py-2 text-base outline-none"
  placeholder="Start typing..."
  value={text}
  onChange={setText}
/>

​
Next steps

API reference

Explore all available props and methods

HighlightBuilder

Learn about all highlighting utilities

Advanced features

Discover debugging and performance optimization

Live demo

Try DyeLight in action

Build docs developers (and LLMs) love

Get started for freeTalk to us