Adding Widgets
Add charts, KPIs, and tables to a dashboard: browse the full widget catalog, reuse a widget you already built, or ask an AI agent.
8 min read
On this page
Widgets are the building blocks of a dashboard: each one is a chart, a KPI, a table, or another visual tied to your data. You add widgets from the library, which you open with the ] key or the Widgets button in the editor toolbar. The library has four tabs, each a different way to get to the widget you want.

The four library tabs#
Widgets
The full catalog of widget kinds: every chart type plus KPI, table, text, image, embed, filter, action, and custom. Search it, preview each card, and click or drag to add a fresh widget.
Dashboard
The widgets already on this dashboard, in one place. Edit one (opens the inspector) or remove it from the dashboard.
Workspace
Every widget you have already built. Reuse one across dashboards without rebuilding it.
Packages
Portable custom-widget packages available to your workspace. Choose one, pick its data, and install it.
A quick gloss of the terms that come up below: a widget is pinned to a dashboard (it appears there, but the underlying widget is shared, not copied); the inspector is the settings panel that opens when you select a widget; and to detach a widget is to remove it from one dashboard without deleting it.
Another way: ask an AI agent
Browsing the catalog#
The Widgets tab is where most widgets start. It lists every widget kind, with a search box at the top and a row of category chips under it: All, Charts, Native, Visuals, Content, Controls, and Custom (on Home, Native comes first). Type to narrow the list (for example "donut" or "table"), then add the one you want.
Each card is a tile that leads with a preview:
- Charts, KPIs, tables, and text notes draw a real sample with the same renderer your dashboard uses.
- Native BankSync widgets (such as account balances or feed activity) show a preview of the widget itself.
- Images, embeds, filters, actions, and custom widgets show an illustration of what they look like on a dashboard.
Under the preview, the card shows the kind's icon beside its name and a one-line description. A few cards also carry a badge:
| Badge | Meaning |
|---|---|
| Soon | Not ready yet. The card is visible so you know it is coming, but it cannot be added. |
| Beta | Works, but still maturing. Custom widgets carry this badge. |
| Needs data | Your workspace has no data source yet. You can still add the widget; it waits until you connect a source. |
For more room, click Browse all at the top of the library, or open the catalog from the Widgets page. It shows the same cards with bigger previews under Create, Saved, and Packages tabs. Cards sit in a responsive grid: two per row in the library panel and on a phone, and three or four per row in the wider catalog.
Add a widget from the catalog
Open the library
Press the bracket key, or click Widgets in the toolbar.Find a kind
Stay on the Widgets tab and scroll, pick a category chip, or type a word like "kpi" or "bar" to filter.
Preview it
Every card leads with a preview. Chart, KPI, table and note cards are drawn from sample rows by the same renderer your dashboard uses; the preview is illustrative, not your data.
Add it
Click the card to drop it at the next open spot, or drag it onto the canvas to place it precisely.
Worked example: spending by category
Whatever kind you start from, you can switch it in the inspector after placing it. Every chart kind in the catalog can be added and connected to your data, including the less common ones (funnel, waffle, polar, bubble, heatmap, treemap, radar, box plot, sankey, sunburst, and similar). Each gives you a field editor for picking the columns it needs. For a hierarchy chart such as a treemap or sunburst, + Add level adds the next column you have not used yet.
What happens after you add a data widget#
BankSync prepares the widget against the sources you can actually access before it creates a runnable query and widget:
- With one compatible source and one valid field mapping, it completes setup and shows Using the source name · Change. The editor's Undo action can remove the new widget.
- With several compatible sources, it places the widget unconnected rather than picking for you. Its cell reads No data source connected yet with a Choose data action; the Data tab suggests the closest matches and lets you browse every bank, feed, and table in the workspace.
- With ambiguous fields, it asks which real fields should fill the widget's roles. It does not guess transaction-shaped names for a custom table.
- With no sources at all, the cell offers Connect bank, Create table, and Create feed, and reopens the same widget after a connection detour.
- If source inventory is temporarily unavailable, it says so and offers Retry. It does not misreport an outage as an empty workspace.
An unconnected widget owns no fake query, placeholder feed, or sample financial rows. It is a full widget — move, rename, duplicate, or delete it like any other — and safe to leave on an active dashboard while you design. It must be connected or removed before the dashboard can be published.

Gauge, meter, and progress are chart kinds (the "single value" family), so you find them in the catalog alongside line, bar, and the rest.
Placing a widget: click or drag#
This works the same way no matter which tab you added from. Clicking a library entry adds the widget at the next open spot on the grid. To place it precisely, drag it from the library onto the canvas: a ghost outline shows where it will land before you drop it. Once placed, drag the widget to move it and drag an edge to resize. The layout saves automatically.
On a brand-new, empty dashboard you do not even need to open the library first: the canvas shows an Add a widget prompt that opens the same chooser.


Reusing a widget you already built#
The Workspace tab lists every widget in your workspace, each with a live preview. Adding one from here pins it onto the current dashboard rather than making a copy: it is the same widget, shown in more than one place. A small counter on each card shows how many dashboards use it (hover it for "Used on 3 dashboards"), and widgets already on this dashboard offer Edit and Add another placement instead of Add.
When you select a widget that is used on more than one dashboard, the inspector says so: "Used on 3 dashboards. Changes apply here only." Your edits then apply to this dashboard only: the first one turns this placement into its own copy, named "… (local)", and the other dashboards keep the original. Click Change everywhere before editing to update every dashboard instead. A widget used on just one dashboard shows no notice and saves in place.
Pinning is not copying
More than charts#
Not every widget is a chart. The Widgets tab lists every kind, charts and non-charts alike. Search or scroll to find these:
KPI
A single big number with an optional comparison and sparkline.
Table
A formatted, paginated table of rows. Each column can be styled per its meaning: currency, percent, status pills, progress bars, mini sparklines, ratings, chips, links, and more.
Text
A Markdown note for headings, context, or instructions.
Image & Embed
A static image or an embedded external page.
Filter & Action
A filter control, or a button that runs a workspace action.
Custom widget
For developers: author your own widget in TypeScript against the BankSync widget SDK.
The catalog also has a Layered chart (a combo of bars, lines, and areas on one set of axes) and a Divider for section headings and spacing; see Layout & composition widgets. Stat grid, Tabs, and the text, number, and date inputs are marked Soon and cannot be added yet.
Tables are richly formatted
Removing a widget from a dashboard#
There are two ways to take a widget off a dashboard, and both ask you to confirm:
- From the Dashboard tab of the library, find the widget and click its trash icon.
- Or select the widget on the canvas (its settings open in the inspector) and click ✕ Remove from dashboard at the bottom of the inspector.
Either way this detaches it from this dashboard only: the widget stays in your library, so any other dashboard that pins it is unaffected and you can re-add it later.

Related guides#
- Binding data: point a widget at a feed and choose what to group by and measure.
- The chart kind catalog: every chart kind and when to use it.
- KPI, table & gauge widgets: configure the non-chart widget types, including a table's per-column formats.
- Templates: the portable way to reuse a widget or a whole dashboard layout across workspaces.
- Publishing and sharing: share a widget or dashboard with people outside the editor.
Bind a widget to your data
Use this page with your AI assistant
Every BankSync doc is available as plain Markdown for agents and LLMs.





