panel-live

Early-stage development — APIs may change. If you find a version that works, pin it. Check out the roadmap.

Browser note: Some Edge/Chrome users may experience crashes — Firefox is a known workaround. See known issues.

Write, edit, and run Python interactively in the browser — no server required.

Turn any web page into an interactive Python playground with the <panel-live> web component. Works with matplotlib, pandas, scikit-learn, Panel, and 200+ packages from the Python ecosystem. Visualizations, analyses, dashboards, and interactive tools are fully interactive — users can view, explore, edit code, and re-run, all directly in the browser via Pyodide — no backend, no deployment, no infrastructure.

Quick Start

HTML (any web page)

Include the CSS and JS from the CDN:

<link rel="stylesheet" href="https://cdn.holoviz.org/panel-live/latest/panel-live.css">
<script src="https://cdn.holoviz.org/panel-live/latest/panel-live.js"></script>

Then add a <panel-live> element with your Panel code inside:

App mode — renders the app with no editor:

<panel-live>
import panel as pn

slider = pn.widgets.IntSlider(name="Value", start=0, end=100, value=50)
output = pn.pane.Markdown(pn.bind(lambda v: f"## Value: {v}", slider))
pn.Column(slider, output).servable()
</panel-live>

Editor mode — editable code with a Run button:

<panel-live mode="editor">
import panel as pn

name = pn.widgets.TextInput(name="Name", value="World")
pn.Column(pn.bind(lambda n: f"# Hello, {n}!", name), name).servable()
</panel-live>

Playground mode — side-by-side editor and live preview:

<panel-live mode="playground" layout="horizontal">
import panel as pn

slider = pn.widgets.IntSlider(name="Value", start=0, end=100, value=50)
output = pn.pane.Markdown(pn.bind(lambda v: f"## Value: {v}", slider))
pn.Column(slider, output).servable()
</panel-live>

See the full playground for an interactive editing experience.

MkDocs / Documentation

In your MkDocs docs, use fenced code blocks with the panel language:

```panel
import panel as pn

slider = pn.widgets.IntSlider(name="Value", start=0, end=100, value=50)
output = pn.pane.Markdown(pn.bind(lambda v: f"## Value: {v}", slider))
pn.Column(slider, output).servable()
```

Add attributes for other modes:

```{.panel mode="editor" theme="dark"}
# your code here
```

Configure the custom fence in your zensical.toml (or mkdocs.yml):

[project.markdown_extensions.pymdownx.superfences]
custom_fences = [
  { name = "panel", class = "panel-live", validator = "panel_live.fences.validator", format = "panel_live.fences.formatter" }
]

Features

• 3 modes: app (output only), editor (code + output), playground (side-by-side)
• Web Worker execution — Pyodide runs in a Dedicated Worker, keeping the page responsive
• Light / dark / auto theming that follows the host page
• CSS custom properties for full branding control
• Real-time print output — print() streams incrementally as code executes
• Multi-file support via <panel-file> child elements
• Explicit requirements via <panel-requirements>
• MkDocs integration via fenced code blocks and pymdownx.superfences
• No server needed — runs entirely in the browser via Pyodide

Live Demos

• Examples — many cool examples
• API Explorer — interactive configuration
• Playground — full-screen editing

Pin Your Version

This project is in its early stages, so if you find a version that suits your needs, it's recommended to pin your version, as updates may introduce changes.

Installation

pip install panel-live

Development

git clone https://github.com/panel-extensions/panel-live
cd panel-live

All development uses pixi for environment management:

# Setup
pixi run postinstall                 # pip install -e . (editable install)
pixi run npm-install                 # install npm dependencies (esbuild, vitest)
pixi run lint-install                # install pre-commit hooks

# Python
pixi run test                        # pytest
pixi run test-coverage               # pytest with coverage

# JavaScript
pixi run build-js                    # bundle lib/ → dist/ (production)
pixi run test-js                     # run Vitest unit tests (69 tests)
pixi run test-js-coverage            # Vitest with V8 coverage

# Docs
pixi run -e docs serve               # live dev server
pixi run -e sphinx build             # build Sphinx test site
pixi run -e sphinx serve             # serve Sphinx site on localhost:8001
pixi run -e quarto build             # render Quarto test site
pixi run -e quarto serve             # preview Quarto site

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch: git checkout -b feature/YourFeature.
3. Make your changes and commit them: git commit -m 'Add some feature'.
4. Push to the branch: git push origin feature/YourFeature.
5. Open a pull request.

Please ensure your code adheres to the project's coding standards and passes all tests.