Active users
4,670
↑ 8.4% vs. previous period
Solution · Dashboards
A dashboard that fits the way you work.
Arrange KPI widgets, compare a reporting period and explore the data with filters. The live board runs on fictional data, entirely in your browser. The metric-card and filter-bar components shown here were released in @texuli/data 0.18.0.
Status: in development
Explore a dashboard, then arrange it
Try this
- Choose product analytics, support operations or a sales pipeline.
- Change the reporting period or clear the Region filter to update the sample KPIs.
- Use Move and Resize handles with the keyboard, or drag a widget by its handle.
Use Reset to return to the starting example.
Product analytics
Mar 1–10, 2026Activation rate
42.0%
↑ 2.1 pts vs. previous period
Returning users
31.0%
→ 0.3 pts vs. previous period
Support tickets
163
↓ 5.2% vs. previous period
Activation and returning users across fictional product regions.
Product analytics loaded with the North region filter.
Press Space or Enter to pick up. Use the arrow keys to move one column or row, Space or Enter to drop, Escape to cancel.
Press Space or Enter to resize. Left and right arrows change the width, up and down the height. Space or Enter to finish, Escape to cancel.
Layout changes stay in this preview and are not saved.
{
"scenario": "product-analytics",
"period": {
"start": "2026-03-01",
"end": "2026-03-10"
},
"filters": {
"type": "group",
"op": "and",
"children": [
{
"type": "condition",
"field": "region",
"operator": "eq",
"value": "North"
}
]
}
}If the interactive demo cannot load, use the static preview above.
From sample rows to a board you can arrange.
Choose a view
Select product analytics, support operations or a sales pipeline.
Set the period
Pick a reporting range; the preview scales the fictional sample to that window.
Filter the rows
Apply a Region condition, inspect its chip, or clear filters to restore all sample rows.
Arrange the board
Move and resize each widget with a pointer or the keyboard.
Package:
@texuli/data
Solution
Dashboards
Packages
- L4
@texuli/dataDashboard grid, layout engine, filter builder and filter barSubpaths: ./dashboard · ./dashboard/engine · ./filter-builder · ./filter-bar
Built on
- L3
texuli(Styled components) - L2
@texuli/tokens(Theme tokens) - L1
@texuli/primitives(Headless primitives) - L0
@texuli/core(Texels and the URL policy) - L0
@texuli/drag(Drag engine)
Build with Dashboards
Start with a widget grid
Install
pnpm add @texuli/dataCompose a dashboard
<script lang="ts">
import { Dashboard, DashboardWidget } from '@texuli/data/dashboard';
</script>
<Dashboard label="Operations" editable>
<DashboardWidget id="revenue" title="Revenue" x={0} y={0} w={6} h={2}>
<p>$48,290</p>
</DashboardWidget>
</Dashboard>Verified by the @texuli/data/dashboard API and the dashboard behavior suite
Keep building
Build a dashboard grid
Use the widget grid and keyboard handles in your own Svelte view.
Read the widget API
Start with the released dashboard grid, then use the new controls when they ship to npm.
Explore data components
Compose dashboard widgets with the data package and chart primitives.
For agents
The catalog can describe dashboard layouts as data. The interactive demo itself uses only local fictional rows and does not contact a service.
data-dashboarddata-dashboard: In developmentCatalog component for a host-rendered dashboard layout.
data-dashboard-widgetdata-dashboard-widget: In developmentCatalog component for a dashboard widget in a validated blueprint.
Platforms
Web
Web: In developmentSvelte 5 packages published on npm (pre-1.0).
Compose Desktop
Compose Desktop: PlannedKotlin Multiplatform renderer on the JVM, built in this repository.
Android
Android: PlannedNative renderer target.
iOS
iOS: PlannedNative renderer target.
Start building with Dashboards
KPI boards people arrange, from the keyboard too.
