Skip to content

nahid619/CodeDeck

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

▶ CodeDeck — Browser-Based JS & Python IDE

A lightweight, zero-dependency online IDE that runs JavaScript and Python entirely in your browser — no backend, no server, no setup required.

JavaScript executes natively via the browser engine. Python runs through Pyodide (WebAssembly), bringing the full scientific Python stack offline — including NumPy, Pandas, Matplotlib, scikit-learn, SciPy, SymPy, and more.


✨ Features

  • Monaco Editor — the same editor that powers VS Code, with syntax highlighting, IntelliSense, and smooth cursor animations
  • JavaScript execution — runs instantly in the browser, zero latency
  • Python via Pyodide — full CPython 3.x runtime compiled to WebAssembly, runs completely offline after initial load
  • Auto package detection — scans your imports and automatically loads the right Pyodide packages before running
  • Matplotlib plot captureplt.show() renders PNG plots inline inside a dedicated Plots tab
  • Stdin / Input support — provide multi-line program input before running, with full input() support in Python
  • Tabbed output panel — separate tabs for Output, Plots, and Stdin
  • Draggable split layout — resize the editor and output panels with a drag handle
  • Dark & Light themes — toggle between VS Code dark and light themes, synced across Monaco and the UI
  • Status bar — live cursor position, active language, execution engine, and run status
  • Keyboard shortcutCtrl+Enter / Cmd+Enter to run

🧪 Supported Python Libraries

CodeRun auto-detects and loads the following packages from your imports:

Import name Package loaded
numpy / np numpy
pandas / pd pandas
matplotlib / plt matplotlib
sklearn scikit-learn
scipy scipy
sympy sympy
PIL Pillow
cv2 opencv-python
seaborn / sns seaborn
plotly plotly
statsmodels statsmodels

Additional packages can be installed at runtime via micropip.


🚀 Getting Started

CodeRun is a fully static project — just open index.html in any modern browser.

Option 1 — Open directly

git clone https://github.com/your-username/CodeDeck.git
cd CodeDeck
# Open index.html in your browser
open index.html        # macOS
start index.html       # Windows
xdg-open index.html    # Linux

Option 2 — Serve locally (recommended for Pyodide)

# Python
python -m http.server 8080

# Node.js
npx serve .

Then visit http://localhost:8080.

Note: Pyodide loads from a CDN on first use and requires an internet connection the first time Python is selected. After that, the runtime is cached by the browser.


📁 Project Structure

CodeDeck/
├── index.html     # App shell, layout, and CDN script tags
├── script.js      # All IDE logic — Monaco setup, JS runner, Pyodide bridge, UI
├── style.css      # Full UI styling with CSS variables for dark/light theming
└── update.bat     # Windows helper script

🛠 Tech Stack

Technology Role
Monaco Editor v0.44 Code editor (VS Code engine)
Pyodide v0.25.1 Python runtime via WebAssembly
Pyodide micropip Runtime Python package installer
JetBrains Mono Editor font
Vanilla JS All app logic, no framework
CSS Variables Theming system

No build step. No npm. No bundler. Pure HTML, CSS, and JavaScript.


⌨️ Keyboard Shortcuts

Shortcut Action
Ctrl+Enter / Cmd+Enter Run code

📦 How Python Execution Works

  1. On first Python run, Pyodide (~10MB) is fetched from the CDN and initialized
  2. A custom input() function is injected, reading from the Stdin tab line by line
  3. stdout and stderr are redirected and captured separately
  4. Matplotlib is patched to use the non-interactive Agg backend; plt.show() is overridden to capture figures as base64 PNG and display them in the Plots tab
  5. Any open figures not explicitly shown are auto-saved at the end of execution
  6. The runtime is cached by the browser — subsequent runs are fast

🌐 Browser Compatibility

Works in all modern browsers. Requires:

  • WebAssembly support (for Pyodide)
  • ES2020+ JavaScript
  • Internet connection on first Python run (for CDN assets)

📄 License

MIT License — free to use, fork, and modify.


🙋 Contributing

Pull requests are welcome! If you find a bug or want to suggest a feature, please open an issue.

About

Browser-based JS & Python IDE. Runs entirely offline — no server needed. Monaco Editor + Pyodide WebAssembly. Supports NumPy, Pandas, Matplotlib & more.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors