jupyter-tldraw

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #llm #android #macos #java #awesome #vue #pytorch #ios #open-source

(★ 272)

the very good free whiteboard tldraw in the jupyter output

파일 탐색기

최종 버전 다운로드 (.zip)

- basic.jsx
- monkey.jsx
- stroke.jsx
- widget.css
- - __init__.py
.gitignore
basic.ipynb
dev_notes.md
LICENSE
monkey.ipynb
monkey_marimo.py
node_config.mjs
package-lock.json
package.json
pyproject.toml
README.md
stroke.ipynb
uv.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Jupyter Tldraw

[![PyPI version](https://img.shields.io/pypi/v/tldraw.svg)](https://pypi.org/project/tldraw/)

A [tldraw](https://tldraw.com) whiteboard as a Jupyter widget, built with [anywidget](https://anywidget.dev).

## Install & run

```sh
uv run --with jupyterlab --with tldraw jupyter lab
```

## Examples

Three example notebooks are included:

| Notebook | Widget | What it shows |
| --- | --- | --- |
| [`basic.ipynb`](basic.ipynb) | `TldrawWidget` | A plain tldraw canvas embedded in a cell. |
| [`monkey.ipynb`](monkey.ipynb) | `MonkeyWidget` | A 🐒 emoji on the canvas; its `x` / `y` are synced as traitlets, so you can `.observe(...)` the position from Python. |
| [`stroke.ipynb`](stroke.ipynb) | `StrokeWidget` | Captures the currently-drawn freehand stroke as a `[[x, y], ...]` list in Python via the `stroke` traitlet. |

Minimal usage:

```python
from tldraw import TldrawWidget
t = TldrawWidget()
t
```

## Developer setup

1. Clone the repo
2. `npm i`
3. `uv sync`
4. `npm run dev` (esbuild watches `js/*.jsx` and rebuilds bundles into `src/tldraw/static/`)
5. `uv run jupyter lab`

### Hot module reload

Put this at the top of any dev notebook, *before* importing the widget:

```python
%env ANYWIDGET_HMR=1
%load_ext autoreload
%autoreload 2
```

`ANYWIDGET_HMR=1` makes anywidget watch the `_esm` / `_css` files; `%autoreload 2` does the same on the Python side. Combined with `npm run dev`, edits to `js/*.jsx` swap into the running widget without re-running the cell.

> anywidget reads `ANYWIDGET_HMR` at import time — if you forgot to set it first, restart the kernel once.

# In marimo

jupyter-tldraw

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

jupyter-tldraw

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README