How to Run Python in the Browser Using Pyodide and EditorJS

Running Python in an LMS usually means setting up server-side execution — containers, sandboxing, scaling, security. For every student who clicks "Run", a server somewhere has to spin up, execute code, and return the result. It works, but it's expensive, complex, and adds latency.

We wanted a different approach for Cubite, our multi-tenant platform for building and hosting learning management systems.

What if Python just ran in the browser? No server, no containers, no infrastructure to manage per learner.

That's what we built using Pyodide and EditorJS.

What is Pyodide?

Pyodide is CPython compiled to WebAssembly. It runs the real Python interpreter directly in the browser — not a subset, not a transpiler, the actual CPython runtime. It supports NumPy, Pandas, Matplotlib, and hundreds of other packages from the Python ecosystem.

Key things that make it work for education:

• Real Python — students learn actual Python, not a simplified version
• Package support — import NumPy, Pandas, and other scientific libraries via micropip
• Zero infrastructure — nothing to provision, scale, or secure on the server side
• Offline capable — once loaded, code execution works without a network connection

Why We Built a Custom EditorJS Plugin

Cubite uses EditorJS as its core content editor. Course creators, instructors, and content teams use it to build course materials, blog posts, and pages. EditorJS stores content as structured JSON blocks — each block is a self-contained unit with its own type, data, and rendering logic.

We needed a code editor block that:

1. Lets course creators write Python code snippets directly in the content editor
2. Lets learners run that code in the browser when viewing the course
3. Shows output and errors in a console panel
4. Supports syntax highlighting and multiple languages
5. Works across all tenant sites without any per-site server configuration

So we built editorjs-code-editor — a custom EditorJS plugin with in-browser Python execution powered by Pyodide.

How It Works

For course creators (editing mode)

The plugin appears as a block in the EditorJS toolbar. Add it, write Python code, configure the language and visual style. The block saves as JSON alongside all other course content.

First you need to add Code Editor component in the page, blog post or the course your are drafting

Next You setup editable mode and enable Run button so students can run python code and for the last step is writing the code you want the student edit and run

For learners (viewing mode)

The code block renders with syntax highlighting, a "Run" button, and a console output panel. When the learner clicks Run:

1. Pyodide loads on demand (~20MB, cached after first load)
2. The Python code executes in the browser via WebAssembly
3. stdout and stderr are captured and displayed in the console panel
4. Execution time is shown so learners can see performance characteristics

Technical Details

The plugin is built with React and CodeMirror 6. Here's what's under the hood:

Lazy loading — Pyodide is only loaded when a Python code block is present. Other language modes (JavaScript, HTML, CSS, SQL, JSON, YAML, Bash, and more) work without it.

Singleton pattern — One Pyodide instance per page, shared across all Python blocks. This keeps memory usage reasonable even with many code exercises on a single page.

Pre-installed packages — Course creators can configure packages to pre-install:

codeEditor: { class: CodeEditor, config: { preinstallPackages: ['numpy', 'pandas'], }, }

4 visual styles — Default, Bordered, Terminal, and Minimal. Each style can be configured per block, so course creators can match the code editor to their content design.

Dark mode — Automatically detects the site theme via data-theme, .dark class, or prefers-color-scheme.

Why Not Server-Side Execution?

We still use server-side execution for some use cases — Cubite also provides managed hosting and integration for Open edX and Moodle instances, which have their own code execution backends. But for Cubite's native LMS, browser-based execution via Pyodide has clear advantages:

For an LMS where the majority of exercises are introductory to intermediate Python, the tradeoff is worth it. Advanced use cases that need full package support or GPU access still route through server-side execution.

The Open-Source Plugin

We've open-sourced the EditorJS code editor plugin:

editorjs-code-editor on GitHub — Live Demo

Install it:

npm install editorjs-code-editor

Features:

• In-browser Python execution via Pyodide WebAssembly
• 12 language modes with syntax highlighting
• 4 visual styles with dark mode support
• Console output panel with error highlighting and execution timing
• Configurable pre-installed Python packages
• Zero server dependencies

We're open-sourcing more of our 27 EditorJS plugins over time — interactive assessments, quizzes, and other education-focused blocks.

What's Next

We're working on:

• Shared state between blocks — so a variable defined in one code block is available in the next, like a notebook
• Auto-grading — compare learner output against expected results for automated assessment
• More languages via WASM — we already have a separate WASM editor plugin, and we're looking at bringing Rust and Go execution to the browser

If you're building an LMS or any content platform that needs interactive code execution, give editorjs-code-editor a try. And if you need a full multi-tenant LMS with this built in, check out Cubite.