GitPreview Engine is a high-performance, modular previewing system that turns raw code from GitHub, GitLab, or Bitbucket into live, interactive previews instantly. Built with a "Zero Dependency" philosophy, it handles asset inlining, CSS isolation, and security sandboxing entirely in the browser.
- 📦 Intelligent Inlining: Automatically fetches and embeds CSS (
@importincluded), JavaScript, and Images into a single document. - 🛡️ Secure Sandboxing: Run untrusted code with JS disabled or enabled in a isolated
iframeenvironment. - 🎨 CSS Isolation: Uses unique hash-based scoping to prevent preview styles from "leaking" into your UI.
- 📱 Dev-First UI:
- Device Switcher: Test responsiveness with Mobile, Tablet, and Desktop presets.
- Dark Mode: High-contrast, VS Code-inspired interface.
- Asset Inspector: Real-time breakdown of detected dependencies.
- 🔗 Smart Syncing: Deep-link any file via
?prv=[URL]. - 📥 Hybrid Export:
- Downloads standalone files as fully inlined HTML.
- Integrates with GitFolderDownloader for complex projects with directory structures.
The engine is built on a strictly modular ES6 architecture:
/core
├── fetcher.js # Git URL ➔ Raw URL conversion
├── parser.js # DOM orchestration
├── dependency-graph.js # Asset discovery logic
├── asset-processor.js # The "Engine" (Base64 conversion & Inlining)
├── css-rewriter.js # URL path correction & isolation hashes
├── sandbox.js # Iframe rendering context
└── exporter.js # Download & Blob management
/web
├── index.html # Modern DevUI Layout
├── ui.js # UI State Controller
└── style.css # Variable-based Design System
A local web server is required to support ES Modules (CORS/Module security).
# Using Python
python -m http.server 8000
# Using Node.js (npx)
npx serve .Access the dashboard at http://localhost:8000/web.
- Paste a GitHub URL (e.g.,
https://github.com/user/repo/blob/main/index.html). - Hit Run.
- Toggle Scoped CSS or No JS as needed.
- Export the result for offline use.
Share a live preview of a specific file instantly by appending the prv parameter:
your-site.com/web/?prv=https://github.com/Octocat/Hello-World/blob/master/index.html
Since this tool runs entirely in the browser, it uses a CORS proxy to fetch assets from Git providers.
- Default Proxy:
https://corsproxy.io/? - Configurable: You can change the proxy endpoint directly in the UI settings.
This project is built with vanilla technology to ensure longevity and speed.
- Fork the repo.
- Create your feature branch (
git checkout -b feature/AmazingFeature). - Commit your changes (
git commit -m 'Add some AmazingFeature'). - Push to the branch (
git push origin feature/AmazingFeature). - Open a Pull Request.
Developed with ❤️ for the open-source community.