Article · 2026-07-07 · 4 moments

github-code Web Component

Tool: github-code Web Component An experimental Web Component built using GPT-5.5 and the following prompt: let's build a Web Component for embedding code from GitHub <github-code href="https://github.com/simonw/sqlite-ast/blob/437c759129154f05296324a7f82aa1246340dd14/sqlite_ast/parser.py#L9-L18"></github-code> It takes URLs like that, converts them to https://raw.githubusercontent.com/simonw/sqlite-ast/437c759129154f05296324a7f82aa1246340dd14/sqlite_ast/parser.py, then uses fetch() ✦ AI generated

Read original ↗

HOST Simon Willison

Mechanism

The component takes a GitHub blob URL with a line range (e.g. .../blob/<sha>/<path>#L9-L18) and converts it into a raw.githubusercontent.com URL to fetch the file contents.

Explains the URL-rewriting mechanism: GitHub blob URLs are transformed into raw content URLs for fetching.

transcript

Simon Willison: It takes URLs like that, converts them to https://raw.githubusercontent.com/simonw/sqlite-ast/437c759129154f05296324a7f82aa1246340dd14/sqlite_ast/parser.py, then uses fetch() to fetch them and displays the specified range of lines

Fact

The embedded code display shows line numbers but does not include syntax highlighting.

The tool renders the fetched line range with line numbers, but explicitly lacks syntax highlighting.

transcript

Simon Willison: displays the specified range of lines - with line numbers, no syntax highlighting though

Context◆

The github-code Web Component is an experimental tool built using GPT-5.5 to embed code snippets from GitHub directly into web pages.

Simon Willison introduces an experimental Web Component, built with GPT-5.5, for embedding GitHub code snippets into pages.

transcript

Simon Willison: An experimental Web Component built using GPT-5.5 and the following prompt: let's build a Web Component for embedding code from GitHub

explains mechanism · 1

Anecdote

Willison prompted the model to build the component and then asked it to show a preview browser so he could see the result.

As part of the build process, the prompt requested a live preview browser to visually confirm the component worked.

transcript

Simon Willison: Show me a preview web browser so I can see your work

Highlight slides

github-code: A New Web Component✦ from: The github-code Web Component is an experimental tool built using GPT-5.5 to embed code snippets from GitHub directly into web pages.How It Was Built✦ from: The github-code Web Component is an experimental tool built using GPT-5.5 to embed code snippets from GitHub directly into web pages.

Related episodes

Article · Lenny's Newsletter

ChatGPT Codex Voice + browser + Sites: an expert’s AI workflow | Nick Baumann (OpenAI)

→

Video · Lenny's Podcast

Chatbots are not the final interface: OpenAI’s Head of Design on what’s next | Ian Silber

→

Video · Syntax

Do You Read The Code? ⟡ HTTP Gets a NEW Method ⟡ Codex Gets Sol Ultra ⌁ Syntax Weekly ⌁

→