Preview HTML and media files directly from GitHub without cloning. No backend. No privacy concerns.
- Visit GitHub-Preview once. (Registers service worker)
- Paste the raw/blob link in the input box on the landing page and submit. HTML files open through the preview proxy; supported video and audio files open in a native media player. Alternatively, replace
https://raw.githubusercontent.com/withhttps://pro-2684.github.io/GitHub-Preview/and visit the URL.
Share links with ?url=...&preview=1 so the landing page can install the service worker before opening the preview.
Media type is selected by extension:
- Video:
webm,ogv,mkv,mp4,mov - Audio:
mp3,flac,ogg,opus,wav,m4a,aac
The landing page opens recognized media in the player.
Here's a few examples you can try:
- Bootstrap's page (Blob | Raw)
- A Comprehensive Example (Blob | Raw)
- Aria Math (
audio) (Blob | Raw) - Blinding Lights (
video) (Blob | Raw)
To preview files in private repositories, first click Raw and copy the redirected URL, which should contain a token parameter (like ?token=GHSAT...). Then paste the whole URL into GitHub-Preview. HTML files referencing other files (e.g. CSS, JS) may not work properly due to the lack of token in their URLs.
- GitHub Preview (UserScript): Adds preview button on code viewer.
This project uses a Service Worker as a client-side proxy:
- Requests under
GitHub-Preview/...are intercepted by the Service Worker. - The path is mapped to
raw.githubusercontent.com/.... - The Service Worker fetches the original content.
- It fixes
Content-Typeheader (e.g.text/plain→text/html) - Streams the modified response to the browser.
Because all requests (including those triggered by scripts like fetch("./data.json")) go through the Service Worker, runtime resource loading works transparently.
Key differences between this project and other popular solutions:
| Approach | Description |
|---|---|
| This project | Intercepts all network requests via Service Worker and remaps them |
| raw.githack.com | Uses a server-side proxy to serve corrected responses |
| htmlpreview | Rewrites HTML content only, cannot intercept runtime behavior |
| github-html-preview-extension | Browser extension, uses a server-side proxy similar to raw.githack.com |
Detailed feature comparison:
| Feature | This project | raw.githack.com | htmlpreview | Ideal raw1 |
|---|---|---|---|---|
| Architecture | Client-side | Server-side | Client + Server | N/A |
| Mechanism | Service Worker | Server Proxy | HTML rewrite + optional proxy fallback | N/A |
| Backend-free | 🟢 | 🔴 | 🟡 (proxy fallback) | N/A |
Static assets (<img>, <script>, <link>) |
🟢 | 🟢 | 🟢 | 🟢 |
Runtime requests (fetch, XHR) |
🟢 | 🟢 | 🟡 (<base>) |
🟢 |
| Dynamic resources | 🟢 | 🟢 | 🔴 | 🟢 |
| Relative path handling | 🟢 (request remapping) | 🟢 | 🟢 (<base>) |
🟢 |
| Absolute path handling | 🔴 | 🔴 | 🔴 | 🔴 |
| Service Worker on target | 🔴 | 🟢 | 🔴 | 🟢 |
To summarize, this project achieves a very good approximation towards an ideal raw.githubusercontent.com1, without a proxy backend.
- Some websites may use absolute paths (e.g.
/assets/style.css). This will error. - Since service workers cannot intercept other service workers' scripts, so the service workers on the previewed page won't work.
- If the website is using incorrect file extensions, this app won't work, because it guesses the content type based on the extension solely.
- Git LFS files are not supported. GitHub's raw content host returns the LFS pointer instead of the stored object. See docs/NOTE.md.
- Asset caching and offline support for this app