packages = ["bokeh", "pandas", "numpy", "networkx", "diagrams", "scikit-learn", "pillow", "matplotlib", "plotly"] [[fetch]] files = ["diagrams_base.py"] from = "../../python/diagrams/" [[fetch]] files = ["pyscript_manager.py", "data.py"] to_folder = "lib" from = "../../python/lib/" [[fetch]] files = ["bokeh_utils.py"] from = "../../python/bokeh/" [[fetch]] files = ["matplotlib_utils.py", "plotly_utils.py"] from = "../../python/matplotlib/" [[fetch]] files = ["agent.py", "trainer.py", "utils.py", "metrics_chart.py", "crossover.py", "__init__.py"] to_folder = "ml/neuro" from = "../../python/ml/neuro/" [[fetch]] files = ["trainer.py"] to_folder = "ml/grokking" from = "../../python/ml/grokking/"

Loading...

⏳

Loading Python...

Initializing interoperability demo

Interoperability (JS to Python)

PyScript's interoperability allows seamless communication between Python and JavaScript...

: Enter your name and age below...

🏗️ Architecture Highlights

This example demonstrates proper separation of concerns:

  • Python - Pure business logic, sends only data via window callbacks (no innerHTML!)
  • InteropController - Manages Python lifecycle and communication layer
  • Svelte UIHandler - Pure UI rendering with reactive state based on data received

View Python source

How It Works:

  • Controller Pattern: InteropController manages Python setup and callbacks
  • Data-Only Communication: Python sends plain objects, Svelte renders the UI
  • Reactive UI: Svelte automatically updates when data changes
  • Event-Driven: User interactions trigger Python functions

Use Cases:

  • Process form data with Python's powerful libraries
  • Update UI dynamically based on Python computations
  • Combine JavaScript frameworks (like Svelte) with Python logic
  • Access Python's data science ecosystem from web interfaces
PreviousPrevious NextNext

🐍 Python Console