# Widgets

Widgets are the building blocks of the canvas and the Control Panel. Each widget is a small,
self-contained app: its own data, its own presentation settings, and optionally a live data binding.

## Two families

| Family | Source | Rendered as | Examples |
| --- | --- | --- | --- |
| **Vue widgets** | `w4c-quasar/src/components/widgets/` | native Vue components | List, Tree, Table, Board |
| **React widgets** | `w4c-quasar/src/components/excalidraw/` | Excalidraw `embeddable` elements | Chart, Visualization, Markdown, Diagram, Form, Code |

## Where widgets render

- **Excalidraw canvas** — a widget is an `embeddable` element. Its frame, fill and stroke are drawn by
  the node itself, so a widget never draws its own border.
- **Control Panel** (`/control-panel`) — a grid of widget cells. Each cell renders the same widget
  type, with the style stored per cell.

## The registry

`src/components/control-panel/widgetRegistry.ts` is the catalog: every type with its label, icon,
category and size constraints. Widgets **self-seed** their metadata when empty, so adding a new one
always shows a sensible default instead of an empty frame.

## Data: static or bound

- **Static** — the data lives in the widget's own metadata (columns and rows for a table, cards for a
  board). Everything is editable in place.
- **Bound** — the widget carries a data binding instead. Bound widgets are read-only and refresh from
  their source.

## Pages

- [Table](#/docs/widgets/table)