mini-py is a streamlined Web Component that enables the execution of Python code directly within the browser. This component attempts to replicate the <py-script></py-script> tag, utilizing Web Components and Pyodide to run Python scripts seamlessly on web pages.
- Easy Integration: Embed and run Python code just by writing it within the
<mini-py>tags. - Programmatic Execution: Control when your Python scripts execute with JavaScript.
- Event-Driven: Respond to various stages of Python code execution with custom events.
Runs the Python code contained within the mini-py element by default.
<mini-py>
import js
h1 = js.document.createElement("h1")
h1.innerHTML = "This element was created from Python"
js.document.body.prepend(h1)
</mini-py>Optionally prevent automatic execution (autoRun="false") and trigger Python code programmatically.
<mini-py autorun="false">print("Hello, World!")</mini-py>
<button onclick="document.querySelector('mini-py').runCode()">Run Code</button>Monitor the lifecycle of Python code execution using custom events.
<mini-py id="python-script">print("Hello, World!")</mini-py>
<script>
const pythonElement = document.getElementById("python-script");
pythonElement.addEventListener("pyodide-loading", () => {
console.log("Pyodide is loading...");
});
pythonElement.addEventListener("pyodide-loaded", () => {
console.log("Pyodide has loaded.");
});
pythonElement.addEventListener("code-execution-started", () => {
console.log("Python code execution has started.");
});
pythonElement.addEventListener("code-execution-completed", (event) => {
console.log("Python code execution completed. Result:", event.detail.result);
});
pythonElement.addEventListener("code-execution-error", (event) => {
console.error("Python code execution error:", event.detail.error);
});
</script>TODO
mini-py uses modern web technologies that are supported in most recent versions of major browsers. For full compatibility details, refer to the MDN Web Docs on Web Components.