code-playpad

Run Python, JavaScript, TypeScript and Java in any page

A code editor that actually runs the code it shows, as one custom element. No backend, no iframe, no sign-up — it all happens in the reader's own browser. Type in the box and press Run.

Python · JavaScript · TypeScript · Java Real CPython 3.14 via Pyodide — full standard library, input(), tracebacks, numpy on demand — plus the browser's own JavaScript engine, TypeScript with its types stripped, and a documented subset of Java 25 compiled right in the page. Each language loads only on the pages that use it.

name = input("what's your name? ") for i in range(1, 4): print(f"{i}. hello {name}") sum(n * n for n in range(1, 11))

That snippet blocks on input() — the program waits for you, the way a terminal does. No cross-origin isolation required.

One runtime per page

Every widget on a page shares a single Web Worker and a single Python runtime. Ten editors cost one ~6MB download, not ten.

See two editors share a worker →

Real modules and packages

A widget can hold a whole small project — flat modules, packages with __init__.py, data files you open(). Tracebacks name the real file and line.

See a package in a widget →

Java, compiled in the browser

A subset of Java 25 — compact source files, methods, arrays, strings — with javac-style errors and Java stack traces. No JVM, no server, one small chunk.

Run some Java →

Lessons that keep their place

Edits persist in IndexedDB, and soft navigation keeps the runtime warm between pages — the first run on a new lesson takes milliseconds, not seconds.

Walk between two lessons →

What a page downloads

Each language loads only when a widget needs it. These are the downloads once a reader presses Run, with the CDN build: one-widget pages loaded in a browser, each file gzipped, and CDN files as the CDN sent them.

Page uses code-playpad (gzip) Also fetched from a CDN at run time 0.3.0 (gzip)
Python166.3 KBPyodide, about 6.0 MB (a 3.3 MB wasm file and a 2.4 MB standard library)165.8 KB
JavaScript180.4 KBnothing179.9 KB
TypeScript227.3 KB (with the 46.9 KB transform, since 0.5.2)nothing179.9 KB
Java277.4 KBnothing216.4 KB
Java, with collections372.5 KBnothing233.2 KB
All four476.9 KBPyodide273.9 KB

Add it to a page

One script tag. CodeMirror is bundled; Python is fetched at runtime.

<script type="module"
  src="https://cdn.jsdelivr.net/npm/code-playpad@0.8.0/dist/standalone.js"></script>

<code-playpad height="180">
  print("hello from a CDN")
</code-playpad>

Or install it and use the modular build, with CodeMirror as a peer dependency so you never end up with two copies:

npm install code-playpad

React wrapper included — see it here. Works in plain HTML, Astro, Next.js, and anything else that can render an element.