A modern, browser-based TypeScript and JavaScript playground with real-time execution and console output.
TypeScript Playground is an interactive development environment that enables developers to write, execute, and experiment with TypeScript and JavaScript code directly in the browser. Built with Next.js and Monaco Editor, it provides a seamless coding experience with instant feedback.
- Real-time Code Execution: Run TypeScript and JavaScript code instantly with keyboard shortcuts
- Monaco Editor Integration: Full-featured code editor with syntax highlighting, IntelliSense, and error detection
- Console Output: View logs and errors in a dedicated console panel
- Theme Support: Switch between light and dark themes
- Code Formatting: Format your code with a single command
- Persistent State: Code is automatically saved to local storage
- Split Panel Layout: Resizable editor and console views
- Node.js 18.x or later
- pnpm (recommended), npm, or yarn
# Clone the repository
git clone https://github.com/thatbeautifuldream/playground.git
# Navigate to the project directory
cd playground
# Install dependencies
pnpm install
# Start the development server
pnpm devOpen http://localhost:3000 to access the playground.
- Cmd/Ctrl + Enter: Run code
- Cmd/Ctrl + S: Format code
- Framework: Next.js App Router
- Editor: Monaco Editor
- Styling: Tailwind CSS
- State Management: Zustand
- UI Components: Radix UI
- Theme: next-themes
Contributions are welcome. Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.
Built with modern web technologies to provide a lightweight and efficient TypeScript playground experience.