No Login Data Private Local Save

Custom Highlight API Demo - Online Highlight Text Programmatically

21
0
0
0
Text Content

The Custom Highlight API is a modern browser feature that allows developers to highlight text programmatically without modifying the DOM structure. This API uses the Highlight object and the CSS.highlights registry to manage highlights efficiently.

Unlike traditional approaches that wrap text in span elements, the Highlight API creates range-based highlights that are rendered natively by the browser. This means better performance for dynamic highlighting scenarios such as search results, syntax highlighting, and collaborative editing.

The API is part of the CSS Highlight API specification and works alongside the ::highlight() pseudo-element. Developers can define multiple highlight groups with different priorities, and the browser handles overlap rendering automatically. Each highlight can have its own styling via the highlight pseudo-element.

Browser support for the Highlight API is growing. Chrome and Edge have supported it since version 105, while other browsers are actively implementing the specification. For applications that need to highlight text in real-time—such as find-in-page features or live search filtering—this API provides a significant performance improvement over DOM-based highlighting.

0 highlight groups 0 total matches ~0 chars
Highlight Controls
Separate multiple terms with commas
Higher = on top when overlapping

No highlight groups yet. Add one above.

Generated Code
// Add a highlight group to see
// the corresponding JavaScript code
Frequently Asked Questions

The Custom Highlight API is a web platform feature that allows developers to highlight ranges of text on a page without modifying the DOM. It uses Highlight objects (collections of Range or StaticRange objects) registered in the CSS.highlights registry. Styling is applied via the ::highlight() CSS pseudo-element. This approach is more performant than wrapping text in <span> elements because it doesn't trigger layout recalculations or mutate the DOM tree.

As of 2025, the Custom Highlight API is supported in Chrome 105+, Edge 105+, Opera 91+, and Samsung Internet 20+. Firefox and Safari have expressed interest and are working on implementation. You can check real-time support on Can I Use. For unsupported browsers, consider providing a fallback using traditional DOM-based highlighting or simply showing a message.

Traditional highlighting wraps matched text in <span> or <mark> elements, which mutates the DOM. This causes layout thrashing, breaks CSS :nth-child selectors, and complicates text selection. The Custom Highlight API renders highlights as an overlay on top of the existing text, leaving the DOM untouched. This preserves event listeners, selection behavior, and avoids performance penalties during frequent updates.

The ::highlight() pseudo-element supports a limited subset of CSS properties: color, background-color, text-decoration (and related properties like text-decoration-color, text-decoration-style), text-shadow, -webkit-text-stroke, and text-emphasis. Properties like border, padding, margin, font-size, and animations are not supported to ensure highlights render efficiently without affecting layout.

Each Highlight object has a priority property (an integer). When multiple highlights overlap on the same text range, the highlight with the higher priority value is painted on top. The default priority is 0. This is useful when you have different types of highlights—for example, search matches (priority 10) should appear above syntax highlights (priority 5), which should appear above spell-check underlines (priority 1).

Yes! A Range can span across multiple text nodes and elements. The Custom Highlight API handles cross-element ranges gracefully, painting the highlight continuously across element boundaries. This is a major advantage over DOM-based approaches, where wrapping text across element boundaries often requires splitting text nodes and restructuring the DOM tree.

Common use cases include: find-in-page functionality, search result highlighting, syntax highlighting in code editors, collaborative editing cursors and selections, spell-check underlines, grammar suggestions, and text annotation tools. Any scenario where you need to visually mark text ranges without altering the underlying document structure benefits from this API.

To remove a specific highlight group, use CSS.highlights.delete('highlight-name'). To clear all highlights, use CSS.highlights.clear(). To update a highlight, simply create a new Highlight object with updated ranges and set it using the same name: CSS.highlights.set('my-highlight', newHighlight). The old highlight is automatically replaced without any DOM manipulation needed.
🔧 Related Tools