GitHub Pages Demo

pyodide_editable

Editable Python cells running in the browser with one shared Pyodide runtime. This page exercises the published HTML, MyST, React, and Vue packages.

Live build marker: 2026-07-06 / deploy-refresh-1

Creator

Dr. Chandravesh Chaudhari

Dr. Chandravesh Chaudhari is an Assistant Professor, researcher, and open-source developer focused on building Scientific Intelligence Systems that help people discover, understand, evaluate, and synthesize knowledge at scale.

His work spans Retrieval-Augmented Generation (RAG), Agentic AI, Multimodal Learning, AI Evaluation, and intelligent research workflows, with a particular emphasis on developing reliable and transparent AI systems for scientific discovery and evidence-based decision-making.

Core Runtime

One widget renderer powers every wrapper. Run cells, restart the kernel, and render matplotlib output fully in the browser.

  • Pyodide runtime via jsDelivr
  • Shared output, figures, and kernel controls
  • Used by HTML, MyST, React, and Vue integrations

Beginner Guide

How To Use Every Editor On This Page

Start here if this is your first Pyodide editor. The same runtime powers all cards, so once you learn one workflow, you can use HTML, React, Vue, and MyST the same way.

1. Try The Demo Editors

  1. Click into an editor and modify Python code.
  2. Press Shift+Enter or click Run.
  3. Use Clear to reset output and Restart to reset runtime state.
  4. Use Run All to execute all visible editors.

2. Pick Your Integration

  • HTML: quickest path, no framework required.
  • React: use the PyCell component in JSX.
  • Vue: use the PyCell component in Vue templates.
  • MyST: author executable code blocks in documentation pages.

3. Move To Your Project

  1. Open the GitHub repo or npm package readme from the links above.
  2. Copy a minimal example for your stack.
  3. Start with a single editor, then add package loading or plotting use-cases.

HTML

Plain HTML Helper

Renders a direct browser cell with a pandas + matplotlib monthly sales chart example.

React

React Wrapper

Shows an equivalent React-style cell scenario with the same runtime.

Vue

Vue Wrapper

Shows an equivalent Vue-style cell scenario with the same runtime.

MyST

MyST Directive Adapter

The demo shows a MyST-style code cell rendered by the shared runtime.

```{pyodide}
import math
print("sin(0.5) =", round(math.sin(0.5), 4))
```