@dashboard-designer/ui

Embeddable React dashboard designer and viewer.

Install

npm install @dashboard-designer/ui @dashboard-designer/core react react-dom
# or
pnpm add @dashboard-designer/ui @dashboard-designer/core react react-dom

Install from a local checkout (after pnpm build in the monorepo):

npm install /path/to/DashboardDesigner/packages/ui /path/to/DashboardDesigner/packages/core react react-dom

Both @dashboard-designer/ui and @dashboard-designer/core are required. Do not install only ui — it depends on core.

Usage

import { DashboardDesigner, DashboardViewer } from '@dashboard-designer/ui';
import '@dashboard-designer/ui/styles.css';

<DashboardDesigner
  apiBaseUrl="https://your-api.example.com"
  auth={{ mode: 'anonymous' }} // or { mode: 'token', token }
  locale="en"
  onSave={(dashboard) => console.log(dashboard)}
/>

<DashboardViewer
  dashboard={dashboardJson}
  apiBaseUrl="https://your-api.example.com"
  auth={{ mode: 'anonymous' }}
  locale="es"
/>

Requires the @dashboard-designer/server API for query execution and connection secrets.