PROJECTS / GITGLASS

gitglass

v1.3.0 · MIT · vanilla JS

gitglass puts a read-only, VS Code-style view of a GitHub repo on any static page: a file tree, tabs and highlighted code, fetched live from GitHub. You add one stylesheet, one script and one element. There is no backend and no build step.

9.9 KB JS, min+gzip 2.4 KB core CSS 0 dependencies 18 optional themes
Repo Article README

Try it

Load any public repo and pick a theme. Every viewer on this page follows your pick, and so does the code to paste.

Try or (huge: its folders list on demand) GitHub API: 60 calls per hour without a token
THEME

bundle also in the 11-theme bundle, 1.1 KB gzipped

file only as its own file

This page fetches a theme’s own small file the first time you pick it. A dashed swatch is not fetched yet.

PASTE THIS INTO YOUR PAGE 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gdhami-net/gitglass@1.3.0/dist/gitglass.min.css">
<script src="https://cdn.jsdelivr.net/gh/gdhami-net/gitglass@1.3.0/dist/gitglass.min.js"></script>

<div data-gitglass="gdhami-net/gitglass"></div>

vs-dark is built into gitglass.min.css, so the default look needs no theme file.

Snippet mode: a few lines, no API calls

Add #path:L184-L205 to the repo and gitglass shows only those lines, live from GitHub, with their real line numbers and a link to the range. “whole file” opens the rest in place. A snippet reads the raw file only, so it never counts against the API limit.

<div data-gitglass="gdhami-net/gitglass#gitglass.js:L184-L205"></div>

Guided tour: walk a reader through a repo

Put a JSON script inside the host element. Each step opens a file, marks a range of lines and explains it. While the viewer has focus, ← and → step through.

A FIVE-STEP TOUR OF GITGLASS’S OWN SOURCE
    show the markup for this tour

    A narrow column

    The same viewer in a column 420 px wide, or as wide as your phone. gitglass measures its own box, not the window, so it fits a sidebar, a card or a phone.

    • Under 720 px of width the file tree folds behind the ☰ button and opens over the code.
    • Picking a file closes it again. Tabs get narrower, and arrows appear when they do not fit.
    • The ⛶ button still takes the viewer full screen. Esc brings it back.

    Without a token, GitHub allows 60 API calls per hour for each IP address. Each repo costs one call (two when its branch is master), and the tree is then kept until you close the tab. The viewers on this page share it, so the whole page normally costs one call.