Skip to content
SanityPress
⭐ Star on GitHub

Introducing GitHub iframe

  • #News
Read time: 2 minutes
Mitchell Christ
Mitchell Christ
Walter White working in a van wearing a yellow hazmat suit with the text "GitHub iframe", scene from the tv series Breaking Bad

Introducing GitHub iframe (name open to suggestions) — a live github code viewer, used in the SanityPress Documentation.

As part of documenting SanityPress, I recently developed a small tool to enhance how we present live code examples directly from GitHub. If you’ve visited the documentation on modules, you might have noticed the live code embedded for each module. This project was born out of the need to display real-time code directly from GitHub, which existing tools didn’t handle quite the way I wanted.

So, I built it myself.

Meet GitHub iframe🔗

Currently named "GitHub Iframe" (working title), this tool is designed to show live, syntax-highlighted code directly from GitHub repositories inside an iframe. It’s powered by Next.js 15 and uses Shiki as the syntax highlighter, ensuring accurate and visually appealing code formatting. You can check out the project itself here:

Why I Built It🔗

I explored several existing solutions but found they either lacked certain functionality or weren't ideal for my specific needs. So, I created a straightforward tool that can pull code directly from GitHub and display it seamlessly, helping developers review module code without leaving the documentation page.

How It Works🔗

The setup uses Next.js 15 for fast performance and Shiki for syntax highlighting. All you need is the repo and the path to the file of the code you want to display.

e.g. nuotsu/sanitypress + src/lib/utils.ts

This tool is currently integrated within the SanityPress documentation, displaying code for each module in the list. I’m open to ideas on a better name—so if anything creative comes to mind, let me know in the comments below!

Try it out now!🔗

Feel free to try it out and give it a star ⭐, and if you have any feedback, I’d love to hear it! You can submit any suggestions or issues via the GitHub repository. Let’s make SanityPress’ documentation even more interactive and helpful for everyone.

"Just Ship It" (Source)