Introduction ✌️🐍📝

VitePress Python Editor is a UI component for the VitePress static site generator that enables editing and running Python programs locally in the browser, originally developed to teach students how to code.

It is implemented in Vue using CodeMirror and Pyodide.

Try it out!

Note to keyboard navigation users

To move focus out of the editor, press Escape before Tab or Shift-Tab.

By default, Tab and Shift-Tab will indent and dedent the code, respectively.

Edit the code and press the play button ▶️:

# Change this to say "Hello world!"
print("Hello!")

Support for Python's input() is built-in:

name = input("What's your name? ")

if name:
    print(f"Hello {name}!")
else:
    print(f"Hello stranger!")

Visit the Examples page for more demos.

Additional features

• Auto-saves editor changes to localStorage before leaving page and each run
• Runs in a web worker to avoid blocking the main UI thread
• Shares one Pyodide instance across multiple editors in a session for fast loading times
• Handles the Tab key in an accessible way (CodeMirror docs)
• Undo and redo changes via Ctrl+Z and Ctrl+Shift+Z keyboard shortcuts

Next steps

• Installation: steps to begin adding the editor to your own VitePress project
• Usage: see how the editor is invoked from within .md files