gh-x-html — GitHub Finally Plays Your Videos (and Your Playwright Reports)

May 27, 2026

Clickbait cover: 'GitHub finally plays your videos.' with Ben on stage holding a mic, and a pill that reads '/gh-x-html — Chrome extension'

gh-x-html is live on GitHub — load unpacked, Chrome Web Store listing in review

The real reason I built this I didn't build gh-x-html for HTML showcases. I built it because I post videos in GitHub issues all day. A Playwright recording of a UI bug. A screen capture of the new flow. A 12-second clip of the broken modal. Today those go to Google Drive, get a shareable link, get pasted as a markdown link, and then every reviewer clicks out, waits for Drive to load, watches, comes back. Friction stacks. Reviews drag. The fix is dumb: render the video where it was posted.

Same content. As markdown, then as gh-x-html.

This is the comparison that matters. Same Q2 release status — same numbers, same options, same decision — written two ways. Left: the best plain markdown can do in a GitHub comment. Right: the same content as an x-html fence. Both screenshots came out of issue #5, same browser tab.

Side-by-side Playwright capture of issue #5. Left: Section A — the Q2 release status expressed as plain markdown (headings, bullets, plain table, checkbox list, text disclaimer 'sparkline cannot be rendered, readers must imagine the curve'). Right: Section B — the same content rendered through gh-x-html as a live dashboard with gradient title, animated progress bars, real SVG sparkline, chip picker, color-coded decision table with the recommended row starred and tinted green, and a 5-node dependency-flow diagram with arrowed boxes.

The markdown side is the ceiling of what GitHub natively renders for this content. Headings, bullets, an unstyled table, checkboxes for the vote, and a literal “Sparkline cannot be rendered in markdown — readers must imagine the curve” disclaimer. That’s not a strawman; that’s actually the best the format can do.

The HTML side is the same information as a sandboxed iframe — color, shape, position, motion all doing real work. Decision time drops from a scroll-and-re-read to a single glance.

What it does, in one frame

Without `gh-x-html`

External video → markdown link → Drive → context switch
Playwright HTML report → zip → upload elsewhere → email link
Rich status board → screenshot → blurry → out of date the next day
Live demo → recording → upload → link → click → wait

The medium fights the content. Every viewer pays the friction.

With `gh-x-html`

External .mp4 / .webm / .mp3 URLs play inline — sandboxed iframe escapes GitHub's CSP
Drop a Playwright HTML report into an x-html fence; reviewer scrolls through it inside the PR
Status dashboards, ADR mockups, design comps — render live in the comment they were posted in
Author-allowlist gated. Sandboxed iframe. No GitHub cookies leak to fence scripts

The PR is the artifact. No context switch. No re-upload.

What the fence can do — one real example

This is one fenced code block in one GitHub issue comment. Inside it: a Q2 release dashboard with animated progress bars, a sparkline of 30-day request volume, a chip picker, a decision table with the recommended row highlighted, a dependency-flow diagram, and an Acknowledge CTA — all rendered inside a sandboxed iframe with no allow-same-origin (opaque origin, no GitHub cookies):

Real Playwright screenshot — GitHub issue comment with intro prose, then the rich Q2 release dashboard rendered inline: gradient header, three status cards (Auth 98%, Payments 76%, Search 41%), a 30-day request-volume sparkline, a chip picker, a backfill-strategy decision table with option B recommended, a dependency-flow diagram, and an Acknowledge button

Tight crop on just the rendered fence:

Tight crop of the rendered Q2 dashboard iframe — animated cyan-magenta progress bars, sparkline with a magenta dot at the peak, chip row with 'Payments retries' highlighted, decision table with the shadow-index option marked recommended, and a 5-node dependency graph

Without the extension, every reviewer sees this exact same content as a wall of HTML source. The sanitizer wins, the meaning is lost.

The use cases I actually built it for

Playwright HTML reports Drop the report's HTML into an x-html fence. Failures, screenshots, traces — all browsable inside the PR. No Vercel deploy preview, no Drive link.

Bug recordings Screen capture lands at r2.dev/clip.mp4. Paste the URL. Reviewer scrolls to it, sees the bug play. Zero context switch.

Visual regression diffs Two screenshots + a slider. Reviewer drags. Or render the diff overlay live. The fence is just HTML — do what the comparison needs.

Status / release boards Real-time-ish pills with retry counts and p99s. Embed in the release-tracking issue. Beats a bullet list nobody updates.

ADR mockups A flow diagram, a decision table, a code excerpt with file:line caption. The ADR becomes a page, not 800 lines of bullets.

Demo links that actually work A small interactive prototype. Sandboxed — author scripts can run but get no GitHub cookies. Like an embedded CodePen, in a comment.

When markdown still fits — when gh-x-html wins

Comment content	Best with	Why
Quick reply / discussion	plain markdown	One paragraph. No need to open the rendering machinery.
Code diff inline	plain markdown	GitHub already does this beautifully. Don't reach for HTML.
Video of a bug / regression / new feature	`gh-x-html`	Third-party `.mp4` URLs play inline. The viewer never leaves the issue.
Playwright report / test trace	`gh-x-html`	The whole report renders in the PR — failures, screenshots, traces, all browsable.
Status dashboard / release board	`gh-x-html`	Real color, real pills, a sparkline. Beats a stale bullet list.
ADR / design walkthrough	`gh-x-html`	Diagram + table + code excerpts in one glanceable artifact. The decision lands faster.

The trust model, in one paragraph

The extension only rewrites comments authored by GitHub logins in your local allowlist (stored in chrome.storage.sync, seeded with your own login on install). The sandboxed iframe is allow-scripts allow-popups allow-popups-to-escape-sandbox — never allow-same-origin, which would be a sandbox escape. Author scripts can run inside the iframe but the iframe is an opaque origin: no GitHub cookies, no parent DOM access, no top-frame navigation. Full reasoning in ADR-0002 and ADR-0003.

Install + try it

git clone https://github.com/ninyawee/gh-x-html
# chrome://extensions → Developer mode → Load unpacked → pick the directory

The allowlist seeds with your GitHub login on first install. Open any issue or PR, drop an x-html fence in a comment, reload — your fence becomes a live rendered iframe. Add coworkers via the popup as you onboard the team.

A Chrome Web Store listing is in review; install via “Load unpacked” until then.

— Ben

Repo: ninyawee/gh-x-html · Showcase issue: #4 — flex what gh-x-html can do · Sibling: in-html