Dave Rupert's MicroLighter uses a 2.05 KB core to leave the DOM alone

Why it matters

MicroLighter shows what becomes possible when a browser API crosses the support threshold: a familiar developer tool can shrink to a 2.05 KB core and stop rewriting page markup.

Dave Rupert introduced MicroLighter, a zero-dependency syntax highlighter built around a browser capability that lets developers color code without filling the document with token-level span elements.

The open-source project emerged from a small failure on Rupert's own Jekyll blog. Its syntax highlighting had broken, leaving him to choose again among tools he had used over the years, including Highlight.js, PrismJS, Rouge, and Shiki. Instead, Rupert used the repair job to test how much work the browser could handle itself.

That is familiar territory for Rupert, who formed Austin web design agency Paravel with Trent Walton and Reagan Ray in 2007 and spent years releasing narrowly focused web tools. His project history includes FitText, FitVids, Lettering.js, and the accessibility-focused A11Y Project. In May 2024, Rupert joined Microsoft to work on web components for its Fluent design system.

MicroLighter follows the same small-tool instinct. Its core compressed bundle is 2.05 KB, according to the project's homepage, and the MIT-licensed repository lists no runtime dependencies. Rupert built it to infer a code block's language, load the corresponding grammar, and highlight the tokens. Line numbers, copying controls, and other interface features live in a separate custom element.

Let the browser paint the tokens

Conventional syntax highlighters commonly represent tokens by adding elements and classes around parts of a code sample. MicroLighter keeps the code markup intact. It scans the text, creates ranges for categories such as comments, strings, functions, and keywords, then registers those ranges through CSS.highlights.set().

CSS handles the presentation through selectors such as ::highlight(keyword). The code remains free of the nested token markup that Rupert wanted to avoid.

The timing comes from browser support. The CSS Custom Highlight API reached MDN's Baseline 2025 designation after becoming available across current major browsers in June 2025. That support gives developers a practical platform primitive for styling arbitrary text ranges without changing the page's DOM structure. Older browsers can still pose a compatibility constraint.

MicroLighter also inherits the API's styling limits. Rupert says custom highlights cannot apply italics, bold text, or font changes. That makes the project a trade: cleaner markup and a smaller core in exchange for less typographic control than an HTML-based renderer can provide.

Rupert accepts the limitation because his target is deliberately ordinary. His blog posts may mix HTML, CSS, JavaScript, Bash, Ruby, and Markdown, while each code sample is often around 15 lines. He needed broad language coverage without shipping every parser on every page.

TextMate coverage without the full upfront bill

MicroLighter uses TextMate grammars, the established language definitions used by VS Code and other editors. The project supports web languages, systems languages, application languages, scripting languages, and data and configuration formats, including JavaScript, TypeScript, Python, Rust, Go, SQL, GraphQL, Dockerfile, and Git diff.

Each grammar ships as its own module and loads only when the page uses that language. "That way you only pay for what you use," Rupert wrote in his launch post.

That qualification matters for the 2.05 KB headline figure. It describes the compressed core, while a page's total transfer grows as MicroLighter retrieves the grammars it needs. The project does not publish independent speed or accuracy comparisons against the established highlighters Rupert names. Its case rests on architecture and bundle discipline rather than a benchmark win.

Rupert also collapsed TextMate's detailed scopes into a smaller set of categories intended for humans writing themes: comment, keyword, function, string, constant, property, tag, selector, inserted, and deleted. Theme authors can define light and dark colors together with CSS light-dark(), instead of maintaining two separate theme files.

One core job, with the extras next door

Rupert's strongest product decision was deciding what MicroLighter should refuse to do. "I wanted the syntax highlighter to do one job: infer language and highlight code in that language," he wrote.

Developers who need line numbers or a copy button can add the <micro-lighter> custom element, which Rupert estimates adds roughly 1 KB in the launch post. Shadow DOM keeps those controls separate from the code content, and developers can extend the base class when the supplied interface is too limited.

The package supports a self-initializing bundle, an ESM interface with highlightAll(), and the optional custom element. Installation runs through npm install microlighter.

MicroLighter is a modest release by design: a developer fixing his blog, finding a browser API that had recently become broadly usable, and packaging the result for anyone with the same annoyance. Rupert has spent much of his career turning such annoyances into small public tools. This one makes a straightforward wager that the modern browser can replace another layer of generated markup, provided developers can live within the browser's rules.