Play with the dashboard builder and the data story, live, in edit mode
The real @datastripes/dashboard component, not a screen recording, editing a real dataset in your browser
By Vincenzo Manto, founder of Datastripes · dashboard-widget
2026-01-01 → 2026-09-301 rows
Datastripes Trial — showing 1,000 of 1,000 rows. Export disabled.
Sales & Logistics Analysis
Q3 performance dashboard
Total Revenue
€2,840,569
+4.8%
Monthly Trend
amount fell 10.1% from 2026-01 to 2026-09 (337,460 → 303,533), peaking at 337,460 (2026-01) and lowest at 300,973 (2026-06).
Filters
Order Detail
Order ID
Customer
Region
Amount
ORD-1000
Acme Srl
EMEA
€2,552.00
ORD-1001
Blu Logistics
APAC
€2,945.00
ORD-1002
Nord Retail
AMER
€3,985.00
ORD-1003
Verve Foods
EMEA
€3,395.00
ORD-1004
Orbit Tech
APAC
€736.00
ORD-1005
Pico Energy
AMER
€4,184.00
ORD-1006
Acme Srl
EMEA
€1,267.00
ORD-1007
Blu Logistics
APAC
€2,353.00
ORD-1008
Nord Retail
AMER
€2,674.00
ORD-1009
Verve Foods
EMEA
€2,312.00
ORD-1010
Orbit Tech
APAC
€3,926.00
ORD-1011
Pico Energy
AMER
€1,123.00
ORD-1012
Acme Srl
EMEA
€2,217.00
ORD-1013
Blu Logistics
APAC
€2,008.00
ORD-1014
Nord Retail
AMER
€2,395.00
ORD-1015
Verve Foods
EMEA
€875.00
ORD-1016
Orbit Tech
APAC
€2,958.00
ORD-1017
Pico Energy
AMER
€3,508.00
Add a widget, drag a tile, or flip to Story — the grid and the narrative are reading the same config and the same 1,000 sample orders.
What you can actually do here
This is the full component, not a recording. Click Add widget to open the wizard, pick one of the 20+ chart types, drag a tile to a new slot, or resize it from the corner handle. The grid re-queries sampleOrders live and nothing leaves your browser: @datastripes/dashboard runs the aggregation, filtering and rendering itself.
Dashboard vs. data story, same engine
Dashboard mode gives end users a grid they rearrange themselves — the shape a self-serve analytics screen needs. Story mode takes the same config and data and turns it into a guided, scrollable narrative: one chart or KPI at a time, with text in between. Both read from the same DashboardConfig, so you build the data model once and ship either presentation, or let the user switch.
How this maps to your own data
Swap sampleOrders for an array of your own rows and sampleDashboardConfig for a DashboardConfig describing your widgets, and the rest of this page is literally the code you'd ship: <DatastripesDashboard data={rows} config={config} mode="edit" view={view} apiKey={yourKey} />. The config is plain JSON, so whatever a user builds here is what you store and reload later.
What the trial tier limits on this demo
Without a production apiKey the component runs in the same restricted trial every integrator sees first: history capped at 1,000 rows, a watermark on the output, and export disabled. A handful of chart types (heatmap, sankey, graph, gauge, funnel, parallel coordinates, candlestick, box plot, calendar heatmap) also need a valid license. Everything else above is the real, unrestricted editing experience.
Where to go from a demo to production
Read the embedding guide for the React/Vue/Angular/vanilla code, or the full API reference for every widget type, query shape and event the component emits. Both link out from this page.