Professional JavaScript runtime playground powered by WebAssembly

A high-performance, client-side JavaScript execution environment using the Kiren runtime compiled to WebAssembly.

• ⚡ Instant Execution - WebAssembly-powered JavaScript runtime (< 50ms startup)
• 🌐 Client-Side Processing - No server dependency, runs entirely in browser
• 🔧 Modern JavaScript - Full ES6+ support with async/await
• 📊 Performance Monitoring - Real-time execution stats and benchmarking
• 🎯 Zero Setup - No Docker, no containers, just pure web technology
• 🛡️ Secure Sandbox - Browser-native security with isolated execution
• 📱 Offline Ready - Works without internet connection
• 🎨 Professional UI - Modern, responsive interface with Monaco Editor

# Install dependencies
npm install

# Start development server
npm run dev

# Open browser
open http://localhost:3000

• Primary: Kiren WebAssembly runtime for instant execution
• Fallback: Simple simulation mode for compatibility

• Frontend: Next.js 15 + React 19 + TypeScript
• Editor: Monaco Editor (VS Code engine)
• Runtime: Kiren WASM (@kirencore/kiren-wasm)
• Styling: Tailwind CSS + Shadcn/UI
• Build: Turbopack for fast development

npm run dev      # Start development server
npm run build    # Build for production
npm run start    # Start production server
npm run lint     # Run ESLint

src/
├── app/                    # Next.js app router
│   ├── api/execute/       # Simulation API fallback
│   └── page.tsx           # Main playground page
├── components/            # React components
│   ├── playground/        # Playground-specific components
│   └── ui/               # Shared UI components
└── lib/
    └── wasm-executor.ts   # WASM runtime integration

// Try this in the playground
console.log("Hello, Kiren! 🦀");

const fibonacci = (n) => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
};

console.log("Fibonacci(10):", fibonacci(10));

// Async operations work seamlessly
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    return await response.json();
  } catch (error) {
    console.error('Fetch failed:', error);
  }
}

fetchData().then(console.log);

// Built-in performance monitoring
const start = performance.now();
// Your code here
const end = performance.now();
console.log(`Execution time: ${end - start}ms`);

The playground automatically detects the best execution method:

1. WASM Runtime (Preferred) - Instant, client-side execution
2. Simulation Mode (Fallback) - Basic server-side simulation

• ✅ Enable Fallback to Simulation - Allow fallback when WASM fails

# Deploy to Vercel
vercel

# Or use Vercel CLI
npm i -g vercel
vercel --prod

# Build for production
npm run build

# Start production server
npm start

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

MIT License - see LICENSE file for details.

• Kiren Runtime: github.com/kirencore/kiren
• WASM Package: @kirencore/kiren-wasm
• Documentation: kiren.dev

Made with ❤️ for the JavaScript community