dash-univer

A Dash component that embeds the Univer spreadsheet — a full-featured, Excel-like sheet with formulas — directly in your Dash app, wired to Dash callbacks.

pip install dash-univer

Quick start

from dash import Dash, html, Input, Output
from dash_univer import UniverSheet

app = Dash(__name__)

app.layout = html.Div([
    UniverSheet(id="sheet", data={
        "id": "wb",
        "name": "My Workbook",
        "sheetOrder": ["s1"],
        "sheets": {
            "s1": {
                "id": "s1",
                "name": "Sheet1",
                "cellData": {
                    "0": {"0": {"v": "Product"}, "1": {"v": "Revenue"}},
                    "1": {"0": {"v": "Widget"}, "1": {"v": 1000}},
                },
            },
        },
    }),
    html.Pre(id="out"),
])


@app.callback(Output("out", "children"), Input("sheet", "data"))
def show(data):
    return f"{len(data.get('sheets', {}))} sheet(s) in the workbook"


if __name__ == "__main__":
    app.run(debug=True)

Run python usage.py in this repo for a fuller live demo.

How it works

UniverSheet mounts a Univer spreadsheet into a <div>. Univer runs in its own isolated React root inside that div, so it never conflicts with Dash's React tree.

The data prop is the whole workbook (Univer's IWorkbookData as a plain dict) and syncs both ways:

• Sheet → Python: as the user edits, a debounced full snapshot of the workbook is pushed to data, so any callback with Input("sheet", "data") sees the current state.
• Python → Sheet: returning a workbook from a callback's Output("sheet", "data") re-renders the sheet. The component guards against echoing its own snapshots, so this never causes a feedback loop.

Props

Advanced: the live Univer Facade API is exposed as document.getElementById(id).univerAPI for client-side callbacks or custom JS.

Development

Requires Python ≥3.9, Node ≥18, and Chrome (for the tests).

uv venv && source .venv/bin/activate
uv pip install -e ".[dev]"
npm install
npm run build          # webpack bundle + generates the Python classes
python usage.py        # live demo at http://127.0.0.1:8050

pytest --headless      # end-to-end tests (real browser)

npm run build runs webpack (bundling Univer, with React/ReactDOM externalized to the ones Dash provides) and then dash-generate-components, which regenerates dash_univer/UniverSheet.py from the component's PropTypes.

The tests use dash.testing with Selenium; they need a chromedriver matching your installed Chrome on PATH (see Chrome for Testing).

Scope

v1 wraps Univer Sheets (@univerjs/preset-sheets-core) in English. Docs, Slides, other locales, and granular per-cell events are intentionally out of scope for now — the full-snapshot data contract already exposes everything.

License

This wrapper is MIT licensed. Univer itself is Apache-2.0.