🐍 Python Playground

A modern web-based Python playground built with Vue 3, Vite, Monaco Editor, and Pyodide. Write and execute Python code directly in your browser!

✨ Features

• 🎯 Real-time Python execution - Run Python code instantly in the browser
• 📝 Monaco Editor - Full-featured code editor with syntax highlighting, autocomplete, and error detection
• 🎨 Modern UI - Beautiful, responsive interface built with Vue 3
• 📚 Code Examples - Pre-built examples to get you started quickly
• 📁 File Upload - Upload and load Python files (.py, .txt, .pyw) directly into the editor
• 💾 Download Code - Save your work as a Python file
• 📦 Package Manager - Install and manage Python packages on-demand
• 🔥 Zero Setup - No Python installation required, everything runs in the browser
• 📱 Responsive Design - Works great on desktop and mobile devices

🚀 Technologies Used

• Frontend Framework: Vue 3 with TypeScript
• Build Tool: Vite
• Code Editor: @guolao/vue-monaco-editor
• Python Runtime: Pyodide
• State Management: Pinia
• Styling: Modern CSS with responsive design

🛠️ Getting Started

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/hypnguyen1209/python-playground.git
cd python-playground

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

📋 Available Scripts

• npm run dev - Start the development server
• npm run build - Build for production
• npm run preview - Preview the production build
• npm run lint - Run ESLint
• npm run format - Format code with Prettier

🎯 Usage

1. Write Code: Use the Monaco Editor on the left to write your Python code
2. Upload Files: Click "Upload File" to load existing Python files into the editor
3. Run Code: Click the "Run Code" button to execute your Python code
4. View Output: See the results in the output panel on the right
5. Load Examples: Use the dropdown to load pre-built code examples
6. Install Packages: Use the package manager panel to install additional Python libraries
7. Download Code: Save your work using the "Download" button
8. Clear Output: Use the "Clear Output" button to reset the output panel

📦 Available Python Packages

The playground comes with Python's standard library. Additional packages can be installed on-demand using Pyodide's package system. Common packages include:

• numpy - Numerical computing
• pandas - Data analysis and manipulation
• matplotlib - Plotting and visualization
• scipy - Scientific computing
• pycryptodome - Crypto library
• requests - HTTP library
• beautifulsoup4 - Web scraping
• micropip - Package installer for Pyodide

🎯 Example Code

The playground includes several built-in examples:

1. Hello World - Basic Python syntax
2. Data Structures - Lists, dictionaries, and sets
3. Loops and Functions - Control flow and function definitions
4. Data Analysis - Statistics and data processing
5. File Processing - Text analysis (great for testing uploads!)
6. Object-Oriented Programming - Classes and objects

🚀 Live Demo

🌐 Live Demo: https://hypnguyen1209.github.io/python-playground/

The application features:

1. Write or upload Python code
2. Click "Run Code" to execute
3. View results in real-time
4. Install packages as needed
5. Download your work when done

🔧 Architecture

• Frontend: Vue 3 with Composition API and TypeScript
• Editor: Monaco Editor (same as VS Code) with Python language support
• Python Runtime: Pyodide (CPython compiled to WebAssembly)
• State Management: Pinia for reactive state
• Build System: Vite with modern ES modules
• Styling: CSS Grid/Flexbox with responsive design

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🐛 Troubleshooting

Common Issues

Pyodide Loading Slowly

• Pyodide downloads ~6MB on first load
• Subsequent loads are cached by the browser
• Check browser console for loading progress

Package Installation Fails

• Not all PyPI packages are available in Pyodide
• Check Pyodide package list
• Some packages may require additional setup

Code Execution Errors

• Check Python syntax in the editor
• Some advanced Python features may not be supported
• File system operations are limited in browser environment

Browser Compatibility

• Chrome/Edge: Full support ✅
• Firefox: Full support ✅
• Safari: Full support ✅
• Mobile browsers: Basic support ⚠️

🚀 Deployment

Production Build

npm run build

The build output will be in the dist/ directory, ready for deployment to any static hosting service.

GitHub Pages Deployment

This project includes automatic deployment to GitHub Pages via GitHub Actions:

1. Setup: The repository includes a .github/workflows/deploy.yml workflow file
2. Automatic: Deploys automatically on every push to the main branch
3. Manual: Can also be triggered manually from the Actions tab
4. Live URL: Once deployed, access at https://hypnguyen1209.github.io/python-playground/

Enable GitHub Pages:

1. Go to your repository Settings
2. Navigate to "Pages" in the sidebar
3. Under "Source", select "GitHub Actions"
4. The workflow will automatically deploy on the next push

Other Deployment Options

• Vercel: vercel --prod
• Netlify: Drag & drop the dist/ folder
• Firebase Hosting: firebase deploy

Environment Variables

No environment variables required - everything runs client-side!

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

• Pyodide - Python in the browser
• Monaco Editor - Code editor from VS Code
• Vue.js - Progressive JavaScript framework
• Vite - Next generation frontend tooling

---

🔥 Powered by hypnguyen1209