In-Browser Editor

PyScript (Pyodide)PyScript (Micropython)

Add a <py-editor> tag anywhere on your page to create an editable, runnable code-editor on the page:

<py-editor>
    # Text inside the editor is pre-populated
    for i in range(5):
        print(i)
</py-editor>

Editors are a worker-only feature - you will need to conigure your server to use the appropriate headers, or use a shim like mini-coi.js.

ENV

By default, all py-editors of a given type willl reuse the same interpreter/worker. To separate different editors or groups of editors into using different interpreters, use the named env attribute:

<py-editor env="first">
    x = 0
</py-editor>

<py-editor env="first">
    print(x) # Works fine; uses the 'first' interpreter
</py-editor>

<py-editor env="second">
    print(x) # Fails: 'second' is a while different Pyodide interpreter.
</py-editor>

Add a <mpy-editor> tag anywhere on your page to create an editable, runnable code-editor on the page:

<mpy-editor>
    # Text inside the editor is pre-populated
    for i in range(5):
        print(i)
</mpy-editor>

Editors are a worker-only feature - you will need to conigure your server to use the appropriate headers, or use a shim like mini-coi.js.

ENV

By default, all mpy-editors of a given type willl reuse the same interpreter/worker. To separate different editors or groups of editors into using different interpreters, use the named env attribute:

<mpy-editor env="first">
    x = 0
</mpy-editor>

<mpy-editor env="first">
    print(x) # Works fine; uses the 'first' interpreter
</mpy-editor>

<mpy-editor env="second">
    print(x) # Fails: 'second' is a while different Pyodide interpreter.
</mpy-editor>