docs/widgets

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