Render any public GitHub Gist as a beautiful, responsive, shareable web preview.
🌐 Live Demo · 📘 Tech Specs · 🧭 Product Docs
GistPreview takes the friction out of sharing and testing Gists by turning raw files into polished previews with smart content detection, responsive viewports, and one-click sharing.
- 🔗 Smart URL parsing — Accepts full Gist URLs or plain IDs
- 🧠 Content-aware rendering — Detects HTML, Markdown, React/JSX, JSON, CSS, JavaScript, and plain text
- ⚛️ React transpilation — Compiles and runs JSX with React support
- 📱 Responsive previews — Switch between desktop, tablet, and mobile layouts
- 🖥️ Fullscreen mode — Supports clean, immersive presentation mode
- 📂 Multi-file navigation — Quickly switch between files in a gist
- 💾 Recent history — Saves recently viewed gists in localStorage
- 🌙 Dark-first UI — Optimized for modern developer workflows
- Open the live app
- Paste a public Gist URL (or just the gist ID)
- Press Enter or click Preview
- Switch viewport modes as needed
- Share with generated URL parameters
| Type | Detection Strategy | Rendering |
|---|---|---|
| HTML | <!DOCTYPE>, <html>, semantic tags |
Sandboxed webpage preview |
| Markdown | Headers, lists, links, fences | Styled markdown document |
| React/JSX | JSX syntax, React patterns, hooks | Live React execution via transpilation |
| JSON | Valid parse + structure checks | Syntax-highlighted output |
| CSS | Selectors, rules, units, @ directives |
Code renderer with formatting |
| JavaScript | JS syntax/keyword heuristics | Code renderer with formatting |
| Plain text | Fallback | Clean text rendering |
https://animeshkundu.github.io/gist-preview/?gist={gistId}&file={filename}
Shared links open directly in preview mode for fast collaboration and demos.
| Key | Action |
|---|---|
Enter |
Submit gist URL |
Escape |
Exit fullscreen (when unlocked) |
- Framework: React 19 + TypeScript
- Build Tool: Vite 7
- Styling: Tailwind CSS 4.1 + shadcn/ui
- Animation: Framer Motion
- Icons: Phosphor Icons
- Markdown: Marked
- Persistence: localStorage
- Testing: Vitest + React Testing Library + Playwright
- CI/CD: GitHub Actions
- Node.js 20+
- npm 10+
npm install
npm run dev| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run preview |
Preview production build locally |
npm run typecheck |
Run TypeScript checks |
npm run lint |
Run ESLint |
npm test |
Run unit/integration tests once |
npm run test:watch |
Run tests in watch mode |
npm run test:coverage |
Run tests with coverage |
npm run e2e |
Run Playwright end-to-end tests |
./scripts/validate.sh |
Run full validation pipeline |
src/
├── components/ # Feature components and UI composition
├── hooks/ # Reusable React hooks
├── lib/ # Parsing, API, rendering, inference utilities
├── types/ # Centralized TypeScript type definitions
└── __tests__/ # Global test setup
GistPreview uses the public GitHub API for unauthenticated gist access:
- Rate limit: 60 requests/hour/IP
- Scope: Public gists only
- PRD
- Technical Specs
- Agent Guide
- Agent Instructions
- Architecture Docs
- ADRs
- Specs
- History
- Security Policy
MIT — see LICENSE.