Experimental

Syntax highlighting at native speed

@pierre/highlights is a super-fast, lightweight syntax highlighter hand-written in WebAssembly Text. Built especially for @pierre/diffs. Includes built-in language lexers, runs across JavaScript runtimes, and supports Shiki-compatible formats. Generates large-file HTML up to 294× faster than Shiki.

Explore the docs

import { useId, useState, type ReactNode } from "react";

type Status = "open" | "merged" | "closed";
type PullRequest = {
  id: number;
  title: string;
  author: { name: string; avatar?: string };
  status: Status;
  additions: number;
  deletions: number;
};

const statusLabels = {
  open: "Ready for review",
  merged: "Merged",
  closed: "Closed",
} satisfies Record<Status, string>;

/** A searchable review queue with a custom action for each pull request. */
export function ReviewQueue({ items, renderAction }: {
  items: readonly PullRequest[];
  renderAction: (item: PullRequest) => ReactNode;
}) {
  const searchId = useId();
  const [query, setQuery] = useState("");
  const matches = items.filter(({ title, author }) =>
    `${title} ${author.name}`.toLowerCase().includes(query.toLowerCase())
  );

return (
    <section aria-label="Pull requests">
      <label htmlFor={searchId}>Find a review</label>
      <input id={searchId} value={query}
        onChange={(event) => setQuery(event.currentTarget.value)} />
      <ul>
        {matches.map((pr) => (
          <li key={pr.id} className={`review review--${pr.status}`}>
            <a href={`/pull/${pr.id}`}>{pr.title}</a>
            <span>{statusLabels[pr.status]} · {pr.author.name}</span>
            <code>+{pr.additions} / −{pr.deletions}</code>
            {renderAction(pr)}
          </li>
        ))}
      </ul>
      {matches.length === 0 && <p>No reviews match “{query}”.</p>}
    </section>
  );
}

import { useId, useState, type ReactNode } from "react";
type Status = "open" | "merged" | "closed";
type PullRequest = {
  id: number;
  title: string;
  author: { name: string; avatar?: string };
  status: Status;
  additions: number;
  deletions: number;
const statusLabels = {
  open: "Ready for review",
  merged: "Merged",
  closed: "Closed",
} satisfies Record<Status, string>;
/** A searchable review queue with a custom action for each pull request. */
export function ReviewQueue({ items, renderAction }: {
  items: readonly PullRequest[];
  renderAction: (item: PullRequest) => ReactNode;
  const searchId = useId();
  const [query, setQuery] = useState("");
  const matches = items.filter(({ title, author }) =>
    `${title} ${author.name}`.toLowerCase().includes(query.toLowerCase())
    <section aria-label="Pull requests">
      <label htmlFor={searchId}>Find a review</label>
      <input id={searchId} value={query}
        onChange={(event) => setQuery(event.currentTarget.value)} />
        {matches.map((pr) => (
          <li key={pr.id} className={`review review--${pr.status}`}>
            <a href={`/pull/${pr.id}`}>{pr.title}</a>
            <span>{statusLabels[pr.status]} · {pr.author.name}</span>
            <code>+{pr.additions} / −{pr.deletions}</code>
            {renderAction(pr)}
          </li>
        ))}
      </ul>
      {matches.length === 0 && <p>No reviews match “{query}”.</p>}
    </section>

import { useId, useState, type ReactNode } from "react";

type Status = "open" | "merged" | "closed";
type PullRequest = {
  id: number;
  title: string;
  author: { name: string; avatar?: string };
  status: Status;
  additions: number;
  deletions: number;
};

const statusLabels = {
  open: "Ready for review",
  merged: "Merged",
  closed: "Closed",
} satisfies Record<Status, string>;

/** A searchable review queue with a custom action for each pull request. */
export function ReviewQueue({ items, renderAction }: {
  items: readonly PullRequest[];
  renderAction: (item: PullRequest) => ReactNode;
}) {
  const searchId = useId();
  const [query, setQuery] = useState("");
  const matches = items.filter(({ title, author }) =>
    `${title} ${author.name}`.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <section aria-label="Pull requests">
      <label htmlFor={searchId}>Find a review</label>
      <input id={searchId} value={query}
        onChange={(event) => setQuery(event.currentTarget.value)} />
      <ul>
        {matches.map((pr) => (
          <li key={pr.id} className={`review review--${pr.status}`}>
            <a href={`/pull/${pr.id}`}>{pr.title}</a>
            <span>{statusLabels[pr.status]} · {pr.author.name}</span>
            <code>+{pr.additions} / −{pr.deletions}</code>
            {renderAction(pr)}
          </li>
        ))}
      </ul>
      {matches.length === 0 && <p>No reviews match “{query}”.</p>}
    </section>
  );
}

import { useId, useState, type ReactNode } from "react";

type Status = "open" | "merged" | "closed";
type PullRequest = {
  id: number;
  title: string;
  author: { name: string; avatar?: string };
  status: Status;
  additions: number;
  deletions: number;
};

const statusLabels = {
  open: "Ready for review",
  merged: "Merged",
  closed: "Closed",
} satisfies Record<Status, string>;

/** A searchable review queue with a custom action for each pull request. */
export function ReviewQueue({ items, renderAction }: {
  items: readonly PullRequest[];
  renderAction: (item: PullRequest) => ReactNode;
}) {
  const searchId = useId();
  const [query, setQuery] = useState("");
  const matches = items.filter(({ title, author }) =>
    `${title} ${author.name}`.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <section aria-label="Pull requests">
      <label htmlFor={searchId}>Find a review</label>
      <input id={searchId} value={query}
        onChange={(event) => setQuery(event.currentTarget.value)} />
      <ul>
        {matches.map((pr) => (
          <li key={pr.id} className={`review review--${pr.status}`}>
            <a href={`/pull/${pr.id}`}>{pr.title}</a>
            <span>{statusLabels[pr.status]} · {pr.author.name}</span>
            <code>+{pr.additions} / −{pr.deletions}</code>
            {renderAction(pr)}
          </li>
        ))}
      </ul>
      {matches.length === 0 && <p>No reviews match “{query}”.</p>}
    </section>
  );
}

Fast output & lighter footprint

Highlights generates HTML at hundreds of times Shiki’s throughput on large files, with substantially lower peak process memory.

Large-file HTML generation

148–294× Shiki’s throughput across these fixtures. On the 517 KiB TypeScript input, Tree-sitter reaches ≈8× Shiki.

TypeScript517 KiB: 294×

HTML474 KiB: 237×

CSS379 KiB: 248×

JSONC292 KiB: 148×

Peak process memory

Median peak process RSS while generating HTML from the 517 KiB TypeScript fixture, shown on a shared 0–400 MiB scale. Lower is better.

Highlights: 49 MiB
Shiki JS: 155 MiB
Shiki Wasm: 346 MiB

Complete themed tokens

Complete themed token generation reaches 208 MiB/s · 173× Shiki’s throughput on the 517 KiB TypeScript fixture.

Streaming themed tokens

Streaming themed token generation reaches 197 MiB/s · 170× Shiki’s throughput on a large TypeScript fixture.

Live edits

For single-character edits and line insertion or deletion on the TypeScript fixture (517 KiB), the median synchronous response is under 1.4 µs, excluding deferred tokenization.

Measured September 25, 2026 on an Apple M4 Pro (14 cores, 48 GiB RAM) using Bun 1.4.0, Shiki 4.4.1, and tree-sitter-highlight 1.1.2. Median throughput after warmup. Memory measured September 16, 2026 as median peak process RSS from five fresh processes per engine. RSS includes the runtime, compiled code, Wasm, and allocator capacity; it is not live heap or bundle size. Results vary by input and environment. Explore the benchmarks and methodology.

Throughput is relative to Shiki’s 1× baseline; higher is better. Each chart uses its own shared zero-based linear scale.

Supports over 70 languages

Highlights ships its language lexers in one small WebAssembly module. No grammar downloads or language registration. Pick a language and edit the example below to try it yourself.

 * An interface for a point in 2D space.
interface Point {
  x: number;
  y: number;
 * Calculates the distance between two points.
 * @param {Point} a - The first point.
 * @param {Point} b - The second point.
 * @returns The distance between a and b.
function distance(a: Point, b: Point): number {
  const dx = a.x - b.x;
  const dy = a.y - b.y;
  return Math.hypot(dx, dy);
console.log(distance({ x: 0, y: 0 }, { x: 3, y: 4 }));

/**
 * An interface for a point in 2D space.
 */
interface Point {
  x: number;
  y: number;
}

/**
 * Calculates the distance between two points.
 * @param {Point} a - The first point.
 * @param {Point} b - The second point.
 * @returns The distance between a and b.
 */
function distance(a: Point, b: Point): number {
  const dx = a.x - b.x;
  const dy = a.y - b.y;
  return Math.hypot(dx, dy);
}

console.log(distance({ x: 0, y: 0 }, { x: 3, y: 4 }));

/**
 * An interface for a point in 2D space.
 */
interface Point {
  x: number;
  y: number;
}

/**
 * Calculates the distance between two points.
 * @param {Point} a - The first point.
 * @param {Point} b - The second point.
 * @returns The distance between a and b.
 */
function distance(a: Point, b: Point): number {
  const dx = a.x - b.x;
  const dy = a.y - b.y;
  return Math.hypot(dx, dy);
}

console.log(distance({ x: 0, y: 0 }, { x: 3, y: 4 }));

Fast, familiar, and editor-ready.

Native WebAssembly performance, Shiki-compatible output, and incremental tokenization built for editors.

Native performance

One-pass lexers: Hand-written Wasm lexers emit HTML or token records directly, with no AST or grammar runtime.
Linear memory: Source bytes, lexer state, and output live in WebAssembly linear memory, keeping the lexer's working data off the JavaScript heap.
Zero-copy output: codeToHtml() returns a view into WebAssembly memory, ready for a response, file, or decoder.
SIMD scans: Hot paths read 16 bytes per step, and equal styles share spans across whitespace.

Shiki compatibility

Familiar APIs: Use codeToHtml() and codeToTokens() in familiar highlighting workflows.
Themes included: Includes all of Shiki's built-in community themes, plus Pierre's light and dark themes.
Dual themes: Pass themes to render light and dark in one pass, with Shiki's CSS custom properties or light-dark() colors.
Streaming API: StreamTokenizer emits completed lines of themed tokens as code arrives, preserving lexer state across chunks.

Editor friendly

Incremental edits: LiveTokenizer re-tokenizes only lines whose text or lexer state changed.
Visible-range rendering: Bound synchronous work to the viewport while off-screen lines converge in the background.
Precise updates: Every edit reports exactly which lines changed, leaving untouched rows alone.

Start highlighting in seconds

Install @pierre/highlights, then follow the documentation to render HTML, stream tokens, or add live highlighting to an editor.

View the package on GitHub

Documentation

With love from The Pierre Computer Company

Collectively, our team brings over 150 years of expertise designing, building, and scaling the world's largest distributed systems at Cloudflare, Coinbase, Discord, GitHub, Reddit, Stripe, X, and others.

Join Discord View on GitHub