# Adding Pane

> Step-by-step guide for adding a new visualization pane type to Visdom (client, server, frontend, tests)

- Skill: `fossasia/adding-pane` (Agent Skill)
- Install (CLI): `npx skillmds@latest add fossasia/adding-pane`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fossasia/adding-pane/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: fossasia (https://skillmd.com/u/fossasia)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/fossasia/adding-pane

---


# Skill: Adding a New Pane Type

## When to Use

Use this skill when adding a new visualization type (e.g., a new chart, widget, or media pane) to Visdom.

## Core Workflow

1. **Python Client** (`py/visdom/__init__.py`):
   - Add a new method to the `Visdom` class with `@pytorch_wrap`
   - Format data as `{"data": [{"type": "my_type", "content": ...}], ...}`
   - Call `self._send(msg)` to POST to `/events`

2. **Server** (`py/visdom/utils/server_utils.py`):
   - Add a new `elif ptype == "my_type":` branch in the `window()` function (around line 202)
   - Define what fields are stored in the window dict

3. **Frontend** (`js/panes/`):
   - Create `MyPane.js` following the pattern in `TextPane.js` or `ImagePane.js`
   - Use `forwardRef` + `React.memo` pattern from `Pane.js`

4. **Registration** (`js/settings.js`):
   - Add `my_type: MyPane` to the `PANES` object
   - Add default size to `PANE_SIZE`: `my_type: [width, height]`

5. **Type stubs** (`py/visdom/__init__.pyi`):
   - Add the method signature for type checking

6. **Demo** (`example/components/`):
   - Create a demo script exercising the new pane type
   - Import it in `example/demo.py`

7. **Tests** (`playwright/tests/`):
   - Add a Playwright spec for the new pane type, following existing patterns

## Guardrails

- Always use the `@pytorch_wrap` decorator on new client methods
- Follow the `forwardRef` + `React.memo` pattern for pane components
- Import and register new panes in `js/settings.js`
- Never manually edit compiled files in `py/visdom/static/`

## Documentation

- [Skill reference](references/REFERENCE.md)
- `py/visdom/__init__.py`
- `py/visdom/utils/server_utils.py`
- `js/settings.js`
- `js/panes/`
- `AGENTS.md`
- `CONTRIBUTING.md`

## Assets

- See `assets/README.md` and store templates/resources in `assets/`.

## Tests

- Follow the default flow in `references/TESTS.md`.