The Ultimate SaaS Online IDE
Live Demo | GitHub
- 💻 Multi-Language IDE
Supports 10+ languages with real-time execution
- 🎨 Theme Customization
5 VSCode-inspired themes with dark/light mode
- 📊 Execution Analytics
Track success/error states with detailed output logging
- 🔍 Smart Search
Advanced filtering for community code snippets
- 👤 Personalized Workspace
Font sizing controls and execution history
- 🤝 Community Sharing
Publish, discover, and comment on code snippets with peers
| Technology |
Use Case |
| Next.js 15 |
App Router & Server Actions |
| Convex |
Real-time Database |
| Clerk |
Auth & User Profiles |
| TypeScript |
Type-Safe Codebase |
| Component |
Technology |
| Code Execution |
Docker + WebAssembly |
| Syntax Highlight |
React Syntax Highlighter |
| UI Components |
Shadcn + Tailwind CSS |
| Service |
Functionality |
| Webhooks |
Third-party Integrations |
| Vercel Analytics |
Usage Monitoring |
| GitHub API |
Code Import/export |
| Convex |
Real-time Database |
| Lemon Squeezy |
SaaS Payment |
- Node.js v18+
- Convex account
- Clerk application
- Clone the repo:
git clone https://github.com/ryanhui30/code-craft.git
cd code-craft
- Install dependencies:
- Configure environment variables:
- Duplicate .env.example as .env.local
- Add your credentials:
# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_key_here
CLERK_SECRET_KEY=your_key_here
# Convex Database
NEXT_PUBLIC_CONVEX_URL=your_url_here
CONVEX_DEPLOYMENT_KEY=your_key_here
- Database Setup:
npx convex dev
npx convex deploy
- Run locally:
npm run dev # Start dev server
npx convex dev # Launch Convex
📩 Contact: ryanhui30@gmail.com