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.

DyeLight supports both character-level and line-level error highlighting, making it perfect for validation feedback, code linters, and error indicators.

​
Line highlighting for errors

Highlight entire lines to draw attention to errors: 
import { DyeLight, HighlightBuilder } from 'dyelight';
import { useState } from 'react';

function ErrorHighlighter() {
    const [text, setText] = useState('Line 1\nLine 2 with error\nLine 3');

    // Highlight line 1 (0-indexed) with error styling
    const lineHighlights = HighlightBuilder.lines([
        { line: 1, className: 'bg-red-100' },
        { line: 2, color: '#e8f5e8' }, // Or use direct color
    ]);

    return (
        <DyeLight
            value={text}
            onChange={setText}
            lineHighlights={lineHighlights}
        />
    );
}
In this example:
  • Line 1 (“Line 2 with error”) has a red background
  • Line 2 (“Line 3”) has a light green background
  • Line numbers are 0-indexed (first line is 0)
Line highlighting uses the lineHighlights prop, which is separate from the highlights prop used for character-level highlighting.

​
Character-level validation errors

Highlight specific characters to pinpoint validation issues: 
function ValidationEditor() {
    const [email, setEmail] = useState('user@invalid');

    // Find the position of invalid characters
    const invalidChars = HighlightBuilder.pattern(
        email,
        /[^a-zA-Z0-9@._-]/g,  // Invalid email characters
        'bg-red-200 text-red-800'
    );

    // Check for missing domain
    const atIndex = email.indexOf('@');
    const hasDomain = atIndex !== -1 && email.indexOf('.', atIndex) !== -1;
    
    const domainError = !hasDomain ? HighlightBuilder.ranges([
        { 
            start: atIndex + 1, 
            end: email.length, 
            className: 'bg-yellow-200'
        }
    ]) : [];

    return (
        <DyeLight
            value={email}
            onChange={setEmail}
            highlights={[...invalidChars, ...domainError]}
            placeholder="Enter email address"
        />
    );
}

​
Combining line and character highlights

You can use both line-level and character-level highlighting together: 
function CodeValidator() {
    const [code, setCode] = useState('const x = 5;\nconst y = ;\nconst z = 10;');

    // Highlight the line with syntax error
    const errorLines = HighlightBuilder.lines([
        { line: 1, className: 'bg-red-50' }
    ]);

    // Highlight the specific error position (missing value after =)
    const errorPosition = HighlightBuilder.ranges([
        { 
            start: code.indexOf('= ;') + 2,  // Position of the semicolon
            end: code.indexOf('= ;') + 3,
            style: {
                textDecoration: 'underline wavy red',
                backgroundColor: '#ffebee'
            }
        }
    ]);

    return (
        <DyeLight
            value={code}
            onChange={setCode}
            highlights={errorPosition}
            lineHighlights={errorLines}
            className="font-mono"
        />
    );
}

​
Error severity levels

Use different colors for different error severities: 
// Red for critical errors
const critical = HighlightBuilder.lines([
    { line: errorLine, className: 'bg-red-100 border-l-4 border-red-500' }
]);

​
Wavy underlines for errors

Create IDE-style error underlines with CSS: 
function SpellChecker() {
    const [text, setText] = useState('This sentance has a typo');

    // Find misspelled words
    const errors = HighlightBuilder.pattern(
        text,
        /\b(sentance)\b/g,  // Known misspellings
        'error-underline'
    );

    return (
        <>
            <style>{`
                .error-underline {
                    text-decoration: underline wavy red;
                    text-decoration-skip-ink: none;
                }
            `}</style>
            <DyeLight
                value={text}
                onChange={setText}
                highlights={errors}
            />
        </>
    );
}

​
Dynamic validation

Highlight errors as users type: 
function LiveValidator() {
    const [json, setJson] = useState('{"name": "value"');
    const [errors, setErrors] = useState<CharacterRange[]>([]);

    const validateJSON = (text: string) => {
        try {
            JSON.parse(text);
            setErrors([]);
        } catch (e) {
            if (e instanceof SyntaxError) {
                // Highlight the entire input on parse error
                setErrors([{
                    start: 0,
                    end: text.length,
                    className: 'bg-red-50'
                }]);
            }
        }
    };

    const handleChange = (value: string) => {
        setJson(value);
        validateJSON(value);
    };

    return (
        <DyeLight
            value={json}
            onChange={handleChange}
            highlights={errors}
            className="font-mono"
            placeholder='Enter JSON: {"key": "value"}'
        />
    );
}

​
Character highlighting for specific positions

Highlight individual characters for precise error indicators: 
function CharacterHighlighter() {
    const [text, setText] = useState('Hello World');

    // Highlight individual characters
    const characterHighlights = HighlightBuilder.characters([
        { index: 0, className: 'bg-red-200' }, // 'H'
        { index: 6, className: 'bg-blue-200' }, // 'W'
        { index: 10, style: { backgroundColor: 'yellow' } }, // 'd'
    ]);

    return (
        <DyeLight
            value={text}
            onChange={setText}
            highlights={characterHighlights}
        />
    );
}
Remember that line numbers are 0-indexed. The first line is line 0, not line 1.

​
Using color values vs CSS classes

You can use either CSS classes or direct color values: 
const lineHighlights = HighlightBuilder.lines([
    { line: 1, className: 'bg-red-100' },
    { line: 2, className: 'bg-yellow-100' }
]);

​
Example CSS for error styles

.highlight-error {
    background-color: #ffebee;
    color: #c62828;
    text-decoration: underline wavy red;
}

.highlight-warning {
    background-color: #fff3e0;
    color: #e65100;
    text-decoration: underline wavy orange;
}

.highlight-info {
    background-color: #e3f2fd;
    color: #1565c0;
    border-bottom: 2px dotted #1976d2;
}

​
Next steps

Build docs developers (and LLMs) love

Get started for freeTalk to us