27.5KB language-agnostic WebGPU syntax highlighter

Hacker News Top Tools

Summary

gpu-lexer is a WebGPU-based, language-agnostic syntax highlighter that uses a tiny AI model to label code parts without predefined grammars, offering a novel, performance-focused alternative to traditional highlighters.

No content available
Original Article
View Cached Full Text

Cached at: 09/09/26, 03:50 AM

# 27.5KB language-agnostic WebGPU syntax highlighter Source: [https://gpu-lexer.vercel.app/](https://gpu-lexer.vercel.app/) ``` import { highlight } from 'gpu-lexer' const spans = await highlight('source code') // { // type: 'plain' | 'comment' | 'string' | 'number' | 'keyword' | 'type' | 'function' | 'constant' | 'operator' // start: number // end: number // }[] ``` gpu\-lexer splits source code into simple parts—words, whitespace, newlines, and symbols\. Then a tiny WebGPU model combines local and whole\-file context to label each part\. It is designed forany language: instead of choosing a grammar, it guesses each part's type from the surrounding source, even when it never saw that language or syntax during training\. Adjacent labels become the highlight spans returned to your code\. This is anexperiment, not a grammar\-equivalent highlighter\. On files kept out of training,**12\.57%of the current model's token labels differ from Shiki**\. This measures agreement with Shiki—not objective correctness—and unseen languages or real\-world code may differ more often\. **Highlight 10× three\.min\.js**warmed browser time · lower is betterOne browser run after one warm\-up on September 8, 2026\. The input was 10 concatenated copies of[three\.min\.js](https://unpkg.com/[email protected]/build/three.min.js)\(5\.56M characters\)\. MacBook Pro, Apple M4 Pro, 20\-core GPU, 24GB, macOS 26\.6\.2, Chrome 152\. Each engine ran in a dedicated worker; DOM rendering was excluded\. gpu\-lexer and Shiki returned token data, Starry Night returned a HAST tree, while Sugar High, Prism\.js, and Highlight\.js returned highlighted HTML\. Sugar High 2\.3\.1, Prism\.js 1\.30\.0, Highlight\.js 11\.12\.0, Starry Night 3\.11\.0, and Shiki 4\.4\.3\. **Loaded library size**runtime \+ selected language coverage · lower is betterMinified and Brotli\-compressed browser bundles measured on September 8, 2026\. Major web includes javascript, typescript, css, html, json, and markdown\. gpu\-lexer uses the same bundle for every language\. Starry Night totals include its Oniguruma WASM payload\. **Top\-25 weighted correctness**popularity\-weighted agreement with Shiki · higher is betterShiki is the 100% normalization reference\. Each library's token names are mapped to the same nine classes: plain, comment, string, number, keyword, type, function, constant, and operator\. Scores compare non\-whitespace source parts across1,069held\-out files in the[GitHub Innovation Graph](https://innovationgraph.github.com/global-metrics/programming-languages)top 25 for2026\-Q1, weighted by each language's pusher count\. Unsupported languages score zero; corpus size does not affect the weights\. \[ live demos \] 75languages react\.development\.js0 bytes

Similar Articles

Declarative WebGPU with S-expressions

Lobsters Hottest

Pngine is a declarative format and runtime for WebGPU that uses S-expressions to simplify declaring and validating WebGPU configurations, enabling cross-platform sharing and export to formats like HTML or PNG with embedded runtime.

WebGPU Unleashed: A Practical Tutorial

Hacker News Top

A free interactive book teaching graphics programming with WebGPU in JavaScript, covering from basics to advanced topics like GPU compute and Gaussian splatting.