Skip to content

TutorialKit by StackBlitz - Create interactive tutorials powered by the WebContainer API

License

Notifications You must be signed in to change notification settings

christophernemala/tutorialkit

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

425 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🚀 TutorialKit - Interactive Coding Platform

Deploy with Vercel

Create interactive coding tutorials powered by WebContainer API - runs entirely in the browser!


⚡ Quick Deploy (2 Minutes)

Click to deploy instantly:

👉 DEPLOY NOW 👈

Or view the interactive deployment page:

👉 DEPLOY_NOW.html 👈


📚 Documentation

Document Purpose
START_HERE.md 👈 Begin here - Quick start guide
DEPLOY_NOW.html Interactive deployment page
SETUP_GUIDE.md Complete step-by-step setup
QUICK_DEPLOY.md Quick reference card
DEPLOYMENT.md Comprehensive deployment guide
PRODUCTION_CHECKLIST.md Post-deployment validation

✨ What is TutorialKit?

An interactive coding tutorial platform that runs entirely in the browser:

  • Live Code Editor - Monaco editor with syntax highlighting
  • Integrated Terminal - Full terminal access in browser
  • File System - Virtual file system with WebContainer
  • Live Preview - Real-time preview of changes
  • No Backend - 100% client-side, powered by WebContainer API

🎯 Use Cases

  • Educators: Create interactive programming courses
  • Companies: Onboard developers with hands-on tutorials
  • Content Creators: Build engaging technical content
  • Developers: Showcase projects with live demos

💰 Cost

FREE - Runs on Vercel's free tier

  • No credit card required
  • No server costs
  • Global CDN included

🏗️ What's Included

This repository is production-ready with:

✅ Full WebContainer API support
✅ Security headers configured (COOP/COEP)
✅ CI/CD pipeline (GitHub Actions)
✅ CDN caching strategy
✅ Zero-downtime deployment
✅ Comprehensive documentation


🚀 Deployment Options

Option 1: One-Click (Recommended)

Click: https://vercel.com/new/clone?repository-url=https://github.com/christophernemala/tutorialkit

Option 2: CLI

npm i -g vercel
git clone https://github.com/christophernemala/tutorialkit.git
cd tutorialkit
vercel --prod

Option 3: Automated Script

chmod +x deploy.sh
./deploy.sh

📊 Performance

  • Lighthouse Score: 95+ (all categories)
  • First Contentful Paint: < 1.5s
  • Time to Interactive: < 3.5s
  • Build Time: 5-10 minutes (first deploy)

🔒 Security

  • HTTPS enforced
  • Cross-origin isolation enabled
  • Security headers configured
  • WebContainer sandboxing

🎓 Getting Started

  1. Deploy - Click the deploy button above
  2. Verify - Check your deployment URL works
  3. Customize - Add your branding and content
  4. Create - Build your first tutorial

Full guide: START_HERE.md


🆘 Support


📄 License

MIT License - see LICENSE file


🙏 Credits


✅ Status

Production Ready - Configured and ready to deploy

Repository: christophernemala/tutorialkit
Last Updated: 2026-01-29


Ready to deploy? Click the button at the top! 🚀

About

TutorialKit by StackBlitz - Create interactive tutorials powered by the WebContainer API

Resources

License

Contributing

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 81.4%
  • CSS 7.1%
  • Astro 4.3%
  • JavaScript 4.1%
  • HTML 2.2%
  • MDX 0.6%
  • Shell 0.3%