RulesEditor

AdGuard Rules Editor is a JavaScript library that gives websites a specialized text editor for writing ad-blocking filter rules — the syntax that tells ad blockers what to block or allow. Instead of typing raw rule strings by hand and hoping the formatting is right, developers can drop this editor into a web app and get syntax highlighting, validation, and a visual interface for composing rules.

The library does three main things. First, it provides a CodeMirror-based editor with syntax highlighting tailored to adblock rule syntax, so keywords, operators, and domains light up in different colors as you type. Second, it offers two tokenizers — tools that break a rule string into labeled segments — so an app can render rules with custom styling. One tokenizer is highly precise but requires loading a WebAssembly module; the other is lighter and runs synchronously without any setup. Third, a RulesBuilder lets developers construct rules programmatically by chaining method calls rather than assembling strings manually — for example, setting a domain, choosing what content types to block, marking the rule as high priority, and getting back a properly formatted rule string.

This would appeal to teams building ad-blocker configuration interfaces, DNS filtering tools, or any web dashboard where users manage filter lists. A product team building a custom ad-blocking product, for instance, could use the editor to let end-users write rules with live highlighting, or use the builder to generate rules behind the scenes from form inputs. The tokenizer could power a React component that displays rules in a styled list.

A practical detail: the editor includes helpers for tracking whether individual rules are enabled or disabled, and it automatically disables syntax highlighting when content exceeds 1,000 lines to keep performance smooth. The project is built in TypeScript and published as an npm package.