initial binary implementation

README.md

···
 - [Error Handling](https://rscexplorer.dev/?s=errors)
 - [Client Reference](https://rscexplorer.dev/?s=clientref)
 - [Bound Actions](https://rscexplorer.dev/?s=bound)
+- [Binary Data](https://rscexplorer.dev/?s=binary)
 - [Kitchen Sink](https://rscexplorer.dev/?s=kitchensink)
 - [CVE-2025-55182](https://rscexplorer.dev/?s=cve)
 
···
 - The Server part runs in a worker.
 - We try to approximate a real RSC environment as much as we can (while staying in browser).
 - No dependencies on React internals. We use `react-server-dom-webpack` and shim the Webpack runtime.
-- No dependencies on the protocol format. We display it, but treat it as an implementation detail of React.
+- Minimal dependencies on the protocol format. We break the stream into rows, but treat them as an implementation detail of React.
 - Only end-to-end tests.
 
 This is fully vibecoded but heavily steered so individual pieces may be weird or suboptimal.

package-lock.json

···
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
       "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/es-object-atoms": {
···
       }
     },
     "node_modules/watchpack": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",
-      "integrity": "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.0.tgz",
+      "integrity": "sha512-e6vZvY6xboSwLz2GD36c16+O/2Z6fKvIf4pOXptw2rY9MVwE/TXc6RGqxD3I3x0a28lwBY7DE+76uTPSsBrrCA==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
···
       }
     },
     "node_modules/webpack": {
-      "version": "5.103.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.103.0.tgz",
-      "integrity": "sha512-HU1JOuV1OavsZ+mfigY0j8d1TgQgbZ6M+J75zDkpEAwYeXjWSqrGJtgnPblJjd/mAyTNQ7ygw0MiKOn6etz8yw==",
+      "version": "5.104.1",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.104.1.tgz",
+      "integrity": "sha512-Qphch25abbMNtekmEGJmeRUhLDbe+QfiWTiqpKYkpCOWY64v9eyl+KRRLmqOFA2AvKPpc9DC6+u2n76tQLBoaA==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
···
         "@webassemblyjs/wasm-parser": "^1.14.1",
         "acorn": "^8.15.0",
         "acorn-import-phases": "^1.0.3",
-        "browserslist": "^4.26.3",
+        "browserslist": "^4.28.1",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.17.3",
-        "es-module-lexer": "^1.2.1",
+        "enhanced-resolve": "^5.17.4",
+        "es-module-lexer": "^2.0.0",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
         "glob-to-regexp": "^0.4.1",
···
         "neo-async": "^2.6.2",
         "schema-utils": "^4.3.3",
         "tapable": "^2.3.0",
-        "terser-webpack-plugin": "^5.3.11",
+        "terser-webpack-plugin": "^5.3.16",
         "watchpack": "^2.4.4",
         "webpack-sources": "^3.3.3"
       },
···
       "engines": {
         "node": ">=10.13.0"
       }
+    },
+    "node_modules/webpack/node_modules/es-module-lexer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
+      "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/which": {
       "version": "2.0.2",

scripts/build-version.js

···
 
 const REACT_PACKAGES = ["react", "react-dom", "react-server-dom-webpack"];
 
-function run(cmd, opts = {}) {
+function run(cmd) {
   console.log(`\n> ${cmd}`);
-  execSync(cmd, { stdio: "inherit", ...opts });
+  execSync(cmd, { stdio: "inherit" });
 }
 
 function getLatestVersion() {
···
   run(`npm install ${packages} --no-save`);
 }
 
+function testVersion(version) {
+  console.log(`\n--- Running tests for React ${version} ---`);
+  run("npm test");
+}
+
 function buildForVersion(version, outDir) {
   console.log(`\n========================================`);
   console.log(`Building React ${version} (dev + prod) → ${outDir || `dist/${version}`}`);
   console.log(`========================================`);
 
   installReactVersion(version);
+  testVersion(version);
 
   const dir = outDir || `dist/${version}`;
   // Base path for assets (e.g., /19.1.0/ or / for root)

src/client/runtime/flight-parser.ts

···
+// React Flight Protocol Row Parser
+//
+// This is a framing parser that splits the RSC byte stream into discrete rows.
+// It does NOT interpret row contents, it only determines row boundaries.
+// (We want to keep knowledge of implementation details as little as possible.)
+//
+// Two framing modes based on tag byte after "ID:":
+//   - Binary framing: ID:TAG + HEX_LENGTH + "," + BINARY_DATA (no terminator)
+//   - Text framing:   ID:TAG + DATA + "\n" (newline terminated)
+//
+// The parser must know which tags use binary framing to correctly find row
+// boundaries. If a binary tag is missing from BINARY_TAGS, the parser will
+// treat it as text, scan for newline, and corrupt subsequent parsing.
+
+// Check if byte is a hex digit (0-9, a-f, A-F)
+function isHexDigit(b: number): boolean {
+  return (b >= 0x30 && b <= 0x39) || (b >= 0x61 && b <= 0x66) || (b >= 0x41 && b <= 0x46);
+}
+
+// Parse hex digit to value (0-15)
+function hexValue(b: number): number {
+  if (b >= 0x30 && b <= 0x39) return b - 0x30; // 0-9
+  if (b >= 0x61 && b <= 0x66) return b - 0x57; // a-f
+  return b - 0x37; // A-F
+}
+
+// Tags that use binary (length-prefixed) framing
+const BINARY_TAGS = new Set([
+  0x54, // T - long text
+  0x41, // A - ArrayBuffer
+  0x4f, // O - Int8Array
+  0x6f, // o - Uint8Array
+  0x55, // U - Uint8ClampedArray
+  0x53, // S - Int16Array
+  0x73, // s - Uint16Array
+  0x4c, // L - Int32Array
+  0x6c, // l - Uint32Array
+  0x47, // G - Float32Array
+  0x67, // g - Float64Array
+  0x4d, // M - BigInt64Array
+  0x6d, // m - BigUint64Array
+  0x56, // V - DataView
+  0x62, // b - byte stream chunk
+]);
+
+export type RowSegment = { type: "text" | "binary"; data: Uint8Array };
+
+export interface ParsedRow {
+  id: string;
+  segment: RowSegment;
+  raw: Uint8Array;
+}
+
+export interface ParseResult {
+  rows: ParsedRow[];
+  remainder: Uint8Array;
+}
+
+export function parseRows(buffer: Uint8Array, final: boolean = false): ParseResult {
+  const rows: ParsedRow[] = [];
+  let i = 0;
+
+  while (i < buffer.length) {
+    const rowStart = i;
+
+    // Row ID: hex digits until ':'
+    while (i < buffer.length && buffer[i] !== 0x3a) {
+      const b = buffer[i]!;
+      if (!isHexDigit(b)) {
+        throw new Error(`Expected hex digit in row ID, got 0x${b.toString(16)}`);
+      }
+      i++;
+    }
+    if (i >= buffer.length) {
+      if (final) {
+        throw new Error(`Truncated row ID at end of stream`);
+      }
+      return { rows, remainder: buffer.slice(rowStart) };
+    }
+
+    const id = decodeAscii(buffer, rowStart, i);
+    // buffer[i] is guaranteed to be colon here (while loop exit condition)
+    i++;
+
+    if (i >= buffer.length) {
+      if (final) {
+        throw new Error(`Row ${id} truncated after colon`);
+      }
+      return { rows, remainder: buffer.slice(rowStart) };
+    }
+
+    const tag = buffer[i]!;
+
+    if (BINARY_TAGS.has(tag)) {
+      // Binary framing: TAG + HEX_LENGTH + "," + DATA
+      i++;
+
+      let length = 0;
+      while (i < buffer.length && buffer[i] !== 0x2c) {
+        const b = buffer[i]!;
+        if (!isHexDigit(b)) {
+          throw new Error(
+            `Expected hex digit in binary length for row ${id}, got 0x${b.toString(16)}`,
+          );
+        }
+        length = (length << 4) | hexValue(b);
+        i++;
+      }
+
+      if (i >= buffer.length) {
+        if (final) {
+          throw new Error(`Row ${id} truncated in binary length`);
+        }
+        return { rows, remainder: buffer.slice(rowStart) };
+      }
+      // buffer[i] is guaranteed to be comma here (while loop exit condition)
+      i++;
+
+      if (i + length > buffer.length) {
+        if (final) {
+          throw new Error(
+            `Row ${id} truncated in binary data (need ${length} bytes, have ${buffer.length - i})`,
+          );
+        }
+        return { rows, remainder: buffer.slice(rowStart) };
+      }
+
+      const data = buffer.slice(i, i + length);
+      const raw = buffer.slice(rowStart, i + length);
+      rows.push({ id, segment: { type: "binary", data }, raw });
+      i += length;
+    } else {
+      // Text framing: scan for newline
+      const contentStart = i + 1; // after the tag byte
+      while (i < buffer.length && buffer[i] !== 0x0a) {
+        i++;
+      }
+
+      if (i >= buffer.length) {
+        if (!final) {
+          // Incomplete row, wait for more data
+          return { rows, remainder: buffer.slice(rowStart) };
+        }
+        throw new Error(`Text row ${id} missing trailing newline at end of stream`);
+      } else {
+        const data = buffer.slice(contentStart, i);
+        const raw = buffer.slice(rowStart, i + 1);
+        rows.push({ id, segment: { type: "text", data }, raw });
+        i++;
+      }
+    }
+  }
+
+  return { rows, remainder: new Uint8Array(0) };
+}
+
+function decodeAscii(buffer: Uint8Array, start: number, end: number): string {
+  let s = "";
+  for (let i = start; i < end; i++) {
+    s += String.fromCharCode(buffer[i]!);
+  }
+  return s;
+}

src/client/runtime/index.ts

···
   type Thenable,
   type CallServerCallback,
 } from "./steppable-stream.ts";
-export { Timeline, type EntryView, type TimelineSnapshot } from "./timeline.ts";
+export { Timeline, type EntryView, type RowView, type TimelineSnapshot } from "./timeline.ts";
+export { parseRows, type ParsedRow, type ParseResult, type RowSegment } from "./flight-parser.ts";

src/client/runtime/steppable-stream.ts

···
   createFromReadableStream,
   type CallServerCallback as ImportedCallServerCallback,
 } from "react-server-dom-webpack/client";
+import { parseRows, type ParsedRow } from "./flight-parser.ts";
 
 export type CallServerCallback = ImportedCallServerCallback;
 
···
 }
 
 const noop = () => {};
-const encoder = new TextEncoder();
+
+function wrapParseError(err: unknown): Error {
+  const msg = err instanceof Error ? err.message : String(err);
+  return new Error(`RSC Explorer could not parse the React output into rows: ${msg}`);
+}
+
+interface Row {
+  display: string;
+  bytes: Uint8Array;
+  hexStart: number;
+}
 
 export class SteppableStream {
-  rows: string[] = [];
+  rows: Row[] = [];
   done = false;
   error: Error | null = null;
   flightPromise: Thenable<unknown>;
···
   private closed = false;
   private yieldIndex = 0;
   private ping = noop;
+  private decoder = new TextDecoder("utf-8", { fatal: false });
 
   constructor(source: ReadableStream<Uint8Array>, options: SteppableStreamOptions = {}) {
     const { callServer } = options;
···
     if (this.closed) return;
 
     while (this.releasedCount < count && this.releasedCount < this.rows.length) {
-      this.controller.enqueue(encoder.encode(this.rows[this.releasedCount]! + "\n"));
+      this.controller.enqueue(this.rows[this.releasedCount]!.bytes);
       this.releasedCount++;
     }
 
···
   async *[Symbol.asyncIterator](): AsyncGenerator<string> {
     while (true) {
       while (this.yieldIndex < this.rows.length) {
-        yield this.rows[this.yieldIndex++]!;
+        yield this.rows[this.yieldIndex++]!.display;
       }
       if (this.error) throw this.error;
       if (this.done) return;
···
 
   private async consumeSource(source: ReadableStream<Uint8Array>): Promise<void> {
     const reader = source.getReader();
-    const decoder = new TextDecoder();
-    let partial = "";
+    let buffer: Uint8Array = new Uint8Array(0);
 
     try {
       while (true) {
         const { done, value } = await reader.read();
         if (done) break;
 
-        partial += decoder.decode(value, { stream: true });
-        const lines = partial.split("\n");
-        partial = lines.pop() ?? "";
+        const newBuffer = new Uint8Array(buffer.length + value.length);
+        newBuffer.set(buffer);
+        newBuffer.set(value, buffer.length);
+        buffer = newBuffer;
 
-        for (const line of lines) {
-          if (line.trim()) {
-            this.rows.push(line);
+        let result;
+        try {
+          result = parseRows(buffer, false);
+        } catch (err) {
+          throw wrapParseError(err);
+        }
+        for (const row of result.rows) {
+          const formatted = this.formatRow(row);
+          if (formatted) {
+            this.rows.push(formatted);
           }
         }
+        buffer = result.remainder;
         this.ping();
       }
 
-      partial += decoder.decode();
-      if (partial.trim()) {
-        this.rows.push(partial);
+      if (buffer.length > 0) {
+        let result;
+        try {
+          result = parseRows(buffer, true);
+        } catch (err) {
+          throw wrapParseError(err);
+        }
+        for (const row of result.rows) {
+          const formatted = this.formatRow(row);
+          if (formatted) {
+            this.rows.push(formatted);
+          }
+        }
       }
     } catch (err) {
       this.error = err instanceof Error ? err : new Error(String(err));
···
       this.ping();
       this.maybeClose();
     }
+  }
+
+  private formatRow(parsed: ParsedRow): Row | null {
+    const { segment, raw } = parsed;
+
+    if (segment.type === "text") {
+      const headerLen = raw.length - segment.data.length - 1; // -1 for newline
+      const header = this.decoder.decode(raw.slice(0, headerLen));
+      const content = this.decoder.decode(segment.data);
+      const display = (header + content).trim();
+      if (!display) return null;
+      return { display, bytes: raw, hexStart: -1 };
+    }
+
+    const header = this.decoder.decode(raw.slice(0, raw.length - segment.data.length));
+    const maxPreview = 16;
+    const previewLen = Math.min(segment.data.length, maxPreview);
+    const hex = Array.from(segment.data.slice(0, previewLen))
+      .map((b) => b.toString(16).padStart(2, "0"))
+      .join(" ");
+    const ellipsis = segment.data.length > maxPreview ? "..." : "";
+    const display = header + hex + ellipsis;
+    if (!display.trim()) return null;
+    return { display, bytes: raw, hexStart: header.length };
   }
 
   private maybeClose(): void {

src/client/runtime/timeline.ts

···
   | { type: "render"; stream: SteppableStream }
   | { type: "action"; name: string; args: string; stream: SteppableStream };
 
+export type RowView = {
+  display: string;
+  hexStart: number;
+};
+
 export type EntryView = {
   type: "render" | "action";
   name?: string;
   args?: string;
-  rows: readonly string[];
+  rows: readonly RowView[];
   flightPromise: Thenable<unknown> | undefined;
   error: Error | null;
   chunkStart: number;
···
       const chunkCount = stream.rows.length;
       const chunkEnd = chunkStart + chunkCount;
       const base = {
-        rows: stream.rows,
+        rows: stream.rows.map((r) => ({ display: r.display, hexStart: r.hexStart })),
         flightPromise: stream.flightPromise,
         error: stream.error,
         chunkStart,

src/client/samples.ts

···
   )
 }`,
   },
+  binary: {
+    name: "Binary Data",
+    server: `import { BinaryDisplay } from './client'
+
+export default function App() {
+  const buffer = new ArrayBuffer(4)
+  new Uint8Array(buffer).set([0xCA, 0xFE, 0xBA, 0xBE])
+
+  return (
+    <div>
+      <h1>Binary Data</h1>
+      <BinaryDisplay
+        arrayBuffer={buffer}
+        int8={new Int8Array([0x7F, -1, -128])}
+        uint8={new Uint8Array([0xDE, 0xAD, 0xBE, 0xEF])}
+        uint8Clamped={new Uint8ClampedArray([0, 128, 255])}
+        int16={new Int16Array([0x7FFF, -1])}
+        uint16={new Uint16Array([0xFFFF, 0x1234])}
+        int32={new Int32Array([0x12345678, -1])}
+        uint32={new Uint32Array([0xDEADBEEF])}
+        float32={new Float32Array([Math.PI])}
+        float64={new Float64Array([Math.PI])}
+        bigInt64={new BigInt64Array([0x123456789ABCDEFn, -1n])}
+        bigUint64={new BigUint64Array([0xFEDCBA9876543210n])}
+        dataView={new DataView(buffer)}
+      />
+    </div>
+  )
+}`,
+    client: `'use client'
+
+function formatBytes(arr) {
+  return Array.from(new Uint8Array(arr.buffer || arr)).map(b => '0x' + b.toString(16).padStart(2, '0')).join(', ')
+}
+
+export function BinaryDisplay(props) {
+  return (
+    <div style={{ fontSize: 12, fontFamily: 'monospace' }}>
+      <div>ArrayBuffer: [{formatBytes(props.arrayBuffer)}]</div>
+      <div>Int8Array: [{props.int8.join(', ')}]</div>
+      <div>Uint8Array: [{formatBytes(props.uint8)}]</div>
+      <div>Uint8ClampedArray: [{props.uint8Clamped.join(', ')}]</div>
+      <div>Int16Array: [{props.int16.join(', ')}]</div>
+      <div>Uint16Array: [{props.uint16.join(', ')}]</div>
+      <div>Int32Array: [{props.int32.map(n => '0x' + (n >>> 0).toString(16)).join(', ')}]</div>
+      <div>Uint32Array: [{props.uint32.map(n => '0x' + n.toString(16)).join(', ')}]</div>
+      <div>Float32Array: [{props.float32.join(', ')}]</div>
+      <div>Float64Array: [{props.float64.join(', ')}]</div>
+      <div>BigInt64Array: [{props.bigInt64.map(n => n.toString()).join(', ')}]</div>
+      <div>BigUint64Array: [{props.bigUint64.map(n => '0x' + n.toString(16)).join(', ')}]</div>
+      <div>DataView: [{formatBytes(props.dataView)}]</div>
+    </div>
+  )
+}`,
+  },
   kitchensink: {
     name: "Kitchen Sink",
-    server: `// Kitchen Sink - All RSC Protocol Types
-import { Suspense } from 'react'
+    server: `import { Suspense } from 'react'
 import { DataDisplay } from './client'
 
 export default function App() {
···
       date: new Date("2024-01-15T12:00:00.000Z"),
       bigint: BigInt("12345678901234567890"),
       symbol: Symbol.for("mySymbol"),
+    },
+
+    // Binary / TypedArrays
+    binary: {
+      uint8: new Uint8Array([1, 2, 3, 4, 5]),
+      int32: new Int32Array([-1, 0, 2147483647]),
+      float64: new Float64Array([3.14159, 2.71828]),
     },
 
     // Collections
···
   if (v instanceof Set) return 'Set(' + v.size + ')'
   if (v instanceof FormData) return 'FormData'
   if (v instanceof Blob) return 'Blob(' + v.size + ')'
+  if (v instanceof ArrayBuffer) return 'ArrayBuffer(' + v.byteLength + ')'
+  if (ArrayBuffer.isView(v)) return v.constructor.name + '(' + v.length + ')'
   if (Array.isArray(v)) return '[' + v.length + ' items]'
   if (typeof v === 'object') return '{...}'
   return String(v)

src/client/ui/FlightLog.css

···
   opacity: 0.4;
 }
 
+.FlightLog-hexBytes {
+  opacity: 0.7;
+}
+
 .FlightLog-tree {
   flex: 1;
   min-width: 0;

src/client/ui/FlightLog.tsx

···
 import React, { useState, useRef, useEffect, useTransition } from "react";
 import { FlightTreeView } from "./TreeView.tsx";
 import { Select } from "./Select.tsx";
-import type { EntryView } from "../runtime/index.ts";
+import type { EntryView, RowView } from "../runtime/index.ts";
 import "./FlightLog.css";
 
-function escapeHtml(str: string): string {
-  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+function formatRow(row: RowView): React.ReactNode {
+  if (row.hexStart < 0) {
+    return row.display;
+  }
+  return (
+    <>
+      {row.display.slice(0, row.hexStart)}
+      <span className="FlightLog-hexBytes">{row.display.slice(row.hexStart)}</span>
+    </>
+  );
 }
 
 type RenderLogViewProps = {
···
       <div className="FlightLog-renderView-split">
         <div className="FlightLog-linesWrapper">
           <pre className="FlightLog-lines">
-            {rows.map((line, i) => {
+            {rows.map((row, i) => {
               const isCurrent = i === nextLineIndex;
               return (
                 <span
···
                   data-testid="flight-line"
                   aria-current={isCurrent ? "step" : undefined}
                 >
-                  {escapeHtml(line)}
+                  {formatRow(row)}
                 </span>
               );
             })}

src/client/ui/TreeView.tsx

···
     );
   }
 
+  if (value instanceof DataView) {
+    return <span className="TreeView-collection">DataView({value.byteLength} bytes)</span>;
+  }
   if (ArrayBuffer.isView(value)) {
     const name = value.constructor.name;
     const arr = value as Uint8Array;

tests/binary.spec.ts

···
+import { test, expect, beforeAll, afterAll, afterEach } from "vitest";
+import { createHelpers, launchBrowser, type TestHelpers } from "./helpers.ts";
+import type { Browser, Page } from "playwright";
+
+let browser: Browser;
+let page: Page;
+let h: TestHelpers;
+
+beforeAll(async () => {
+  browser = await launchBrowser();
+  page = await browser.newPage();
+  h = createHelpers(page);
+});
+
+afterAll(async () => {
+  await browser.close();
+});
+
+afterEach(async () => {
+  await h.checkNoRemainingSteps();
+});
+
+test("binary sample - TypedArray serialization", async () => {
+  await h.load("binary");
+  await h.stepAll();
+
+  // Verify the preview shows decoded values for various types
+  expect(await h.preview("ArrayBuffer:")).toContain("0xca");
+  expect(await h.preview("Int32Array:")).toContain("305419896"); // 0x12345678
+  expect(await h.preview("Float64Array:")).toContain("3.14159");
+});
+
+test("binary sample - rows show hex bytes", async () => {
+  await h.load("binary");
+  await h.stepAll();
+
+  const rows = await h.getRows();
+
+  // Uint8Array([0xDE, 0xAD, 0xBE, 0xEF])
+  expect(rows.some((r) => r.text && /de ad be ef/i.test(r.text))).toBe(true);
+  // ArrayBuffer with 0xCA, 0xFE, 0xBA, 0xBE
+  expect(rows.some((r) => r.text && /ca fe ba be/i.test(r.text))).toBe(true);
+});

tests/binarytags.spec.ts

···
+import { test, expect, beforeAll, afterAll, afterEach } from "vitest";
+import { createHelpers, launchBrowser, type TestHelpers } from "./helpers.ts";
+import type { Browser, Page } from "playwright";
+
+const BINARY_MARKER_CASES = [
+  "arrayBuffer: buffer",
+  "int8: new Int8Array(marker)",
+  "uint8: new Uint8Array(marker)",
+  "uint8Clamped: new Uint8ClampedArray(marker)",
+  "int16: new Int16Array(new Uint8Array(marker).buffer)",
+  "uint16: new Uint16Array(new Uint8Array(marker).buffer)",
+  "int32: new Int32Array(new Uint8Array(marker).buffer)",
+  "uint32: new Uint32Array(new Uint8Array(marker).buffer)",
+  "float32: new Float32Array(new Uint8Array(marker).buffer)",
+  "float64: new Float64Array(new Uint8Array([...marker, ...marker]).buffer)",
+  "bigInt64: new BigInt64Array(new Uint8Array([...marker, ...marker]).buffer)",
+  "bigUint64: new BigUint64Array(new Uint8Array([...marker, ...marker]).buffer)",
+  "dataView: new DataView(buffer)",
+  `byteStream: new ReadableStream({
+    type: 'bytes',
+    start(controller) {
+      controller.enqueue(new Uint8Array(marker))
+      controller.close()
+    }
+  })`,
+];
+
+const BINARY_TAGS_SERVER = `export default function App() {
+  const marker = [0xAB, 0xCD, 0xAB, 0xCD]
+  const buffer = new ArrayBuffer(4)
+  new Uint8Array(buffer).set(marker)
+
+  return {
+    ${BINARY_MARKER_CASES.join(",\n    ")},
+    longText: 'test'.repeat(300),
+  }
+}`;
+
+const BINARY_TAGS_CLIENT = `'use client'`;
+
+let browser: Browser;
+let page: Page;
+let h: TestHelpers;
+
+beforeAll(async () => {
+  browser = await launchBrowser();
+  page = await browser.newPage();
+  h = createHelpers(page);
+});
+
+afterAll(async () => {
+  await browser.close();
+});
+
+afterEach(async () => {
+  await h.checkNoRemainingSteps();
+});
+
+test("all binary tags produce marker rows", async () => {
+  await h.loadCode(BINARY_TAGS_SERVER, BINARY_TAGS_CLIENT);
+  await h.stepAll();
+
+  const rows = await h.getRows();
+
+  // Count rows containing "ab cd ab cd" (binary marker)
+  const binaryMarkerRows = rows.filter((r) => r.text && /ab cd ab cd/i.test(r.text));
+
+  // Count rows containing "74 65 73 74" (ASCII for "test")
+  const textRows = rows.filter((r) => r.text && /74 65 73 74/.test(r.text));
+
+  // If any binary tag is missing from the parser, the stream will be corrupted
+  expect(
+    binaryMarkerRows.length,
+    `Expected ${BINARY_MARKER_CASES.length} binary marker rows, got ${binaryMarkerRows.length}`,
+  ).toBe(BINARY_MARKER_CASES.length);
+
+  expect(textRows.length, `Expected 1 Text row, got ${textRows.length}`).toBe(1);
+});

tests/kitchensink.spec.ts

···
               bigint: 12345678901234567890n,
               symbol: Symbol(mySymbol)
             },
+            binary: {
+              uint8: Uint8Array(5) [1, 2, 3, 4, 5],
+              int32: Int32Array(3) [-1, 0, 2147483647],
+              float64: Float64Array(2) [3.14159, 2.71828]
+            },
             collections: {
               map: Map(2) {
                 "a" => 1,
···
               bigint: 12345678901234567890n,
               symbol: Symbol(mySymbol)
             },
+            binary: {
+              uint8: Uint8Array(5) [1, 2, 3, 4, 5],
+              int32: Int32Array(3) [-1, 0, 2147483647],
+              float64: Float64Array(2) [3.14159, 2.71828]
+            },
             collections: {
               map: Map(2) {
                 "a" => 1,
···
     date: 2024-01-15T12:00:00.000Z
     bigint: 12345678901234567890n
     symbol: Symbol(mySymbol)
+    binary
+    uint8: Uint8Array(5)
+    int32: Int32Array(3)
+    float64: Float64Array(2)
     collections
     map: Map(2)
     set: Set(3)