---
title: "github-code Web Component: A GPT-5.5-built Embedding Component for GitHub Code"
source: "Simon Willison 博客（Atom）"
source_tier: "t2"
url: "https://simonwillison.net/2026/Jul/7/github-code-component/#atom-everything"
permalink: "https://feed.astralor.com/items/itm_89e9d622919f2eae7cddc34d"
published: "2026-07-07T16:18:16.000Z"
score: 72
channel: "ai"
tags: ["github-code","GitHub integration","GPT-5.5","Web Components"]
---

# github-code Web Component: A GPT-5.5-built Embedding Component for GitHub Code

## AI commentary

> If you frequently cite code snippets from GitHub in your blog or docs, this component saves the hassle of manually converting URLs. Though simple, it's a great example of GPT-5.5 directly generating a practical frontend tool — worth following for the trend of AI-assisted web development.

## At a glance

Simon Willison released an experimental Web Component called github-code, generated by GPT-5.5, that lets you embed a specific range of lines from a GitHub repository via a simple HTML tag. The component automatically converts standard GitHub URLs to raw.githubusercontent.com links, fetches the code using fetch(), and displays line numbers. It currently lacks syntax highlighting, but offers a clean way to reference code in blogs and documentation.

## Key points

- Experimental Web Component generated by GPT-5.5 from a prompt
- Embeds GitHub code snippets, automatically converts URLs and fetches files
- Displays line numbers, no syntax highlighting
- Dynamically loads via fetch(), uses simple HTML tags

## Full text

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() to fetch them and displays the specified range of lines - with line numbers, no syntax highlighting though Show me a preview web browser so I can see your work Here's what it looks like embedded on this page: Tags: github, web-components, gpt

---

Verify against the original before citing; curated by Astral Feed: https://feed.astralor.com/items/itm_89e9d622919f2eae7cddc34d